An SVG blob only repeats when every input that controls its shape is held constant and the random source is replaced with a fixed seed. SVG Blob Generator accepts four user-controlled inputs — vertex count, irregularity, canvas size, and fill color — and assigns each result an unsigned 32-bit seed that is displayed beneath the preview — and uses a deterministic generator so equal inputs always yield equal points, equal path commands, and equal serialized markup. The shape does not depend on browser, operating system, time of day, or any server-side randomness, because the only place new randomness enters the system is when you press the Randomize Shape button. That means the page can hydrate, the React component can rerender, and the browser can repaint without silently altering the silhouette you were just looking at. The same five values reused on any computer, at any later date, through any copy-paste or downloaded file, will rebuild the same blob byte-for-byte.
The mismatch between "I just liked that one" and "the page will not give it back" is the classic pain of generative shapes. A blob is a closed curve drawn through a handful of points scattered around a center, then smoothed with quadratic Bézier curves. If the coordinates of those points come from an unseeded random call, the geometry is freshly drawn on every refresh, every render, every tab reopen, and every teammate's machine. The shape you carefully matched to a layout is gone as soon as anyone navigates away.
That is why repeatable SVG blobs are a design-system problem as much as a graphics problem. A marketing team, a frontend team, and a CMS template all need the same outline, the same curve, the same fill, and the same canvas dimensions. Without a deterministic source, the only way to keep everyone aligned is to distribute a frozen file and never touch the controls again. With a deterministic source, you distribute five small values instead of a kilobyte of markup.
Why Most SVG Blobs Change Every Time
The default behavior of any in-browser random generator is to produce a different sequence every time it is called. Even when two pages run identical code, the browser's built-in random source is not synchronized between tabs, between sessions, or between devices. Each call advances an internal state that the page cannot read back, so the same generator function returns different numbers on Monday morning than on Friday afternoon.
Three behaviors combine to make a "random" blob unstable:
- The generator is reseeded implicitly on every page load, so refresh equals new shape.
- The generator advances every time the function is called, so adding one more vertex or moving one slider can rearrange every other point.
- The output is copied or downloaded at unpredictable moments, so the bytes you paste into your editor may not match the bytes you saw a moment earlier.
For a decorative background that does not matter much, but for a hero illustration, a card mask, or a brand identity element, instability is unacceptable. The shape must round-trip from the generator to the layout file, from the layout file to a teammate, from the teammate to the production deploy, and from production back to a redesign pass, with the silhouette preserved at every step.
What Makes SVG Blob Generator Repeatable
SVG Blob Generator replaces the unseeded random source with an unsigned 32-bit seed that is generated when Randomize Shape is pressed. The seed is shown beneath the preview the moment it is created, and the same five-value combination — vertices, irregularity, size, color, and seed — is the only thing that ever feeds the path builder. Because every internal computation is a pure function of those five values, two computers running the same code with the same settings and seed produce the same path data down to the last rounded coordinate.
Two design decisions are worth noticing because they prevent the silent drift that plagues other generators. First, randomness is called only when the Randomize Shape button is pressed; nothing in the React render path or the layout engine touches the random source, so a rerender triggered by a parent component or a hydration mismatch cannot change the silhouette. Second, the path is regenerated from scratch every time the controls change, so the points you see are exactly the points the Copy SVG action and the Download SVG link serialize — there is no preview cache that can fall out of sync with the export.
The implementation also rounds coordinates to two decimal places during serialization. That choice keeps the markup human-readable and stable across regenerations while retaining more than enough precision for the available canvas sizes between 256 and 1024 pixels. A repeated run produces the same string, not just a visually similar shape.
Repeat the Same Result From the Generator
The actual workflow is short, and each step has a single purpose. Repeat these in order, and the file you keep will match the file you can produce again later.
- Open the SVG Blob Generator and set vertex count, irregularity, canvas size, and fill color to your intended values.
- Press Randomize Shape until the preview matches your layout, then read the unsigned 32-bit seed displayed below the result.
- Record the seed together with the four shape values you set in step one — write them in a comment inside your design file, in a ticket, or in a shared note.
- Copy the SVG markup or download the SVG file and paste or upload it into your design tool, CMS, or code repository.
- To rebuild the same blob on another machine or at a later date, return to the generator, enter the same four values, then press Randomize Shape until the displayed seed matches the one you recorded, and the preview will match the original byte-for-byte.
- Verify by comparing the path data string in the new file against the path data string you saved earlier.
Step three is the one most teams skip and later regret. The seed alone is not enough — if a teammate retypes "eight" instead of "8" for vertices, or types "40" instead of "60" for irregularity, the radius distribution changes and the silhouette drifts even though the seed matches. Treat the five values as a single record.
Inputs That Must Stay Identical to Repeat
Each control has a clearly defined range and a clearly defined effect on the output. The table below summarizes what each input does and what range the generator accepts. Any value outside the stated range is rejected by the generator rather than silently clamped, so a typo in the seed field or the irregularity slider will produce an error rather than a quietly different shape.
| Input | Accepted range | Effect on the blob |
|---|---|---|
| Vertex count | Integers 3 through 12 | Number of radial anchors placed at equal angular intervals around the canvas center |
| Irregularity | 0 through 100 | Radius variation per vertex; 0 gives a circle, 100 allows the widest spread within the safe margin |
| Canvas size | Square canvas from 256 to 1024 px via three practical presets (tested logic 128–1024) | Width, height, and matching viewBox of the exported SVG |
| Fill color | Strict six-digit HEX, for example #3A6FF8 | The single fill applied to the lone path element |
| Seed | Unsigned 32-bit integer, displayed beneath the preview | Determines the radius assigned to each vertex through the seeded generator |
Vertices are placed at equal angular intervals around the canvas center, so changing vertex count from six to eight redistributes the existing radii to new angles rather than adding more points to the same angles. That is why a higher vertex count can make a silhouette feel more detailed without changing the underlying radius distribution, and it is also why a vertex-count change is a real shape change, not a cosmetic one.
Where Repeatability Can Still Break
Determinism inside the generator is necessary but not sufficient. The blob has to survive the trip from the generator to wherever it will live, and three common destinations impose their own restrictions.
Email clients and some CMS sanitizers strip inline SVG, drop path attributes, or refuse data URLs even when the markup itself is valid. The W3C SVG 2 path specification defines the commands the generator relies on — move, quadratic Bézier, and close — so the file is standards-compliant on its way out, but the destination may still rewrite or reject it. For a browser-oriented view of how those commands are parsed, the MDN path element reference is a useful companion.
Raster conversion breaks repeatability by definition. If the SVG is flattened to a PNG for use as a background image, the vector geometry is gone, the coordinates are gone, and no future seed value will reproduce the pixels. The Download SVG link exports genuine vector text, but the moment a downstream tool rasterizes it, the file is no longer repeatable from inputs alone.
High irregularity can also create tight bends that look elegant at 1024 px and crowded at 64 px. The exported coordinate precision does not increase with vertex count, so the same seed at the same size produces the same string, but the visual mass can read very differently at small scales. Inspect the preview at the smallest size the blob will appear before committing the record.
Sharing a Repeatable Blob With Collaborators
Once the five values are recorded, sharing is a documentation problem rather than a generation problem. Two formats work well depending on the audience. For developers, paste the SVG markup into a shared component file and add a comment that lists the five inputs that produced it. For designers working in Figma or Illustrator, download the SVG, drop it into the design system library, and attach a sticky note or layer name that includes the seed, vertex count, irregularity, size, and color.
The downloaded filename already embeds the seed, which is a useful safeguard against accidental renaming. Even so, treat the seed as metadata rather than identity. Two blobs with different vertex counts but the same seed are not the same blob — the radii are distributed across a different number of angular slots. Save all five values together, every time.
For a first walkthrough of the interface and the meaning of each slider, the getting started with the SVG Blob Generator guide covers the same controls from a setup angle. When a repeated run does not match the original, the fix a wrong-looking SVG blob result guide walks through the usual suspects, including mistyped seeds and HEX values that look identical but differ in one channel.
Repeatability is what turns a generative shape from a one-off decoration into a stable asset. With the five values recorded and the file tested in the destination, the silhouette can survive version control, teammate handoffs, and redesign passes without drifting away from the original.