Blob Generator

Organic SVG blobs in seconds

Blobs are the soft, irregular shapes you see behind hero sections, profile photos, illustrations and app onboarding screens. They break up rigid grids of rectangles and give a layout a friendly, hand-made feel. This blob generator creates them as clean SVG paths: choose a few parameters, watch the shape update, and copy the code straight into your project.

Because a blob is just one SVG path, it is tiny, scales without losing quality and can be recolored with CSS or animated by morphing between two paths with the same number of points.

How the shape is built

The generator places a chosen number of anchor points around a circle. Randomness pulls each point inward by a different random amount, while size scales the whole outline inside the canvas. The anchors are then connected with a closed Catmull-Rom spline that is converted to cubic Bézier curves, which guarantees smooth joins with no visible corners. With three or four points you get simple pebble shapes, while ten or more points with high randomness produce wobbly, cloud-like forms. At 0% randomness the result is a regular shape rounded into a perfect circle.

Colors, outlines and reuse

Fill the blob with a single color or a diagonal two-color gradient, and add an outline from 1 to 16 pixels when you need a sticker or badge look. Every blob comes from a numeric seed: the same seed and settings always produce the same shape, so you can save the seed, tweak a value later and keep everything else identical. Download an SVG for the web or an 800 by 800 pixel PNG with a transparent background for slides and design tools. All processing happens locally in your browser and nothing is uploaded.