Design / SVG

SVG Blob Generator (Random Organic Shapes)

Make smooth, random blob shapes for backgrounds and illustrations: choose how many points and how random, pick a colour or a two-colour gradient, and download or copy the SVG.

SVG Blob Generator (Random Organic Shapes): Points are spaced evenly around a circle and each is pulled towards the centre by a random amount, then joined by a smooth closed curve. Few points and high randomness make lumpy shapes; many points and low randomness make gentle, nearly round ones. Runs 100% locally in your browser with zero server file uploads.

Category
Developer tools
Runs
In your browser
Cost
Free · no sign-up
Availability
Ready to use
SVG blob generatorLocal processing

Runs entirely in your browser

SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" width="400" height="400"><path d="M359.5,200 C360.7,243.5 315.4,319 278.8,336.4 C242.1,353.9 174.7,327.5 139.5,304.7 C104.4,282 69.5,237.5 68,200 C66.4,162.5 96.4,100.3 130.4,79.5 C164.4,58.7 233.7,55.4 271.9,75.5 C310.1,95.6 358.4,156.5 359.5,200 Z" fill="#63c42d"/></svg>

Points are placed evenly around a circle, each pulled in towards the centre by a random amount, and joined by a smooth closed curve. Fewer points and more randomness give lumpier shapes; 0% randomness gives a circle. Blobs make soft backgrounds behind photos, icons, and headings.

Uses

Blobs make soft backgrounds behind product photos, icons, avatars, and headings. Behind text, use a pale colour or a low-opacity fill so the text keeps its contrast; to see the blob behind frosted glass, combine it with the glassmorphism generator.

Editing

The output is one path with cubic Bézier curves, so it opens in any vector editor. To change a few points by hand, paste it into the SVG editor.

How to use it

  1. Choose the number of points and the randomness.
  2. Pick a colour or a gradient.
  3. Click for new blobs until you like one, then download or copy the SVG.

Privacy & limitations

Shapes are drawn in your browser.

Related tools

SVG waveSVG EditorGlassmorphism

Frequently asked questions

How do I put a photo inside a blob?

Copy the path and use it in an SVG clipPath, or save the blob and use it as a CSS mask-image over the photo.

Can I animate a blob?

Yes: generate two blobs with the same number of points and animate the path's d attribute between them; matching point counts make the morph smooth.

Is there a size limit?

The SVG is 400 × 400 but scales to any size without losing sharpness.

Free tool · runs in your browser · no account required