SVG blob generator
Organic SVG blob shapes with complexity, randomness and seed controls, a solid or gradient fill, React export and a CSS clip-path. Free, no sign up, runs in the browser.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 480" width="480" height="480">
<defs>
<linearGradient id="blob-fill" x1="0" y1="0" x2="1" y2="1" gradientTransform="rotate(0 0.5 0.5)">
<stop offset="0" stop-color="#6D5BFF"/>
<stop offset="1" stop-color="#22D3EE"/>
</linearGradient>
</defs>
<path d="M262.84 43.73 C305.89 42.63 345.28 75.22 377.22 117.39 C409.16 159.57 466.11 246.93 454.51 296.8 C442.91 346.67 361.36 395.21 307.62 416.63 C253.89 438.06 171.19 444.5 132.1 425.35 C93.01 406.2 75.27 351.96 73.07 301.74 C70.87 251.52 87.29 167.03 118.92 124.03 C150.55 81.03 219.79 44.84 262.84 43.73 Z" fill="url(#blob-fill)"/>
</svg>
How to use it
- 1Set complexity for the number of points and randomness for how far they wander.
- 2Press Shuffle until you like the shape, or type a seed to get a specific blob back.
- 3Choose a solid color or a two color gradient and the output size.
- 4Download the SVG, or copy the path, the React component or the clip-path polygon.
How the blob is drawn
The generator places points evenly around a circle, then nudges each one: the angle jitters a little and the radius is pulled inward by a random amount, both scaled by the randomness setting. The points are joined with a closed Catmull-Rom spline, written as one cubic Bezier command per point, which is why the curve is smooth everywhere and never kinks. The random numbers come from a small seeded generator, so the same seed, complexity, randomness and size always produce the same path, on any machine.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 480">
<path d="M240 12.5 C331.1 12.5 ... Z" fill="#6D5BFF"/>
</svg>
SVG, React or clip-path
The SVG file and the React component are the same shape; the component takes SVGProps, so you size and color it from the parent. The clip-path output is different in kind. CSS clip-path: path() does not scale with the element, so the tool samples the curve into a polygon() with percentage vertices instead, which clips images, video or any element at any size. A polygon has straight edges, so raise the vertex count if you can see corners, and remember that clipped elements have no stroke or shadow.
Using blobs well
- Put blobs behind content at low contrast, or use them as image masks. A loud blob next to text competes with it.
- Mark decorative blobs
aria-hidden, as the React output does, so screen readers skip them. - Two blobs with the same complexity have the same number of path commands, so you can animate between them with a path morph. Different point counts cannot morph cleanly.
- The viewBox matches the size you choose, so a 480 blob and a 1200 blob are different files. Pick the size once and scale with CSS.
Frequently asked questions
Can I get the same blob again later?
Yes. Note the seed with the complexity, randomness and size. Enter the same four values and the path is identical.
Why does the clip-path version look jagged?
It is a polygon with straight edges. Increase the vertex count, which makes the value longer but the edge smoother.
Does the gradient fill work in the clip-path output?
The clip-path only cuts the shape. Apply the gradient as the background of the clipped element, which is what the small preview does.