What Is the Blob Generator?
The Blob Generator creates organic, irregular shapes using SVG. Adjust complexity, contrast, and size to generate unique blob shapes for backgrounds, decorative elements, and hero sections.
Why Use This Tool?
Organic shapes soften rigid grid-based layouts and add visual interest. Hand-drawing SVG blobs is tedious and inconsistent. This generator produces smooth, randomized shapes that you can customize and export as SVG code instantly.
How to Use This Blob Generator
- Adjust complexity — The slider (4 to 16) sets how many points define the outline. More points make a more wobbly, irregular edge.
- Randomize the shape — Click Randomize Shape to pick a new random seed, or type one in the Seed field. Note the seed of a shape you like to get it back later.
- Choose the fill — Pick a solid colour or turn on a two-colour diagonal gradient, and set the opacity.
- Copy the SVG — Copy the complete SVG markup and paste it inline or save it as an .svg file. To use the shape as a mask, put its path in a clipPath or use it as a CSS mask image.
How the shape is built, and what that means for using it
We read the generator's code and ran it over 600 shapes (seeds 1–200 at complexity 5, 8 and 12, size 400) on October 12, 2026, measuring each path's bounding box with svgpathtools. Here is the process:
- Points on a circle. Complexity (4 to 16) sets how many points are placed at equal angles around the centre.
- Seeded radius jitter. Each point's distance from the centre is 35% of the size, plus or minus up to 40% of that, so 21% to 49% of the size. The jitter comes from the seed, not from
Math.random(), so the same complexity, seed and size always give exactly the same blob. The seed is shown in the Seed field under Randomize Shape, so note it, or type it back in later, to get the identical shape. - Smooth closed curve. Neighbouring points are joined with cubic Bézier segments whose control points follow the line through the previous and next points (a Catmull-Rom-style spline). The result is one
M, then oneCper point, thenZ.
| Complexity | Path data length | Bounding box across 200 seeds (400 px canvas) | Shapes poking outside the canvas |
|---|---|---|---|
| 5 | 203–214 characters | 6.7 to 396.4 px | 0 of 200 |
| 8 (default) | 318–331 characters | 2.7 to 398.3 px | 0 of 200 |
| 12 | 473–487 characters | −2.6 to 398.0 px | 1 of 200 (by 2.6 px) |
So the whole SVG is well under 1 KB at any setting. A blob can reach within a few pixels of the canvas edge, though, because the curves bulge slightly past their points. If you place it flush against a container edge, or use it as a mask, leave a little padding or add overflow="visible" to the <svg> so a rare edge isn't clipped.
Morphing between two blobs
Two blobs with the same complexity have identical command structures (same number of C segments), and that's what browsers need to animate between them. In CSS you can transition the d property from one path() to another. MDN's compatibility data lists that in Chrome 52, Edge 79 and Firefox 97, but not in Safari. For Safari, animate with SMIL <animate attributeName="d"> or a JavaScript library. Blobs with different complexities can't be interpolated directly. The animation jumps instead of morphing.
Sources
Checked on .
Frequently Asked Questions
Built by Derek Giordano · Part of Ultimate Design Tools