An SVG blob is a single closed vector path made of quadratic Bézier curves joined at the midpoints between evenly spaced vertices, and the SVG Blob Generator rebuilds that exact path string for the live preview, the Copy SVG action, and the Download SVG link. Before opening the tool, beginners should understand a few things that prevent wasted effort: the shape is decorative geometry, not a logo standard or mathematical guarantee; every control has hard valid ranges that are rejected when violated; the file is plain SVG text served as a data URL, not a screenshot; and equal settings plus the same seed give byte-identical markup. Knowing these up front keeps the design intent and the destination application aligned, which is the purpose of the rest of this article — to walk through what an SVG blob actually is, what the four inputs control, how to drive the generator, what the tool deliberately leaves out, why the displayed seed is the key to reproducibility, and where the result should be tested before it is relied upon.
What an SVG Blob Actually Is (and What It Is Not)
An SVG is an XML-based vector format, and a "blob" inside that format is just an organic-looking closed shape built from a single <path> element. The generator creates that path by placing vertices at equal angular intervals around the canvas center and joining the midpoints between consecutive vertices with quadratic Bézier curves. Per the MDN path reference, a quadratic curve takes the form of a control point followed by an end point, and that is exactly the syntax the generator emits. Because the path sits inside an SVG document that carries its own width, height, and matching viewBox, the result scales without losing sharpness in any browser, code editor, or design tool that understands inline or standalone SVG.
What a blob is not, however, is just as important. A blob is decorative geometry. It is not a logo clearance rule, a geographic outline, a mathematical circle, a biological model, or a randomized identity mark that should be unique by default. Treating it as anything else leads to over-designing the export, hiding it behind filters that are not part of the file, or relying on its "randomness" for branding decisions. Treating it as a single decorative fill keeps the deliverable honest: one path, one hex fill, one shape.
The Controls You Set Before You Press Randomize
Beginners often expect a slider-filled playground, but the SVG Blob Generator exposes only four explicit inputs, and each has a hard accepted range. The interface accepts three through twelve vertices as integers, irregularity between zero and one hundred, a square canvas with integer pixel sizes, and a six-digit HEX fill. The tested generator logic supports sizes from 128 through 1024 pixels, while the page itself offers three practical presets so most users never type the dimension directly. Every value that does not fall inside these ranges is rejected by the pure generator instead of being silently clamped, which means a mistake at the input stage surfaces as a missing or invalid path rather than a quietly-wrong shape downstream.
Irregularity deserves a quick mental model. At zero percent, every vertex sits at exactly the same distance from the center, so the outline stays symmetric, but the curve still passes through midpoints between vertices rather than reaching the vertex radius, so the result is not a mathematical circle. As irregularity rises, a seeded generator assigns each vertex a different radius while keeping all points inside a conservative canvas margin. High irregularity values can produce tight bends or unbalanced visual mass, so the preview should be inspected at both the requested canvas size and at thumbnail scale. Vertices add silhouette complexity without changing the coordinate precision that gets serialized, because every number is rounded to two decimal places before the markup is written.
| Control | Accepted values | Practical meaning |
|---|---|---|
| Vertices | Integers 3–12 | How many corner anchors are placed around the center |
| Irregularity | 0–100 | How much each vertex's radius can vary from the average |
| Size | Square canvas, 128–1024 px | Width, height, and matching viewBox in the output |
| Fill | Strict six-digit HEX | Single solid color for the entire path |
Generate Your First SVG Blob in Three Steps
- Set the four inputs. Pick a vertex count between three and twelve, an irregularity value from zero through one hundred, a square canvas size, and a six-digit HEX fill color. The browser color picker already supplies a valid HEX during normal interaction, so a typo only happens when the value is typed by hand.
- Randomize until the preview fits. Press the Randomize Shape button as many times as needed. Each press asks the browser's cryptographic random source for a fresh unsigned 32-bit seed and rebuilds the preview with that new seed. Write the displayed seed down whenever the shape looks right, because the same settings plus the same seed always reproduce the same path.
- Copy or download, then test. Use Copy SVG to send the complete markup to the clipboard, or Download SVG to save the same markup as a standalone file whose name embeds the seed. If the browser blocks clipboard access, the read-only text area below the preview still exposes the full markup for manual selection. Drop the result into the destination application and confirm it renders before relying on it.
That three-step rhythm is the whole workflow. New users sometimes try to "tweak" the path by hand after copying, but the simpler habit is to adjust one of the four controls, press Randomize again, and let the seeded generator do the math. The deterministic relationship between settings, seed, and markup is documented in the guide on reproducing the same SVG blob later, and reviewing it once helps cement that the preview is not an approximation — it is exactly what gets exported.
What the Tool Will Not Do For You
The generator deliberately defines a focused shape maker rather than a full vector editor, which is a feature rather than a hole. It does not add gradients, strokes, shadows, clipping paths, animation, CSS classes, metadata blocks, optimization passes, or raster fallbacks. It does not upload the shape, color, seed, or markup anywhere; no account is required and no external graphics service is contacted. None of those omissions is a bug — they keep the output small, predictable, and easy to hand-edit later if a destination demands something the generator skipped.
The practical consequence is that beginners must inspect the preview at both large and small sizes and reason about where the file will live. High irregularity can create tight bends that look fine at 800 pixels and brittle at 64 pixels; behind text, real contrast and manual padding matter more than the SVG's internal canvas margin. Sanitizers in the destination can also strip inline SVG or reject data URLs even when the markup itself is valid, so the file should be tested in the final browser, editor, email client, or content system rather than trusted by default. If the destination needs a polish pass, edit the downloaded SVG in a vector tool — the on-page preview is not a substitute for that step.
Reproducibility, Seeds, and Saving Your Work
Reproducibility is the reason the seed is shown beneath the result instead of hidden. The seed drives a deterministic unsigned 32-bit generator that varies the radius assigned to each vertex, while the geometry and color controls stay stable. Randomize asks the browser's crypto source for a new seed only when the button is pressed; it never runs during React rendering, so hydration and unrelated rerenders cannot silently change the graphic. Equal vertices, equal irregularity, equal size, equal fill, and equal seed will give equal path data — every coordinate, control point, and end point — down to the two-decimal rounding.
For repeatable projects, save the five numbers together: vertices, irregularity, size, hex, and seed. Treat invalid values as rejection rather than correction — typing a non-HEX character, a vertex count outside 3–12, or a size outside 128–1024 means the generator will not silently "round to a valid value." That contract is intentional, and it pushes typos to the surface instead of producing an unrelated shape. The clipboard fallback also keeps reproducibility intact: if Copy SVG fails, the read-only text area still shows the exact markup the download would have written.
Testing the Result Where It Will Actually Live
The last beginner checkpoint happens outside the generator. Open the copied or downloaded file in the same context that will host it. A standalone .svg opened in a browser should display the shape at its requested width and height with the chosen hex fill, and resizing the browser window should not change the file dimensions, because the on-page preview is constrained by layout only and does not replace the SVG's own width or height. If the blob is going to sit behind text, use a proper color contrast checker instead of trusting the designer's eye, and leave enough padding that the curve never touches a letter.
Two final habits prevent the common beginner surprises. First, keep the seed with your design notes so the same shape is rebuildable months later. Second, run the final markup through whatever sanitizer the destination platform uses, because some email clients and content management systems restrict inline SVG or data URLs even when the file itself is well-formed. The generator stays out of that step on purpose: it ships clean, minimal, deterministic markup and leaves platform-specific decisions to the platform.
If you're weighing options, What an SVG Pattern Generator Actually Returns covers this in detail.