SVG blob generator — organic shapes from a seed number

How to use the SVG blob generator

1. Set Complexity (points) between 3 and 16. Fewer points give a simple pebble; more points give a wavier outline.
2. Set Randomness from 0 (a regular, round shape) to 1 (very irregular).
3. Choose a Size from 100 to 1,000 px. The blob is drawn in a square of that size.
4. Leave Gradient fill ticked and pick Colour and Second colour, or untick it for a solid fill.
5. Change Seed until you like the shape, then copy the code or download blob.svg.

What it does and when to use it

A blob is a soft, rounded shape with no straight edges. Designers put blobs behind a hero image, a team photo or a pricing card to add colour without a hard frame. The output is one <path>, so it stays sharp at any size and can also serve as a mask.

The tool makes one shape per file. For a full background with many overlapping shapes, try the abstract background generator. For a wavy edge across the width of a section, the SVG wave generator fits better. To turn the finished SVG into a PNG for slides or social posts, use SVG to PNG.

How it works

The tool places the chosen number of points evenly around a circle whose radius is 40% of the size, centred in the square. Randomness then moves each point: its angle shifts by a small amount, and its distance from the centre can shrink by up to 55% when Randomness is 1. A Catmull–Rom spline is drawn through the points and converted into cubic Bézier curves, and the path is closed, so there are no corners.

All the “random” values come from a seeded number generator (mulberry32). The same seed and settings always give exactly the same path. Everything runs in your browser; no file is uploaded or fetched.

Worked examples

These outputs come from the tool’s own code.

Default settings. Six points, randomness 0.5, 400 px, seed 1. The file starts with a gradient definition, <linearGradient id="blob-g-…" x1="0" y1="0" x2="1" y2="1">, running from #6366f1 to #ec4899, and the path is filled with url(#blob-g).

Solid green, four points. Gradient off, colour #10b981, 4 points, size 200, seed 42. The result is a 200 × 200 file (viewBox="0 0 200 200") with one path and fill="#10b981".

No randomness. Three points, randomness 0, size 100, gradient off. The points sit exactly on the circle, so the path is a smooth, rounded triangle that starts d="M90,50C90,61.5 40,90.4 30,84.6.

Limits and tips

• Very high randomness with few points can give a thin, bean-like shape. Try a few seeds; small changes in the seed give very different blobs.
• The gradient direction and the shape’s position are fixed. Edit the SVG by hand, or place it with CSS, if you need something else.
• Check text contrast if you put words on top of a coloured blob; the colour contrast checker shows whether it is readable.