Blob Shape

What it's for

Draw a soft, organic blob for a background, an avatar mask or a decoration, and copy it as SVG or as a CSS clip-path. The shape comes from a seed, a word or number: the same seed with the same settings always gives the same blob, so you can note a seed you like and get it back later.

For example, when you want a different shape behind each profile picture, try seeds until one looks right and copy the SVG.

How to use it

Set the number of Points round the shape (more points, more bumps), Randomness (0 gives a perfect circle, 100 the most uneven shape), the Size in pixels and the Colour. Type any Seed, or press New random seed for a fresh one. The SVG box holds a complete image to save as a .svg file or paste into a page, and the CSS box a clip-path: path() line. The numbers, size and colour are remembered in this browser.

Example

With the defaults (6 points, randomness 50, size 200) and the seed toolbox, the SVG box starts:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200">

Set Randomness to 0 and the shape becomes a six-point circle.

Good to know

The path() in clip-path uses fixed pixel sizes, so it doesn’t stretch with the element: it clips an element of the size you chose. For a shape that scales, use the SVG with a viewBox. The same seed gives the same shape only in this version of the tool; a later change to the drawing could change it, so keep the SVG you want rather than only the seed.