Soft, amorphous blobs have become a staple of modern landing pages, used as background accents and decorative shapes. This generator rolls reproducible organic blobs as smooth SVG paths, with controls for complexity, irregularity, and a seed so you can always recreate the one you liked.
How it works
Points are spread evenly around a circle, each pulled inward by a random amount, then joined with smooth Bezier curves:
angle_i = 2π × i / N
radius_i = base × (1 − irregularity × rand)
point_i = (cx + radius_i·cos(angle_i), cy + radius_i·sin(angle_i))The randomness comes from a seeded mulberry32 generator, so the same seed always
yields the same blob. Control points for the cubic Beziers are computed from each
point’s neighbours (a Catmull-Rom style smoothing), which keeps the outline
continuous with no sharp corners. The output is a single closed <path> element
inside an SVG with a square viewBox, so you can set a width attribute and the
height scales proportionally.
Controls and what they do
- Points (N). The number of anchor points placed around the circle. Fewer points (3–5) produce chunky, bold blobs with wide, sweeping curves. More points (8–12) make the outline busier with more dents and lobes.
- Irregularity. How far each radius can shrink from the base. At 0, all radii are equal and the result is a perfect circle. At the maximum, some radii shrink dramatically, creating deep concave dips and a visibly irregular shape.
- Seed. The starting value fed to the pseudo-random generator. Two blobs with the same point count, irregularity, and seed are always byte-for-byte identical — useful for keeping a consistent shape across page rebuilds or sharing with a designer.
Design usage tips
| Intent | Suggested settings | Notes |
|---|---|---|
| Soft hero accent | 6–8 points, low irregularity | Reads as organic without distracting |
| Lava-lamp focal shape | 4–5 points, high irregularity | Bold and striking at large sizes |
| Image clip-mask | 5–7 points, medium irregularity | Use as clip-path to crop a photo softly |
| Repeating background pattern | Fix a seed, tile at different scales | Vary colour/opacity per layer |
Drop the copied SVG directly into your HTML. For frameworks like React, paste it
as JSX and rename class to className. To animate the blob, export two shapes
with slightly different seeds and use CSS animation with d path morphing (in
browsers that support it) or a library like GSAP MorphSVG.
Because the generator runs entirely in your browser, nothing is uploaded and you can generate as many blobs as you need without rate limits.