SVG blob generator
Press the button until you like the shape, then copy the SVG or download it. The blob is one smooth closed path, so it scales to any size and can be recoloured in code or any vector editor.
Runs in your browser: nothing you enter is sent anywhere.
How to use it
- Set the complexity: 3–4 points give pebble shapes, 8–12 give wavier ones.
- Set the irregularity: 0 % is a near circle, 100 % is very uneven.
- Choose a colour, or outline only, and press New shape until you like it.
- Copy the code or download blob.svg.
How it works
Points sit at a radius between 80 units and 80 × (1 − 0.6 × irregularity) from the centre of a 200 × 200 canvas, with a little random shift in angle. A Catmull-Rom spline through the points is written as cubic Bézier curves: each control point lies one sixth of the way along the line between the neighbours of its point, which makes the curve pass smoothly through every point and close without a corner.
Example
For four points on a square, (100, 20), (180, 100), (100, 180) and (20, 100), the first curve runs from (100, 20) to (180, 100) with control points (100 + 160 ÷ 6, 20) = (126.7, 20) and (180, 100 − 160 ÷ 6) = (180, 73.3).
Tips
- Layer two or three blobs with different colours and some transparency for hero backgrounds.
- Use the outline version as a decorative frame behind photos.
- To animate between shapes, keep the same complexity so both paths have the same number of points.
Frequently asked questions
How is the shape made?
The tool places points around a circle at evenly spaced angles, moves each one inwards by a random amount, and joins them with a smooth closed curve. Complexity is the number of points; irregularity is how far they may move inwards.
Can I get the same blob again?
Each shape comes from a random seed. Changing complexity, irregularity, colour or size keeps the seed, so the shape changes predictably; only the New shape button picks a new seed. Copy or download the SVG to keep a shape.
How do I use the blob on a website?
Paste the SVG code straight into HTML, save it as a file for an img tag or a CSS background, or take only the d attribute of the path for a clip-path or a mask.
What does the size setting change?
Only the width and height attributes of the SVG. The drawing itself uses a 200 × 200 viewBox, so it stays sharp at any size and you can resize it freely in CSS.