When you generate an SVG blob, the expected result is a compact standalone SVG file containing exactly one path element, an explicit width and height, a matching viewBox, an accessible image label, and a single strict six-digit HEX fill color. The file contains the same markup that powers the on-page preview, the clipboard copy action, and the download link, so what you see is exactly what you save. Coordinates inside the path are rounded to two decimal places during serialization, which keeps the markup short and readable while still offering more precision than any pixel grid the supported canvas sizes can display. The geometry is reproducible because every blob is built from a deterministic seeded generator, and the current seed is shown beneath the preview so a useful shape can be recorded and recreated later. The expected result is therefore not a screenshot, not a flattened raster, and not a server-side model; it is genuine vector text that remains scalable in any compliant browser or editor.
Knowing this in advance matters because the typical reason people reach for an SVG blob is to drop a soft, organic shape behind a hero section, inside a card, or over an empty content area. If you expect to receive a transparent PNG, an animated loop, or a gradient-styled graphic, you will be surprised; the generator outputs a single flat-colored closed shape and nothing more. Understanding the exact shape of the output helps you decide whether you still need to add finishing touches downstream.
What the Generator Returns as a File
The output is one small text document with a clear structure. The expected document starts with an SVG root tag that declares explicit width and height attributes in pixels, and those attributes always match the values declared in the viewBox. Inside the root sits a single path element whose d attribute holds the move, quadratic curve, and close-path commands that draw the blob. The fill attribute on that path is a six-digit HEX color with no shorthand, no alpha, and no CSS variable reference. The document also carries a title or aria-label so screen readers can identify the image, and that is essentially everything. There is no embedded raster image, no embedded font, no script tag, no foreign object, no clip path, no mask, no animation tag, and no stylesheet block. The result is intentionally minimal so it survives most sanitizers and remains easy to hand-edit.
The expected downloaded file is real SVG text, not a bitmap snapshot. It is delivered as a data URL, which means the file you save contains the literal markup rather than a base64-encoded raster. When opened in a vector editor such as Inkscape, Illustrator, or Figma, the shape is editable as a single path whose anchor points and control handles can be moved. When embedded in HTML or CSS, the file scales without quality loss because the consumer renderer reads the path commands directly.
What the Blob Shape Looks Like
The expected silhouette is a smooth closed organic curve, not a polygon and not a circle. Vertices are placed at equal angular intervals around the center of the canvas, and the irregularity control adjusts how far each vertex sits from that center. At zero percent irregularity every vertex shares the same radius, which produces a perfectly regular polygon whose sides are softened by the curve step. At higher irregularity values the radii diverge, but every point stays inside a conservative canvas margin so the outline never clips against the viewBox. Increasing the vertex count from 3 toward 12 adds more bends, which can make the silhouette feel more detailed; it does not, however, change the coordinate precision in the file, because all serialized coordinates are rounded to two decimal places regardless of how many vertices are requested.
The curve itself is built from quadratic Bézier segments, not straight lines. The generator starts at the midpoint between the last and first vertices and then walks through the midpoints between each pair of vertices, drawing a quadratic curve whose control point is the original vertex. Because the curves meet at midpoints rather than at the vertices themselves, the outline flows continuously without sharp corners. If a result looks pointy, that usually means irregularity is high relative to the vertex count; if a result looks too round, that usually means irregularity is low relative to the vertex count.
How to Produce the Expected Result
- Open the SVG Blob Generator in a modern browser; no account or upload is required, and nothing leaves your device.
- Set the vertex count anywhere from 3 through 12, set the irregularity between 0 and 100 percent, choose a square canvas size between 256 and 1024 pixels, and pick a fill color using the browser color picker so the HEX value is always valid.
- Press Randomize Shape until the preview matches the silhouette you want. Each press asks the browser's cryptographic random source for a new unsigned 32-bit seed, so the preview redraws deterministically while your geometry and color settings stay put.
- Read the seed displayed below the preview and write it down alongside your vertices, irregularity, size, and color if you may need to recreate the exact same shape later.
- Use Copy SVG to write the complete markup to the clipboard, or use Download SVG to save a file whose name includes the seed. If clipboard permission is denied, the same markup remains visible in a read-only text area so you can select and copy it manually.
- Open the file in your destination browser, design tool, email template, or CMS and confirm the shape renders at both large and small sizes, especially if text will sit on top of it.
What Each Control Changes in the Output
The four explicit controls each affect the output in a predictable way. Vertices change how many anchor points the path contains, which changes the level of detail in the silhouette. Irregularity changes the radius assigned to each anchor by the deterministic seeded generator, which changes how varied the outline looks. Size changes the canvas dimensions, and because the viewBox is set to match the width and height, resizing the SVG in CSS or HTML scales the whole shape proportionally. Fill changes the color attribute on the path, and that color is always serialized as six hexadecimal digits with a leading hash. The Randomize button does not change any of those four values; it only swaps the seed, which is why the same vertex, irregularity, size, and color combination can produce many visually distinct blobs.
| Control | Accepted values | Effect on the result |
|---|---|---|
| Vertices | Integer from 3 through 12 | Increases the number of anchor points and bends in the silhouette |
| Irregularity | Integer from 0 through 100 | Increases how much each anchor's radius can vary from the average |
| Size | Square canvas from 256 through 1024 px | Sets the width, height, and matching viewBox of the file |
| Fill | Six-digit HEX color | Sets the single fill attribute on the path; no shorthand, no alpha |
| Seed (displayed) | Unsigned 32-bit integer | Determines the radius pattern; same inputs plus same seed yields the same blob |
The seed is shown beneath the preview precisely because reproducibility is part of the expected result. If you generate a shape you like, capture the seed together with the four visible controls; later, entering the same values into the generator should reproduce the same points, the same path commands, and the same serialized markup. That behavior is supported by deterministic tests and is the reason the generator refuses to silently change the shape during page hydration or unrelated rerenders.
What the Tool Deliberately Leaves Out
The expected result does not include gradients, strokes, drop shadows, glow effects, clip paths, masks, CSS classes, embedded fonts, metadata, raster fallbacks, or animation. Adding any of those is a deliberate step you take after downloading the markup, typically in a vector editor or in CSS that targets the embedded SVG. The generator is also not a full vector editor: it does not let you drag individual anchors, combine multiple blobs, or paste in your own path commands. If your design calls for a gradient stop in the middle of the blob, expect to add a linearGradient or radialGradient element to the markup yourself and reference its id from the path fill. If your platform requires a fallback PNG, expect to render the SVG to a bitmap through your own pipeline; the downloadable file will not include a raster mirror.
It is also worth expecting that some downstream platforms will refuse the file even though the markup is valid. Email clients, strict content security policies, and certain CMS sanitizers can strip inline SVG or block data URLs, and the generator does not work around those restrictions for you. The safest workflow is to download the file, then test it inside the final browser, editor, email template, or content system before relying on it in production. The path data itself follows the W3C SVG 2 grammar for move, quadratic curve, and close-path commands, so any consumer that respects the spec will render the shape correctly. If you need an authoritative reference for the path commands you see inside the generated file, the W3C SVG 2 Paths specification describes the exact serialization rules.
Reading the Output Before You Commit
Before you ship the result, inspect the preview at both large and small sizes, because high irregularity can create tight bends or an unbalanced visual mass that only becomes obvious when the blob is scaled down. If the shape will sit behind text, check real contrast using a dedicated tool and leave generous padding rather than assuming the canvas margin guarantees readability. If you need the exact same blob in two places, such as a hero illustration and a matching social card, rely on the recorded seed rather than on hitting Randomize twice and hoping for the best. Treat the generator as a focused shape producer: it returns exactly the markup described above, no more and no less, and that predictability is the point. When you understand what to expect, you can plan the finishing touches elsewhere in your pipeline instead of being surprised by what the file does or does not contain. If you want a more detailed walk-through of capturing the seed for later use, see the guide on repeating the same result when you generate an SVG blob.
If you're weighing options, Best Way to Generate an SVG Pattern for CSS Backgrounds covers this in detail.