Blob Shape Generator

Generate organic blob shapes with adjustable complexity, size, and randomness as SVG paths.

Tested tool guide Tested browser tools Checked August 16, 2026

What Blob Shape Generator does and how it behaves

Hand-drawing an organic blob in a vector editor means dragging anchor points until the curve stops looking wrong; this tool skips that. It generates an irregular, closed SVG path from three settings: complexity (how many curve segments build the outline), size, and randomness (how far the outline strays from a circle). The result is path data to paste into an SVG path element's d attribute. Generation is random, so the same settings rarely give the same blob twice. The common surprise: size lives in the path coordinates, not pixels - how large the blob renders depends on the viewBox and width of the SVG that hosts it.

How the result is produced

How the outline is formed

The result is a closed loop of smoothly curved segments, and complexity is the segment count. That is what the setting does: low complexity yields a simple, calm silhouette with few bulges, high complexity allows a busy, detailed one. Randomness is the counterweight - at its minimum the outline is nearly round, at its maximum it wanders widely, which is why every regeneration differs from the last.

What the output actually is

The output is the d attribute of an SVG path: a sequence of commands with absolute coordinates. It carries no fill, stroke, color, or dimensions; those come from the path element and the SVG that contains it. A blob pasted into an SVG whose viewBox does not cover its coordinate range can render cropped or at an unexpected scale.

Good uses

A hero section or card needs a soft, organic shape behind the headline: generate a blob, paste the path into an SVG, and fill it with a muted color so the text no longer sits on a flat rectangle.
A design mockup needs a quick abstract illustration - a blob behind a product screenshot or as an avatar placeholder - without opening a vector editor or hunting for stock assets.
A badge, sticker, or logo container should feel hand-made: a low-complexity blob gives an asymmetric, friendly outline where a perfect circle looks too rigid.

Limits and checks

Generation is random, so the same settings rarely give the same shape twice. If the tool has no seed control, the only way to recover a blob you liked is the copied path string - keep it before regenerating, because the old one is not coming back.
The size setting writes numbers into the path's coordinate space; the blob's rendered size on the page depends on the hosting SVG's viewBox and width. A large size can crop or overflow a small container even though the path data is valid.
The sliders steer, they do not specify. You can push the outline toward calm or wild, but you cannot make bulges land where you want or hit a particular silhouette. For a precise outline, treat the output as a starting point to edit in a vector tool rather than a finished asset.

Common questions

Can it produce a perfectly round circle?

Not as such - randomness at its minimum yields a nearly round, smooth blob, but the outline is still built from curved segments, so it is never a true circle. If the design calls for an exact circle, use SVG's circle element instead; this tool is for the shape circles are not.

How do I put the output on my page?

Wrap it in an SVG: <svg viewBox='0 0 300 300'><path d='...' fill='#888'/></svg>. The path data renders nothing by itself - it needs the hosting SVG and a fill or stroke. It is not an image file, so <img> tags and CSS background images cannot use it unless you save the SVG as a file first.

References and verification

The behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.