SVG Blob Generator

Generate random organic blob shapes as SVG for backgrounds and decoration, with control over complexity and randomness.

If your blob still looks like a circle, add points — not randomness

The usual complaint about a blob generator is that turning randomness all the way up still produces something like a slightly squashed circle. The randomness slider is not the problem. The point count is, and the effect is sharper than it looks.

Testing whether a generated shape has a dent anywhere — whether it is concave rather than convex — across both settings, as a percentage of shapes with at least one dent:

Points0.10.250.50.751
3 0%0%0%0%0%
4 0%0%0%0%0%
5 0%0%0%1%24%
6 0%0%6%51%80%
8 0%18%88%98%99%
12 37%99%100%100%100%
16 99%100%100%100%100%

Three and four points never dent. Not rarely — never: twenty thousand shapes at maximum randomness produced not a single concave one. With points spaced evenly by angle and only their distance from the centre varying, three or four of them cannot describe a concave outline, so the curve through them stays convex whatever the radii are.

Five points can, but only at the very top of the range. Eight is where randomness starts behaving like a control rather than a suggestion — 88% at the halfway setting. Twelve dents 37% of the time even at the lowest.

The two sliders do genuinely different jobs

That table is really a statement about which shapes are reachable. The point count decides the space of possible outlines; randomness decides how far into that space you travel. Turning randomness up with too few points does not give you an interesting blob, because every shape within reach is convex — it gives you a lopsided circle, which is exactly what people describe.

So the practical rule is short. If you want an organic shape with lobes and inlets, start at eight points and use randomness to taste. If you want a soft rounded pebble, four or five points is the right choice and randomness genuinely is the only control you need — there is nothing else it can do at that count, which is a feature rather than a limitation.

One thing the numbers also rule out, which is worth saying because it is the natural worry: the curve does not tie itself in knots at high randomness. Testing for self-intersection across the same grid found none at any point count or setting — the shape stays a simple closed curve throughout. Whatever comes out is always a valid outline; the only question is whether it is an interesting one.

How to use

  1. Adjust the complexity and the irregularity sliders.
  2. Regenerate until a shape appears that suits the layout.
  3. Copy the SVG markup or just the path data.
  4. Hide it from assistive technology if it is decorative.
  5. Use it as a background rather than as content.

Frequently asked questions

How are blob shapes generated?

By placing a set of points around a circle at randomised distances and joining them with smooth Bezier curves. Complexity controls how many points there are, and irregularity controls how far each may wander from the circle — together they produce the organic quality.

Why use SVG rather than an image file?

Because it scales to any size without blurring, the file is tiny, and the colour can be changed with CSS rather than by re-exporting from a design tool. For a flat decorative shape, SVG is smaller and considerably more flexible than any raster format.

Are these accessible?

As pure decoration they should be hidden from assistive technology, which means an aria-hidden attribute on the SVG. A meaningless shape announced as an image is noise for anyone navigating the page by screen reader, and it is a single attribute to prevent.

Do blobs date a design?

They are strongly associated with a particular late-2010s aesthetic, and using them heavily marks a design to that period fairly precisely. That is not a reason to avoid them so much as a reason to use them deliberately rather than by default.

Can I animate them?

Yes, by interpolating between two path definitions that share the same number of points — morphing between blobs is a common effect. The paths must have matching structure for the interpolation to work, which is why generated sets animate more easily than hand-drawn ones.

Does anything get uploaded?

No. The shape is generated entirely in your browser and copied straight out, with nothing transmitted.

How do I keep the file size small?

Reduce the number of points and round the coordinates. Generated path data often carries far more decimal places than any display needs, and trimming them to one or two decimals shrinks the markup noticeably with no visible change.

🔒 This tool runs entirely in your browser. Nothing you enter is uploaded, logged, or stored.