Skip to content
I Hate Online Tools

SVG blob generator

Generate random organic blob shapes and export SVG.

Runs in this tab. The file stays here.

Preview
CSS
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" width="400" height="400">
  <path d="M391.19,200 C394.09,245.28 353.52,326.54 317.04,346.76 C280.56,366.99 213.38,335.43 172.3,321.36 C131.22,307.28 89.35,293.85 70.55,262.34 C51.74,230.84 43.99,169.37 59.49,132.33 C74.98,95.3 123.49,49.68 163.51,40.14 C203.53,30.6 261.67,48.44 299.62,75.08 C337.56,101.73 388.29,154.72 391.19,200 Z" fill="#0ea5e9"/>
</svg>

This runs in your browser. Nothing is uploaded.

About SVG blob generator

Generate smooth, organic blob shapes from a seed, set the number of points and how lumpy they are, then copy or download the SVG.

Blobs turn up as soft backgrounds behind a hero section, as avatar masks, or as a bit of decoration in an empty state. This page draws one as a single closed SVG path on a 400 by 400 canvas. Points sets how many anchor points sit around the shape (3 to 14), Randomness sets how far they can pull inward from the outer circle (0 gives a perfect circle, 100 is very lumpy), and a colour box sets the fill. The Randomize button draws a new random seed.

Shapes come from a seeded random number generator, so the same seed, point count, and randomness always produce the same path. The current seed is printed under the controls. Note it down if you want to find a shape again, as there is no seed box to type one into, and a refresh starts from the default seed. The curves go through the points using smoothed Bezier segments, so the result is always rounded, never spiky.

Download SVG saves the file as blob-<seed>.svg, and the code panel shows the same markup to copy: an svg element with a viewBox and one path. It's very small and scales without loss. Run it through the SVG optimizer if you want to trim it further. This is a single flat-colour shape; there are no gradients, strokes, or animation.

How to use SVG blob generator

  1. 1Set Points and Randomness.
  2. 2Click Randomize until you get a shape you like, and note the seed.
  3. 3Pick a fill colour.
  4. 4Copy the SVG or download it.

What it won't do

  • One flat-colour path on a 400 by 400 viewBox; no gradients or strokes.
  • 3 to 14 points; seed can be re-rolled but not typed in.
  • SVG output only.

Common questions

Can I get the same blob again?

Yes, with the same seed, point count, and randomness. The seed is shown under the controls, but you can't type one in, so keep the downloaded file or the copied SVG as your record.

Can I use the SVG commercially?

Yes. The shapes come from random numbers and aren't anyone's artwork, so there's nothing to credit.

Why is my blob almost a circle?

Randomness is low. Raise it, or lower the number of points; with many points and little randomness the outline averages out toward a circle.

Related tools

Why this one doesn't upload your file

There is no server to upload to. This page is a static file, and the work happens in your browser using the same graphics and WebAssembly code that renders every other site you visit. Your file is read from disk into memory, processed, and handed back as a download. Once the page has loaded you can disconnect from the network entirely and it keeps working. The longer explanation

Install the app