SVG Blob Generator

Blobs — soft, irregular, organic shapes — are everywhere in modern web design: behind a hero image, under a pricing card, as a mask for a photo, as the mark in a logo. This generator builds one as clean SVG you can paste straight into your markup, plus the CSS clip-path version for clipping a real element to the same outline.

Everything runs in your browser — nothing is uploaded anywhere.

How to use it

1. Type a seed. The seed is what makes the shape. Change it to get a completely different blob; keep it to get the same blob back tomorrow, on another machine, or from a shared link.
2. Set the edge count and growth. Edge count is how many anchor points the outline passes through — more edges means a busier, more lobed shape. Growth is the smallest radius any of those points is allowed to take; turn it up for a rounder, calmer blob, down for a spiky, dramatic one.
3. Choose a fill. Solid, a two-color gradient with an adjustable angle, or an outline at a width you set.
4. Copy the SVG, download it as a .svg file, or take the CSS clip-path rule instead — the HTML snippet next to it shows the markup the rule expects.

Why a seed instead of a "shuffle" button

Most blob generators shuffle with a random number that is gone the second you reload the page. If you find a shape you like and lose it, there is no way back. Here the seed is the shape: the same seed always rebuilds the same blob, so a blob can be recorded in a design file, committed to a repo, shared with a teammate as a link, or requested from the API and returned identically every time. Typing a new seed gives you exactly what a shuffle button would.

Settings

• Seed — any text. Same seed, same blob.
• Edge count — 3 to 20 anchor points around the shape.
• Growth — 1 to 9. The minimum radius as a tenth of the blob's size; 9 is nearly a circle, 1 is wildly irregular.
• Size — the SVG's viewBox and intrinsic size in pixels. SVG is resolution-independent, so this only sets the coordinate system — the shape stays crisp at any display size.
• Fill type — solid color, two-stop gradient (with angle), or outline (with width).
• Background — transparent by default, or a solid color rectangle behind the blob.

SVG or CSS clip-path — which should I use?

Use the SVG when the blob is the thing you want on the page: a decorative background shape, a colored splodge behind a section, an icon. Use the CSS clip-path when you have an existing element — a photo, a card, a video — and want it cut into the blob's outline. The CSS rule sets an explicit width and height matching the size you generated, because path() coordinates are absolute; change those and the clip stays the same size as the element grows.

A clipped element can't carry a stroke, so the CSS output always fills, even when the SVG is set to outline.

Can I animate a blob?

Yes, and morphing between two blobs is the usual trick: generate two shapes with the same edge count and different seeds, then transition the d attribute (with SMIL or a library) or the clip-path between them. Matching edge counts matter — two paths only interpolate cleanly when they have the same number of curve segments.

Why does the shape sit slightly off-centre?

Because the radii vary. A blob whose points all sat at the same distance from the middle would be a circle; the asymmetry is what makes it look organic. Turn Growth up if you want it closer to centred.

Related tools

For a wave-shaped section divider rather than a closed shape, use the SVG Wave Generator. To shrink the SVG this tool produces before shipping it, run it through the SVG Optimizer, and to turn it into a raster image, use the SVG to PNG Converter.