🫧 SVG Blob Generator
Generate a random organic "blob" shape as SVG markup — useful as a background decoration. Adjust the complexity and randomness, then click Regenerate for a new shape.
How the shape is built
Vertices are spaced evenly round a circle at the centre of a 200×200 viewBox, each one pushed in or out by a random amount, then joined with quadratic curves:
angle = 2πi / points
radius = 80 + (offset - 0.5) × 2 × (80 × variance%)
x = 100 + radius · cos(angle) y = 100 + radius · sin(angle)
each segment: Q <previous vertex> <midpoint of previous and current>At the 30% default the variance is 80 × 0.30 = 24, so radii land anywhere between 56 and 104. The curve trick is the second line: every vertex becomes a control point and every midpoint becomes an on-curve point. That guarantees the tangent matches on both sides of each midpoint, so the outline is smooth all the way round with no corners to smooth out by hand.
Controls and quirks
- Only Regenerate and Points reroll the shape. Changing variance or colour keeps the same random offsets, so you can dial the bumpiness of one blob you already like.
- Fewer points, rounder blob. Four to six points gives the broad organic shapes used as section backgrounds; twelve or more starts to look like a gear.
- Past about 25% variance a vertex can sit beyond the viewBox. At the 60% maximum radii reach 128 against a half-width of 100, and the SVG viewport clips whatever crosses the edge.
Z, which draws a straight
line from the final midpoint back to the starting vertex. On an eight-point blob
that chord is about 30 units long, so there is one visible corner where the
outline closes. Rotating the shape with a CSS transform to hide that seam behind
another element is the quick fix; editing the final Q so it ends on
the starting point is the proper one.Frequently asked questions
How do I use an SVG blob as a background?
Paste the markup inline and position it absolutely behind your content with a negative z-index, or set width and height on the svg and let the viewBox scale it. Add aria-hidden="true" since it carries no meaning.
Why are the curves in the path Q and not C?
Q is a quadratic curve with one control point, which is all you need when the control point is a vertex and the endpoints are midpoints. C, with two control points, would let you shape each side independently but takes more maths to keep the joins smooth.
Can I animate an SVG blob?
Yes, by animating the d attribute between two paths that have the same number and type of commands. Generate two blobs with the same point count and transition between them, or apply a slow rotate transform for a cheaper effect.