SVG Blob Generator, Random Shapes, Free and Private

About the SVG Blob Generator

The SVG Blob Generator draws a smooth, organic shape you can use as a background, a hero image, an avatar frame or a decorative accent. Press Random and a new blob appears at once. Move Complexity to change how many bumps it has, move Contrast to make it rounder or more uneven, and pick a Solid colour or a two-colour Gradient. When you like it, copy the SVG or download it as an SVG or a 1024 by 1024 PNG.

Everything is drawn in your browser. Your settings and the picture never leave your device, nothing is uploaded or stored, and the shape is gone when you close the tab unless you saved the file or noted the seed.

How to use it

The seed makes a shape repeatable

A blob is built from a list of random numbers, and the seed decides that list. The same seed with the same settings always gives exactly the same SVG, character for character, so you can come back tomorrow, type the seed again and get your shape back. Press Random and the tool fills Seed with eight random hexadecimal characters taken from your browser's secure random source. You can edit the seed by hand, and one changed character gives a different blob.

How the shape is built

Points are placed at equal angles around a circle of radius $R = 180$ in a 400 by 400 picture. Each point is then pulled towards the centre by a random amount, and the Contrast setting $c$ (from 0 to 1) scales how far:

$r_i = R\,\bigl(1 - 0.65\,c\,u_i\bigr), \qquad 0 \le u_i < 1$

Here $u_i$ is the seeded random number for point $i$. At contrast 0 every point stays on the circle, and at contrast 100 % no point can go closer than 35 % of $R$, which is 63, so the blob never shrinks to nothing and never leaves the canvas. At 50 % the radii stay between 180 and $180 \times (1 - 0.325) = 121.5$.

How the curve is smoothed

The points are joined by a closed Catmull-Rom spline, written as cubic Bézier curves, one for each pair of neighbouring points. For the curve from $P_1$ to $P_2$, with $P_0$ before it and $P_3$ after it, the two control points are

$C_1 = P_1 + \frac{P_2 - P_0}{6}, \qquad C_2 = P_2 - \frac{P_3 - P_1}{6}$

Worked example with 4 points at contrast 0: $P_0 = (20, 200)$, $P_1 = (200, 20)$, $P_2 = (380, 200)$, $P_3 = (200, 380)$. Then $C_1 = (200 + 60,\ 20) = (260, 20)$ and $C_2 = (380,\ 200 - 60) = (380, 140)$, which gives a round curve through all four points. Because the spline passes through every point and the ends meet, the outline is closed and has no corners.

Using the result

The SVG has a 400 by 400 viewBox and no fixed colours outside the ones you picked, so it scales to any size without getting blurry. Paste it into an HTML file, import it into a design tool, or save it with Download SVG. Download PNG draws the same SVG on a 1024 by 1024 canvas for places that only accept bitmaps. A gradient runs from the top left to the bottom right.

For repeating backgrounds, try the SVG Pattern Generator. To resize or convert the PNG, use the Image Resizer or the Image Converter.

Frequently asked questions