Skip to content
Lizely

SVG Blob Generator

Create a reproducible organic SVG blob, then copy or download the exact vector markup.

Privacy: your files never leave your device. All processing happens locally in your browser.

How to use

  1. 1.Set the vertex count, irregularity, canvas size, and fill color.
  2. 2.Use Randomize Shape until the preview fits your design, and record the displayed seed if reproducibility matters.
  3. 3.Copy the SVG markup or download the vector file and test it in the destination application.

About SVG Blob Generator

SVG Blob Generator creates a compact organic vector shape from a small set of explicit controls. Choose three through twelve vertices, set irregularity from zero through one hundred percent, select a square canvas from 256 to 1024 pixels, and pick a fill color. The page immediately rebuilds the same SVG string used by the preview, copy action, and download link. No shape, color, seed, or exported markup is uploaded, and no account or external graphics service is required.

The shape is reproducible because it uses an unsigned 32-bit seed. Equal settings and the same seed produce the same points, path data, and SVG markup. Randomize Shape asks the browser's cryptographic random source for a new seed only when the button is pressed. Randomness is not called during React rendering, so hydration and unrelated rerenders cannot silently change the graphic. The current seed is displayed below the result so a useful shape can be recorded and recreated later.

Vertices are distributed at equal angular intervals around the canvas center. Irregularity changes the radius assigned to each vertex by a deterministic seeded generator. Zero percent gives every vertex the same radius; higher values allow greater radial variation while keeping all points within a conservative canvas margin. The tool then starts at the midpoint between the last and first vertices and joins successive midpoints with quadratic Bézier curves controlled by the original vertices. This produces a continuously rounded outline without inserting an opaque bitmap or relying on a server-side model.

The generated document has an explicit width, height, matching viewBox, accessible image label, one path, and one strict six-digit HEX fill. Coordinates are rounded to two decimal places when serialized. That rounding keeps the file readable and stable while retaining ample precision for the available canvas sizes. The downloadable result is genuine SVG text encoded as a data URL, so it remains vector geometry when resized in compatible editors or browsers. The on-page preview is constrained by layout only; it does not replace the requested SVG dimensions.

The controls deliberately define a focused shape generator rather than a full vector editor. Vertices accept integers from three through twelve. Irregularity accepts zero through one hundred. Size accepts integers from 128 through 1024 in the tested logic, while the interface offers three practical presets. Fill must be a six-digit HEX color. Invalid values are rejected by the pure generator instead of being clamped behind the user's back. The browser color input supplies valid values during normal interaction.

A blob is decorative geometry, not a mathematical circle, logo clearance rule, geographic outline, biological model, or randomly generated identity mark. Increasing vertices can make the silhouette more detailed, but it does not increase the exported coordinate precision. High irregularity can create tight bends or an unbalanced visual mass, so inspect the preview at both large and small sizes. If the shape will sit behind text, check real contrast and leave sufficient padding rather than assuming the SVG's canvas margin guarantees readability.

Copy SVG writes the complete markup to the clipboard. If browser permission is denied, the same markup remains visible in a read-only text area for manual selection. Download SVG uses a filename containing the seed and does not create a persistent server file. The tool does not add gradients, strokes, shadows, clipping paths, animation, CSS classes, metadata, optimization passes, or raster fallbacks. Those can be added later in a vector editor if the destination requires them.

For reproducible use, save the seed together with vertices, irregularity, size, and color. Test the file in the final browser, editor, email client, or content system because some sanitizers restrict inline SVG or data URLs even when the markup itself is valid. W3C SVG 2 defines path data, including move, quadratic curve, and close-path commands, while MDN provides a browser-oriented path reference. Those sources support the serialization grammar; the seeded radius model and product limits are intentionally local behavior covered by deterministic tests.

Methodology & sources

Generate evenly spaced angular vertices, vary radii with a seeded unsigned 32-bit generator, join successive midpoints using quadratic Bézier commands, round serialized coordinates to two decimals, and use one strict HEX fill.

Frequently asked questions

Can I reproduce the same blob later?
Yes. The same vertices, irregularity, size, color, and displayed seed generate the same SVG path.
Is the download a real vector file?
Yes. It is standalone SVG markup with a viewBox and path, not a screenshot or rasterized preview.
Why does Randomize change only the seed?
The seed controls deterministic radius variation, while your chosen geometry and color settings remain stable.
Does the tool optimize SVG for every platform?
No. It creates simple valid markup; destination sanitizers, email clients, and design tools can impose their own restrictions.

Related tools

Color Tools guides

View all