Blob shape generator

How a blob is built

Every blob starts as points spaced evenly around a circle. Each point is then nudged — its angle shifted a little within its own slice of the circle, its radius pulled inward by a random fraction scaled by the randomness slider — and the nudged points are joined with a closed Catmull-Rom spline, written out as cubic Bézier commands. That spline is why the outline is smooth through every point with no corners: each curve segment's control points are derived from the neighbouring points, so adjacent segments always meet at matching tangents. The displacement is inward only, which is why a blob never escapes its 480 × 480 viewBox no matter how hard you push the slider.

The randomness is not random in the usual throwaway sense. It comes from a small seeded generator, and the seed is mixed with the points and randomness settings — so the same seed at the same settings redraws exactly the same shape, character for character. Shuffle just picks a new seed; the current one is printed above the preview, and noting it down is all it takes to reproduce a keeper next week. Everything runs in your browser — the shape is arithmetic performed on your machine, and nothing is generated on or sent to a server.

What the controls actually change

Points (3–14) sets how many anchors sit on the circle before the nudging starts. Few points make broad, calm shapes — three or four give you something close to a pebble or a guitar pick; twelve or more approach a wavy circle. Randomness (0–100) scales how far each point may be pulled toward the centre: at 0 the result is a near circle, at 100 individual points can sit at roughly half the base radius, which is where the silhouette gets genuinely irregular. The two interact — the classic organic blob lives around 6–9 points with randomness near the middle.

Fill paints the path with one flat colour. Ticking Gradient adds a second colour and swaps the flat fill for a diagonal linear gradient — written into the file's <defs> and referenced by the path, so the output stays one self-contained SVG. Shuffle redraws with a new seed at the current settings, and Open in full editor hands the shape to the SVG editor with nodes you can drag individually.

Where blobs earn their place

Decorative section backgrounds, image masks, avatar frames, feature-card accents, empty-state art — the places where a rectangle is too much rectangle and a circle is too obviously a circle. Because the output is a single filled path, it costs a few hundred bytes, recolours by editing one attribute, and scales to a hero background or a 16 px accent without any loss. A blob behind a product screenshot is probably the single most common use: the soft silhouette frames the rectangle of the screenshot without competing with it. Keep the fill low-contrast against the page background when the blob is scenery; give it the accent colour when it is the point.

Using the blob in real HTML and CSS

Pasted inline, the markup works as-is — but for a background shape, delete the width and height attributes and keep the viewBox, so the blob sizes itself to its container instead of insisting on 480 pixels. To sit it behind content, give it position: absolute and a negative z-index, and let overflow: hidden on the section crop it at the edges — a blob bleeding off the corner reads better than one floating whole in space.

To clip a photo into a blob, wrap the path in a <clipPath id="blob"> inside an inline SVG and set clip-path: url(#blob) on the image. And when the shape belongs in a stylesheet rather than the markup, run the file through SVG to Data URI and use it as a background-image — no extra request, no separate asset to deploy.

Animating and morphing

The cheapest motion is a slow CSS rotation or a gentle translate loop — one transform, no path changes, runs on the compositor. Morphing between two blobs is also possible because the outline is plain cubic Bézier path data, but interpolation works command by command: both shapes need the same number of points. Generate the start and end shapes at the same Points setting and change only the seed, then hand the two d strings to CSS @keyframes on the d property or to an animation library. Mismatched point counts are why most first attempts at blob morphing jump instead of flowing.

Common problems

• It looks spiky rather than organic. High randomness with many points makes noise, not blobs. Push one slider down — more points wants less randomness.
• Two blobs on one page, one gradient wrong. The gradient's id is the same in every export, and ids are global to a page — the second blob picks up the first blob's colours. Rename the id and its url(#…) reference in one of them.
• The blob won't fill its container. The exported file carries fixed width and height attributes. Remove them and the viewBox takes over — the viewBox guide explains which attribute wins and why.
• Wrong colour after export. No need to regenerate and lose the shape — the Color Replacer swaps the fill (or either gradient stop) in a file you already have.