SVG Blob Generator

About the Blob Generator

Points are scattered at random distances around a circle, then stitched together with a Catmull-Rom curve, which is what gives each blob its smooth, organic edge instead of a jagged one. Hero backgrounds, avatar frames, and decorative shapes are all common uses, and the output is a plain SVG path with nothing else attached.

How scattered random points become one smooth curve

Getting from a handful of randomly-placed points to a smooth organic outline is genuine curve math, not just connecting dots with straight lines. This tool converts each segment between two neighboring points into a cubic Bezier curve using the Catmull-Rom formula: for the segment between point p1 and point p2, the two Bezier control points are calculated from the points immediately before and after them, p0 and p3, as p1 + (p2 − p0)/6 and p2 − (p3 − p1)/6. That division by 6 is the standard tension constant for converting a uniform Catmull-Rom spline into SVG's native cubic Bezier syntax, it's what makes the curve pass smoothly through every one of the randomly-placed points rather than around them, with no sharp corners or manually-placed handles required.

Why the shape always closes into a seamless loop

Every point lookup in the curve-building loop wraps around using modulo arithmetic, (i - 1 + n) % n and (i + 1) % n, so the point after the last one in the list is treated as the first point again. That wraparound is what guarantees the blob's outline is a genuinely closed shape with no visible seam or kink where the path starts and ends, the final curve segment smoothly connects back into the first one using the same Catmull-Rom math as every other segment in the shape.

An honest note: Randomize replaces the shape entirely, it doesn't nudge it

Dragging either the Complexity or Irregularity slider doesn't smoothly deform your current blob, it throws the existing point set away and generates an entirely new random one from scratch using Math.random(). That means small slider adjustments can occasionally produce a visually quite different blob rather than a gentle variation of what you were just looking at. If you find a shape you like at one irregularity setting, know that changing complexity or irregularity afterward won't preserve its specific silhouette, only the randomize button re-rolls within your current slider settings, and even that produces a brand-new random shape each time rather than a variation of the last one.

A real limitation: high irregularity can clip against the SVG canvas

Each point's distance from center is calculated as 70 × (1 + random × irregularity), where the random factor ranges from -1 to 1. At the maximum Irregularity setting of 60%, an unlucky roll can push a point's radius as far as 112 units from the center, but the blob is centered at (100, 100) inside a 200×200 viewBox, meaning the canvas only has 100 units of room in any direction before its own edge. A radius of 112 exceeds that available space, so at high irregularity settings, especially combined with a low point count, it's possible for part of the blob's outline to extend past the visible canvas and get clipped. If you notice a flattened or cut-off edge on a generated blob, try a lower irregularity value or click Randomize again for a shape whose random points happen to land within bounds.

What the Complexity slider is actually controlling

Complexity sets how many points get scattered around the circle before the curve-fitting math runs, from as few as 4 up to 14. Fewer points produce a bolder, more rounded blob with broad, sweeping curves, since there's more distance (and therefore more curve) between each anchor point. More points allow finer, more intricate wobbles and lobes in the outline, since each point only needs to influence a shorter stretch of the boundary. Neither setting is inherently better, a hero-section background often looks best with a low point count for a calm, soft silhouette, while a busier decorative accent might call for more points and a bumpier edge.