Adjust the controls to generate an organic blob and copy the SVG — it renders locally in your browser, with nothing uploaded.
How it works
- Points are placed around a circle with randomized radius, then connected with smooth quadratic curves.
- Higher "irregularity" makes a spikier, more organic shape; lower keeps it closer to a circle.
- Gradient fills use an embedded SVG
<linearGradient>— fully supported when pasted into any modern browser or design tool. - The variations grid shows 6 alternate blobs using your current settings — click any one to make it the main result.
Generate smooth, organic SVG blob shapes with adjustable complexity and randomness. Great for backgrounds, avatars and decorative sections. Copy the SVG or download it.
Frequently asked questions
What is an SVG blob?
It's an organic, rounded shape defined by a smooth path — popular in modern web design for soft backgrounds and accents. Because it's SVG, it scales to any size without blurring.
Can I control the shape?
Yes — adjust the number of points (complexity) and the randomness to go from a gentle rounded shape to a more irregular, playful one. Regenerate for a fresh variation.
How do I use the blob on my site?
Copy the SVG markup into your HTML, or download the file and reference it in an <img> or as a CSS background. You can recolour it by editing the fill value.
Is it responsive?
SVG is vector-based, so the blob stays crisp at any resolution and adapts to its container when you set width/height to percentages.
SVG made graphics part of the Web's document model
SVG 1.0 became a W3C Recommendation in 2001. Unlike a fixed pixel bitmap, SVG describes shapes and paths mathematically in XML.
Why vectors scale cleanly
A vector curve is recalculated for the requested display size rather than enlarging a fixed grid of pixels. That is why an SVG shape can remain sharp across very different sizes.