Blob Shape Generator
Generate smooth random SVG blob shapes with adjustable points, randomness and a seed, then copy or download the SVG.
SVG
How it works
A blob is just a closed curve through a handful of points scattered around a circle. This generator drops Points anchors on that circle, nudges each one inwards by a random amount controlled by the Randomness slider, and joins them with a smooth Catmull-Rom spline converted to cubic Bézier curves — the same maths design tools use for organic shapes. Fewer points with high randomness give lumpy, poster-style blobs; more points with low randomness give gentle pebbles. Set randomness to 0 and you get a perfect circle.
Every blob comes from a seed, so the same seed always redraws the exact
same shape — type a word, share it with a teammate, and you both get the identical blob.
The output is a clean, hand-editable <svg> with a single
<path>, ready to paste into HTML, React or Figma; “Copy path data”
gives you just the d attribute if you already have an SVG to drop it into.
Everything is generated by JavaScript in your browser — nothing is uploaded, and the
shapes are yours to use anywhere, including commercially.
Frequently asked questions
How do I make a blob shape in SVG?
Scatter a few points around a circle, move each one in or out by a random amount, then join them with smooth curves. This generator does exactly that: the Points slider sets how many anchors the blob has, the Randomness slider decides how far each anchor drifts from the circle, and the anchors are connected with cubic Bezier curves. The result is a single path inside an svg element that you can copy straight into your HTML, React component or Figma file.
Can I use the generated blob shapes commercially?
Yes. The shapes are generated by maths running in your own browser, not pulled from a stock library, so there is no licence, no attribution and no signup. Use them in client work, products or presentations. Nothing you generate is uploaded or logged — the page never sends your settings or shapes to a server.
What is the difference between an SVG blob and a CSS border-radius blob?
An SVG blob is a real path with as many control points as you like, so it can be genuinely irregular and scales to any size without distortion. A CSS blob fakes the effect with eight border-radius values on a rectangle — lighter and easy to animate, but limited to four rounded corners. Use this tool for expressive background shapes, and the Border Radius Generator when you want a blob-ish CSS box instead.