Blob Generator

How to use it

1. Set the vertices count. Three or four read as soft triangles and rounded squares; eight or more drift toward circles.
2. Drag randomness to push each vertex off its ideal ellipse. At 0 the shape is a plain ellipse, at high values it turns lumpy.
3. Drag smoothness to change how the curve is interpolated. Low values keep corners visible, high values pull the outline into one continuous sweep.
4. Type any seed text. The same seed always regenerates the same blob, so you can tune a single slider and keep the silhouette.
5. Pick the output format, adjust the width, height and colors, then copy the code. The SVG path uses a closed Catmull-Rom curve converted to cubic beziers.

Common use cases

• Hero section backdrops - a blob behind a headline adds depth without an image asset.
• Illustration accents - drop the SVG path into diagrams and empty states.
• Avatar and card masks - the border-radius version shapes a plain div with no extra markup.
• Logo and badge exploration - iterate on silhouettes quickly before committing to a vector file.

Why it stays private

The shape is computed by a seeded random generator inside the page. There is no gallery, no upload and no server call: the code you copy is the code the preview drew.

FAQ

Q: What does the seed actually do? A: It feeds a small deterministic random function. Every vertex offset and every border-radius percentage comes from it, so identical seeds give identical blobs on any machine and any day.

Q: Why do the SVG path and the border-radius version look different? A: They are two independent interpretations of the same parameters. The path is a free-form outline, while eight border-radius percentages only bend the corners of a rectangle. Use whichever matches the element you are styling.

Q: How do I animate a blob? A: The output is static. For a morphing effect, generate two or three blobs with nearby seeds, then interpolate between their path data with a SMIL or JavaScript animation, or use a CSS transition on the border-radius values.

Q: Can I use the SVG in a design tool? A: Yes. The snippet is a standalone inline SVG with a viewBox, so it pastes directly into Figma, Illustrator or an HTML file and scales to any size.