99tools

SVG Blob Generator

runs in your browser

Make smooth, organic SVG blob shapes from a seed: set the points, randomness and smoothness, fill, grade or outline it, and copy SVG, path data or a clip-path.

Preview

400 × 400

The dashed square is the canvas. The shape is centred and scaled by its exact outline to fill it, less a 5% margin on each side.

Shape

%

%

px

Fill

SVG

386 bytes
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" width="400" height="400" aria-hidden="true">
  <path d="M203.69 20C258.99 20.01 347.65 65.16 369.56 108.52C391.46 151.89 362.75 234.93 335.11 280.17C307.46 325.4 251.33 377.7 203.69 379.92C156.04 382.14 76.89 338.7 49.23 293.47C21.57 248.23 12 154.06 37.74 108.48C63.48 62.9 148.38 19.99 203.69 20Z" fill="#0f6b45"/>
</svg>

Path data

M203.69 20C258.99 20.01 347.65 65.16 369.56 108.52C391.46 151.89 362.75 234.93 335.11 280.17C307.46 325.4 251.33 377.7 203.69 379.92C156.04 382.14 76.89 338.7 49.23 293.47C21.57 248.23 12 154.06 37.74 108.48C63.48 62.9 148.38 19.99 203.69 20Z

The d attribute on its own, for a path you place in an SVG of your own.

CSS clip-path

clip-path: path('M203.69 20C258.99 20.01 347.65 65.16 369.56 108.52C391.46 151.89 362.75 234.93 335.11 280.17C307.46 325.4 251.33 377.7 203.69 379.92C156.04 382.14 76.89 338.7 49.23 293.47C21.57 248.23 12 154.06 37.74 108.48C63.48 62.9 148.38 19.99 203.69 20Z');

path() coordinates are pixels from the element's top left, so this fits an element 400px square.

about this tool

A blob from a seed

A blob here starts as a handful of points spaced evenly round a circle, the first straight up. Each point is pulled in towards the centre by a random share of the radius: none at 0% randomness, where the points sit on the circle, and up to 60% at 100%. The pulls come from a seeded generator, so the seed is the recipe. The same seed and settings give the same shape every time, on any device, and New blob simply picks a new seed. Accents typed as one character or as a letter plus a mark count as the same seed.

The pulls are drawn in order, one per point. Moving the randomness slider scales the same pulls, so the shape grows lumpier or calmer without turning into a different one. Adding a point keeps how far each earlier point is pulled in, but every point moves round to the new even spacing, so the shape does change.

Smooth all the way round

A closed Catmull-Rom spline runs through every point. Between two points, the curve leaves each one heading parallel to the line joining its neighbours, which is what makes the joins seamless. Each span is written as a single cubic Bézier, each control point set off from its point by a sixth of the step between that point's neighbours; at 100% smoothness that is exactly the uniform Catmull-Rom spline, and the tests check it against the spline's own matrix form. Lower smoothness shortens the control arms, and at 0% they vanish and the points are joined by straight line segments.

Every point sits at its own angle and the curve turns the same way round the centre all the way, so it does not loop back or cross itself; the tests check this over a wide range of point counts, settings and seeds.

Fitted by its real outline

A smooth curve bulges past its points, so fitting the points alone would clip the shape. The tool works out the exact bounding box of the curve from where each Bézier turns, centres the shape on the canvas and scales it so its longer side fills the canvas less a 5% margin on each side. For an outline, half the stroke lies outside the path, so the SVG's path is drawn that much further in; the path data and clip-path, which carry no stroke, keep the full size. A stroke over a quarter of the shape's width is flagged, since it reads as a filled spot rather than an outline.

Fill, gradient or outline

A solid fill, a diagonal linear gradient between two colours, or an outline with rounded joins. Colours take hex, colour names and the CSS colour functions (rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch() and color()), and are written as six-digit hex, with transparency as a separate fill-opacity, stop-opacity or stroke-opacity, because that is what every SVG reader understands. A colour outside sRGB is mapped into it, keeping close to its lightness and hue, and the tool says so. A clear gradient stop takes the other stop's colour, so the fade does not pass through black. currentColor passes through for an inline SVG that should match the text around it; opened as a file or used as an image, it draws black. The colour picker holds opaque sRGB only, so choosing there drops any transparency.

The gradient's id is a hash of the shape and its colours, so two different blobs can sit inline on one page without one borrowing the other's gradient.

Three ways out

The SVG file is a square canvas at the size you set, marked aria-hidden since a blob is decoration; copy it or download it, and turn it into a PNG with the SVG to image converter. The path data alone drops into an SVG of your own. The CSS clip-path: path() cuts any element to the shape; its coordinates are pixels from the element's top-left corner, so give the element the canvas size.

Limits

Points run from 3 to 16 and the canvas from 32 to 1024 pixels. Coordinates are rounded to two decimals, so two browsers can very rarely write a last digit differently while drawing the same shape. The file name is made from the seed's letters and digits, in any script. The shape is always a single closed curve round a centre, so rings, holes and sharp spikes are out of reach; the edges are smooth or straight, never both. Nothing is stored or sent anywhere.

questions

How is the blob shape made?
Points are placed at even angles around a circle, and each is pulled in towards the centre by a random share of the radius, up to 60% at full randomness. A closed Catmull-Rom spline runs through every point, written as one cubic Bézier per point, so the curve is smooth all the way round and passes exactly through the points. At no smoothness the same points are joined by straight lines instead.
Why does the same seed give the same blob?
The random pulls come from a seeded generator, so a seed is the whole recipe: the same seed with the same settings draws the same shape on any device. Changing the randomness scales the same pulls rather than drawing new ones, so you can tune a shape you like, and adding a point keeps how far each earlier point is pulled in, though they all move round to the new spacing. New blob picks a fresh seed.
Can the blob ever cross over itself or be cut off?
No. Every point lies at a different angle, and the curve always turns the same way round the centre, which the tests check over a wide range of settings and seeds, so it does not loop or cross. The shape is then fitted by its exact bounding box, worked out from where each Bézier turns rather than from its points, so bulges between points are counted and nothing leaves the canvas.
How do I use the blob in CSS?
Three ways. Save the SVG and use it as a background-image or an img. Copy the clip-path, which cuts any element to the shape: its path() coordinates are pixels from the element’s top-left corner, so the element should be the size of the canvas. Or copy just the path data into an SVG of your own. The SVG is marked aria-hidden, as a decorative shape should be.
Why are colours written as hex with a separate opacity?
Because an SVG file travels further than a browser: design tools, older renderers and email clients read six-digit hex and fill-opacity, but not always eight-digit hex or oklch(). A colour outside sRGB is mapped into it, keeping close to its lightness and hue, and the tool says when it does. currentColor passes through for an inline SVG that should take the text colour around it; in a file opened on its own it draws black.