SVG Blob Generator

Q: How do I use a blob as an image mask?

Put the path inside an SVG ` ` or use the downloaded SVG with CSS `mask-image`.

Create smooth organic SVG blob shapes with adjustable points, randomness and seeds. Solid, gradient or outline fill, download .svg or copy CSS data URI.

Blob settings

Fill

Color

Anchor points

Randomness%

Sizepx

Seed

The same settings and seed always produce the same shape.

Preview

SVG code

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" width="400" height="400"><path fill="#8a3ffc" d="M200,20.5C249,19.3 333.7,69.9 353.6,111.3C373.5,152.7 344.9,229.2 319.3,268.9C293.7,308.6 242.6,348.2 200,349.8C157.4,351.4 87.1,317.2 63.6,278.7C40.2,240.2 36.6,161.8 59.3,118.8C82,75.7 151,21.7 200,20.5Z"/></svg>

CSS background (data URI)

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' width='400' height='400'%3E%3Cpath fill='%238a3ffc' d='M200,20.5C249,19.3 333.7,69.9 353.6,111.3C373.5,152.7 344.9,229.2 319.3,268.9C293.7,308.6 242.6,348.2 200,349.8C157.4,351.4 87.1,317.2 63.6,278.7C40.2,240.2 36.6,161.8 59.3,118.8C82,75.7 151,21.7 200,20.5Z'/%3E%3C/svg%3E");

Related Tools

View All

CSS Box Shadow Generator CSS Gradient Generator CSS Flexbox Generator CSS Grid Generator Border Radius Generator Glassmorphism Generator Neumorphism Generator Text Shadow Generator

What is SVG Blob Generator?

Generates smooth, organic blob shapes as SVG. Control the number of anchor points, how irregular the shape is and its size, choose a solid, gradient or outline fill, and export as an .svg file or a CSS data URI.

How to use SVG Blob Generator

Choose the Fill (Solid, Gradient or Outline) and color(s).
Set Anchor points, Randomness and Size.
Click Randomize or enter a Seed for a specific shape.
Download .svg or copy the SVG code.
Or copy the CSS background (data URI).

Example

Input

Points 4, randomness 0, size 100, solid #8a3ffc

Output

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100"><path fill="#8a3ffc" d="M50,5C65,5 95,35 95,50C95,65 65,95 50,95C35,95 5,65 5,50C5,35 35,5 50,5Z"/></svg>

When to use SVG Blob Generator

Use blobs as decorative backgrounds, image masks, avatar frames or illustration accents. With randomness 0 you get a near-circle; for exact geometric shapes use CSS border-radius or clip-path instead.

How SVG Blob Generator works

Anchor points are spaced evenly around a circle (radius 45% of the size). Each point's distance from the centre is reduced by a seeded pseudo-random amount up to 60% × randomness. A closed Catmull-Rom spline through the points is converted to cubic Bézier commands, which guarantees a smooth outline without kinks. Gradient fills use an SVG linearGradient from top-left to bottom-right.