Blob Shape Generator

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

  • Color & Design
  • Runs in your browser
  • Free, no signup

The guide

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

1

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.

2

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.