SVG blob generator

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" width="400" height="400">
  <path d="M221.55 8.12C271.66 11.39 328.1 89.46 350.47 135.02C372.84 180.58 379.79 238.67 355.78 281.49C331.77 324.31 257.45 389.83 206.42 391.94C155.39 394.05 75.71 340.23 49.61 294.15C23.51 248.06 21.18 163.09 49.84 115.42C78.49 67.75 171.45 4.86 221.55 8.12Z" fill="#6366f1"/>
</svg>

How the blob is made

• Points round a circle. The blob starts as evenly spaced points on a circle, starting at the top. More points give more bumps.
• Randomness pulls them in. Each point moves toward the centre by a random amount — at 100% by up to 70% of the radius — and drifts round the circle by up to 40% of the gap to its neighbour. At 0% you get a smooth rounded polygon.
• A smooth curve joins them. The points are joined by a closed Catmull-Rom spline, written into the SVG as one cubic Bézier curve (C) per side, so the outline has no corners: at every point the curve leaves in the exact direction it arrived.
• It fills the canvas. The curve's exact bounding box is worked out and the shape is scaled and centred so it touches the edges of the canvas, less a 2% margin (plus half the line width for an outline).
• The seed makes it repeatable. The random numbers come from the seed, so the same seed and settings always give the same blob, byte for byte. Note the seed to come back to a shape; New random blob picks a new one.

Using the blob

SVG — paste it into your HTML, or download the file and use it in Figma, Illustrator or an <img>. It scales without losing sharpness; remove the width and height attributes to let CSS size it. CSS background — the same SVG inlined as a data URI on a .blob element, no file to host. CSS mask — put it on an image or any element to cut that element to the blob shape, for example <img class="blob" src="photo.jpg">; it scales with the element. A mask only uses the shape, so its colour does not matter. Pair it with a glass card or cut a hard-edged shape with the clip-path generator.

How we test it

122 different blobs are drawn in Chrome 154. For each one the SVG exactly as you copy it must parse, its shape must stay inside the canvas, be centred and touch the margin on its longer side, and it must be smooth at every point. Then the CSS background and the CSS mask are pasted into a page as they are and photographed: 61,464 pixels must be inside the blob exactly where Chrome's own geometry says the shape is, in the colour you chose, with gradients running in the direction you set. The same settings must give the same SVG twice. Deliberately broken versions of the generator — an unencoded # in the data URI, a lopsided curve, a curve with a kink, no scaling, a reversed gradient, an unseeded random number — must each be caught.

Questions

Can I use the blobs in commercial work?

Yes. The shapes are generated in your browser from numbers you choose; there is nothing to credit and no licence attached.

How do I make the blob responsive?

Delete width and height from the <svg> tag and give it a CSS width — the viewBox keeps it square. The CSS mask and background versions already use contain, so they scale to the element.

Why does the same seed look different after I change the points?

The seed fixes the sequence of random numbers, and each point takes the next two. With a different number of points the numbers land on different points, so the shape changes. Keep the points and randomness the same to get the same blob back.

Can I animate a blob?

Two blobs with the same number of points have the same path structure, so you can morph between them by animating the path's d with JavaScript or SMIL. This page only makes static shapes.