SVG Blob Generator

What this tool is used for

• Producing an organic background shape for a section.
• Generating a decorative blob to sit behind an illustration.
• Getting several variations quickly to pick one.
• Producing an SVG shape that scales without pixelation.
• Making a soft mask so an image fades into the page rather than ending square.

Frequently Asked Questions

How is an organic shape generated from numbers?

Anchor points are spaced evenly around a circle by angle, then each point's radius is randomised inside a min/max band. Those points are joined with a Catmull-Rom spline converted to cubic Bézier segments, which is what makes the outline smooth rather than a jagged polygon.

What does the point count control?

The number of lobes. Fewer points give broad, slow curves — 3 to 5 reads as a classic blob — while more points produce a busier, wobblier edge that starts to approximate the circle it came from. The irregularity range controls depth; the point count controls frequency.

Why does the same seed always give the same blob?

Because the randomness comes from mulberry32, a small deterministic PRNG seeded by that number, rather than from `Math.random`. Same seed, same sequence, same shape — which is what makes a blob shareable in a URL and reproducible when you come back to it.

Why a spline rather than joining the points with lines?

Because a Catmull-Rom spline passes exactly through every anchor point while keeping the tangents continuous, so there are no visible corners. The conversion divides the neighbouring points' difference by three to place each Bézier control point — the standard cardinal-spline construction.

Should I use this as an SVG file or a CSS background?

Inline SVG if you want to animate or restyle it — the path stays addressable. A data URI in `background-image` if it is decoration, since it costs no extra request. Avoid a separate .svg file for a single decorative blob; the round trip costs more than the markup does.

Common errors and gotchas

• Using a highly complex blob where a simpler shape would compress far smaller.
• Placing a decorative shape without `aria-hidden`, so a screen reader announces it.
• Assuming the shape holds its proportions when the container's aspect ratio changes.
• Using a blob as a clip path over content, which then loses pointer events in the clipped area.
• Generating a new random blob on every build, which makes the design non-reproducible.