SVG Blob Generator

Blobs — soft, irregular rounded shapes — are a popular way to frame photos, sit behind headings or decorate landing pages. This generator places points around a circle, pulls each one in by a random amount and joins them with a smooth closed curve, giving an organic SVG shape you can download or paste into HTML. A seed number makes every blob reproducible, and a CSS-only alternative is included for simple uses.

How to use this tool

1. Choose the number of points and the randomness.
2. Set the size and a solid color or a two-color gradient.
3. Change the seed until you like the shape (or leave it empty for a new one each time).
4. Download the SVG, copy the markup, or use the CSS border-radius blob.

Formula

rᵢ = R × (1 − ½ × randomness × uᵢ) at angle −90° + 360° × i ÷ n · segment i: C (Pᵢ + (Pᵢ₊₁ − Pᵢ₋₁)/6) (Pᵢ₊₁ − (Pᵢ₊₂ − Pᵢ)/6) Pᵢ₊₁

R is 45% of the size and uᵢ a seeded random number (mulberry32) between 0 and 1. The Catmull-Rom spline wraps around, so the curve closes smoothly. The CSS version uses border-radius with opposite radii that add up to 100%, so the four edges always meet.

Example

With randomness 0 and 4 points on a 200 px canvas the points sit at (100, 10), (190, 100), (100, 190) and (10, 100), and the spline gives M100,10 C130,10 190,70 190,100 … — a near-circle. With seed 1, 3 points and 100% randomness the radii become 61.8, 89.9 and 66.3 px, and the CSS alternative is border-radius: 79% 21% 22% 78% / 37% 57% 43% 63%.