The SVG Blob Generator turns four explicit settings — vertex count, irregularity percentage, canvas size, and fill color — into a single reproducible organic SVG path that you can copy or download in one click. Open the SVG Blob Generator and you will see a square preview, four labeled inputs, a Randomize Shape button, a Copy SVG action, a Download SVG link, and a numeric seed printed under the result. Every action on the page rewrites the exact same SVG string: the preview, the clipboard text, and the downloaded file all come from one in-memory document. Nothing is uploaded, no account is needed, and no server-side graphics service renders the shape — the browser handles all of it from a deterministic algorithm. For a first-time visitor, the job is to learn what each of the four controls does, click Randomize Shape until you like the silhouette, note the seed, and then take the markup somewhere useful.
What the SVG Blob Generator Builds for You
The generator is a focused shape tool, not a vector editor. It accepts a small set of integer or percentage values, distributes vertices at equal angular intervals around the canvas center, varies the radius of each vertex through a seeded random source, and joins the midpoints of adjacent vertex pairs with quadratic Bézier curves. The result is a continuously rounded outline made from one path command stream, an explicit width and height, a matching viewBox, an accessible image label, and a single six-digit HEX fill. The tool deliberately does not add gradients, strokes, shadows, clipping paths, animation, CSS classes, or metadata, because those layers are easy to bolt on later inside a real editor once the silhouette is locked.
The page rebuilds the SVG string on every input change, so the preview is always live and never lags behind a stale thumbnail. The on-page preview is constrained only by layout, so the dimensions you see in CSS are not the same as the width and height baked into the exported markup — the file still carries the canvas size you requested, ready for any destination that respects viewBox geometry.
A Tour of the Four Controls
Beginners often expect a vector editor with handles and layers. The SVG Blob Generator trades that surface area for a tiny, predictable input set. The four controls map directly to documented limits, and the page rejects invalid values rather than silently clamping them, so the path that comes out is exactly the path you asked for.
| Control | Accepted values | What it actually changes |
|---|---|---|
| Vertices | Integer, 3 through 12 | Number of anchor points placed around the canvas center at equal angles |
| Irregularity | Integer, 0 through 100 (treated as a percentage) | How much each vertex's radius is allowed to wander from the base circle |
| Size | Three practical presets covering the 256–1024 px square range | Both the exported width and height, and the matching viewBox |
| Fill | Strict six-digit HEX (e.g. #4A90E2) | The only color in the file; alpha, gradients, and strokes are intentionally absent |
At zero percent irregularity every vertex shares the same radius, which gives a smooth circle. As the value climbs, individual vertices pull in or push out along their fixed angle, producing organic lobes and concave dips without ever crossing a conservative canvas margin. Vertices only change the silhouette's detail level — they do not increase the coordinate precision written into the file. For the underlying path grammar that the tool serializes, the MDN SVG path reference is a useful companion.
Generate Your First SVG Blob in Three Steps
- Set the four controls. Pick a vertex count between 3 and 12, an irregularity percentage between 0 and 100, one of the three size presets, and a six-digit HEX fill. The preview updates on every keystroke or slider move, so change one variable at a time and watch the silhouette respond.
- Click Randomize Shape until the preview fits your design, and record the displayed seed. Randomize Shape asks the browser's cryptographic random source for a fresh unsigned 32-bit seed only when you press the button, so unrelated re-renders or page refreshes cannot silently change the graphic. The current seed is printed under the result, which is what makes the shape reproducible.
- Copy the SVG markup or download the vector file, then test it in the destination application. Use Copy SVG to push the full markup to the clipboard, or Download SVG to save a file whose name contains the seed. Open the file in the browser, editor, email client, or content system where you plan to use it, because some sanitizers reject inline SVG or data URLs even when the markup itself is valid.
That three-step loop — set, randomize-and-record, copy-or-download — covers everything the tool can do. The rest of the page is either a view of the live document or a transport for it.
Reading and Saving the Seed
The seed is the single number that controls how radii are distributed. Because the irregularity generator is deterministic and seeded, the same seed combined with the same vertices, irregularity, size, and color always produces the same points, the same path data, and the same SVG markup. That makes the seed a portable handle for a shape you like: store it next to the four other inputs and you can rebuild the exact blob on any machine that can open the generator.
| Action | Seed behavior | Other settings |
|---|---|---|
| Typing into any of the four controls | Stays the same | Change to your new values |
| Clicking Randomize Shape | Replaced with a fresh cryptographic value | Untouched, so geometry and color stay stable |
| Clicking Copy SVG or Download SVG | Stays the same | Untouched; current settings ride along into the file |
| Page reload without a saved seed | Resets to the page's initial value | Reset to page defaults |
If you need a permanent record, write the seed down alongside the four explicit settings. A simple line such as "8 vertices, 40% irregularity, 512 px, #4A90E2, seed 1739482103" is enough to reproduce the shape later. A more thorough walkthrough of that habit lives in the guide on reproducing the same SVG blob later by saving the seed.
Copying or Downloading the Vector
Copy SVG writes the complete markup to the clipboard, including the SVG element, width, height, viewBox, image label, and one path. If the browser blocks clipboard access, the same markup remains visible in a read-only text area right next to the preview, so you can still select it manually and paste it into an editor. Download SVG uses a filename that contains the seed so you can recognize the file later, and the file itself is a real SVG document encoded as a data URL — it is not a screenshot and it is not a rasterized preview. Because it carries a matching viewBox, the file stays a vector when you resize it inside any editor or browser that respects SVG geometry.
It helps to remember that what you copy is exactly what gets downloaded. There is no separate "high-quality export" pathway, no hidden optimizer, and no server-side rasterization step. If you need gradients, strokes, animation, or accessibility metadata beyond the simple image label the tool provides, add those inside a dedicated vector editor after the file leaves the generator.
Limits Worth Knowing Before You Start
A blob is decorative geometry, not a mathematical circle, a logo clearance rule, a geographic outline, a biological model, or a randomly generated identity mark. Treating it as any of those will set the wrong expectations. Increasing vertex count adds detail to the silhouette but does not raise the precision of the exported coordinates, because every value is rounded to two decimal places at serialization time. That rounding keeps the markup short and stable while still leaving more than enough resolution for canvases up to 1024 pixels square. High irregularity values can produce tight bends or an unbalanced visual mass, so check the preview at both large and small display sizes before you commit.
If the blob will sit behind text, inspect real contrast rather than trusting the SVG's canvas margin to guarantee readability — the tool reserves margin around the shape, but it does not measure text legibility for you. The browser's native color input supplies valid six-digit HEX values during normal interaction, and the generator rejects anything else, so you will not see a silent clamp. Finally, plan to test the exported file inside the real destination: email clients, design tools, and content systems can each impose their own rules on inline SVG or data URLs, even when the markup itself is technically valid. Running a quick render check inside the target environment is the cheapest way to catch a sanitizer before it reaches production.
For a deeper look, see Fix a Wrong SVG Pattern Result After Generation.