SVG Blob Shape Generator

Soft organic blobs are everywhere in modern web design: behind a hero image, around an avatar, as a quiet accent in a card. Drawing one by hand in an editor takes patience, and pasting a single stock blob makes every site look the same. This generator builds a blob from a handful of numbers, shows it immediately and gives you either a complete SVG or only the path data to use in your own markup.

How a blob is built

Imagine a circle with evenly spaced dots on its rim. Each dot is moved towards or away from the centre by a random amount, and a smooth closed curve is drawn through all of them. The curve is a series of cubic Bézier segments whose handles are calculated so that each join is smooth, with no corners. More points mean a lumpier outline, fewer points a simpler egg-like one. Randomness sets how far the dots may move: at zero they stay on the circle, and at 100% a dot may move in as far as half the radius.

A worked example

Press Sample for seven points, 60% randomness, size 400 and fill #ec4899, with the shape number 11. The output is <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"> and one path whose data starts M369.3 200C366.5 247.35 339.15 304.94 304.87 331.51 … and ends with the closing Z. The start point sits at the right of the shape, at height 200, because the first dot is at angle zero. At 0% randomness the same seven points give a regular outline starting M400 200C400 252.12 365.45 323.87 324.7 356.37 …, which looks like a circle but is not an exact one.

Repeatability

The shape number seeds the random generator. The same number with the same other settings always draws the same blob, so you can write it down, store it in a design file or regenerate it later. Press Random blob to try a new number. If you change the point count or randomness, the shape changes too, since the dots move differently; the seed is only one of the inputs.

Using the output

The SVG can be saved as a file or pasted inline. The path data alone is useful in three ways. As the d attribute of a <path> with your own fill, including a gradient defined elsewhere in the SVG. Inside a clipPath to crop a photograph into the blob. As the value of CSS clip-path: path('...'), which clips an element to the shape. Because the coordinates are in viewBox units, scaling the SVG scales the blob without loss.

Edge cases

Curves overshoot between points, so a low-randomness blob can extend a few units beyond the viewBox, as the 6.6 unit overshoot at 400 shows. Very high randomness with many points gives a lumpier, less predictable outline, so generate a few seeds and pick one. A blob used as an avatar mask should be tested with real photos, because the crop is not centred on the face.

Limits

The shape is a closed curve of one colour; there are no holes, strokes or gradient controls in this tool. The same seed gives different shapes on different point counts. Only the final path is exported, not the individual points. Everything is created in your browser.

Related tools

• Border Radius Generator makes blob shapes as pure CSS.
• CSS clip-path Generator clips elements to polygons and circles.
• SVG Wave Generator draws section dividers.
• SVG Bezier Curve Editor lets you edit any path by hand.