What you get
A single organic blob, drawn as one clean SVG path. No raster image, no external library, no <filter> soup. Just a <path> with a fill color, sitting in a 200x200 viewBox that scales to whatever size you drop it into.
These rounded, lopsided shapes have been everywhere for a few years now. Hero backgrounds. Section dividers. Squishy frames around avatars. The kind of thing you’d normally grab from a paid asset pack or fiddle with in a vector editor for ten minutes. Here you just drag two sliders and mash Regenerate.
How the shape gets made
Here’s what’s going on under the hood. The generator drops a handful of points evenly around an invisible circle. Then it pulls each point inward by a random amount, so the ring goes from perfectly round to gently dented to genuinely weird. Those scattered points get stitched together with a smooth closed curve (Catmull-Rom converted to cubic beziers), which is why the edge flows instead of looking like a cut gemstone.
Two knobs control the whole thing:
- Complexity sets how many points sit around the circle, from 4 to 10. Fewer points means a chunkier, simpler blob. More points means tighter, busier wobbles.
- Randomness decides how hard each point gets yanked inward. At 0% you get a circle. At 100% the shape can collapse into something spiky and dramatic.
The fill color picker writes straight into the path, so the SVG you copy already has your hex baked in.
Where these actually show up
Drop one behind a landing-page headline at low opacity and it softens the whole section without stealing focus. Stack two or three in different brand colors, blur them with CSS, and you’ve got that gradient-mesh look people pay for.
Avatar frames are another easy win. Clip a profile photo to a blob instead of a boring circle and the card instantly feels less stock-template. Same trick works for feature icons, testimonial portraits, and 404-page art.
Because it’s a real path and not a clipped rectangle, you can animate it. Morph between two blobs on hover, spin it slowly, or pulse the scale. SVG paths take CSS transforms and SMIL just fine.
A couple of practical notes
The output is deliberately tiny, usually well under a kilobyte, so inlining it in your HTML costs basically nothing and skips an extra network request. Paste it directly into JSX, a Vue template, or an Astro component without escaping headaches.
Want a matching set? Keep your complexity and randomness fixed, then hit Regenerate a few times and save the ones you like. You’ll get shapes that feel like siblings rather than random strangers, which matters when several appear on the same page.
One thing to watch: at very high randomness with only 4 or 5 points, the curve can occasionally pinch or overlap itself. Nudge complexity up by one, or just regenerate.
Questions people ask
Can I edit the blob after I download it?
Yep. It’s plain SVG, so it opens in Figma, Illustrator, Inkscape, or any code editor. The single <path> is right there to recolor, scale, or reshape by hand.
How do I change the color later without regenerating?
Swap the fill value in the SVG, or strip it out and control the color from CSS instead. Setting fill: currentColor on the path is handy when you want the blob to inherit text color from its container.
Will these stay crisp on retina screens?
They will. SVG is vector math, so a blob looks razor-sharp at any size, from a 24px icon to a full-bleed background, with zero pixelation.
Why use SVG instead of a PNG blob?
Smaller files, infinite scaling, editable colors, and you can animate the path. A PNG locks you into one size and one color and balloons in file size the bigger you go.
Is there a way to get the exact same blob twice?
Regenerate uses fresh randomness each press, so shapes don’t repeat on their own. If you find one you love, copy or download it right then. The markup is the permanent record of that exact shape.