SVG blob generator.

How the sliders shape the path

The generator places points evenly around a circle with a radius of 80 units, centered in a 240 by 240 viewBox, then joins them with cubic Bézier curves. Each slider changes one step of that process.

• Complexity (3 to 12) is the number of points. Three or four points give a pebble-like shape; ten or more give a wavier outline. Changing it rolls a new random offset for every point.
• Randomness (0 to 60) pushes each point toward or away from the center by up to 0.4 times the slider value, so at 60 a point can move 24 units either way. At 0 you get a regular shape.
• Smoothness (0 to 0.5) sets how far each curve's control points reach toward the neighboring points. At 0 the edges are straight and the shape is a polygon; at 0.5 the curves are at their roundest.
• Randomness and Smoothness reshape the current blob instead of creating a new one, so you can find a silhouette you like and then soften or roughen it. Shuffle blob picks a new point count, randomness and smoothness together.

Sizing the exported SVG

Copy SVG and Export SVG produce the same markup: an svg element with viewBox="-120 -120 240 240" and one path with a fill attribute. The SVG has a viewBox and no fixed width or height, so it scales to its container. Paste it inline and size it with CSS, or save the file and use it as an image or a background-image.

Inline SVG without a width fills the width of its container, which is usually not what you want for a decorative shape. Give it a width class. When you use blob.svg in an img element, set width and height attributes too, so the browser can reserve the space before the file loads. The viewBox leaves a margin around the shape, so the blob never touches the edge of its box even at maximum randomness.

<!-- Decorative blob behind a hero image -->
<div class="relative">
  <svg class="pointer-events-none absolute -left-16 -top-16 w-96" viewBox="-120 -120 240 240"
       xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
    <path d="M 87.44,0 C ..." fill="#E84A5F" />
  </svg>
  <img class="relative" src="/product.png" alt="Product photo" width="640" height="480" />
</div>

Changing the color later

The color is the path's fill attribute. Edit it in the markup, or remove it and set fill in CSS, for example fill: currentColor, so the blob follows the text color of its parent and changes with themes. A fill declared in a stylesheet overrides the attribute even if you leave it in place, because SVG presentation attributes have lower priority than any CSS rule.

For a gradient fill, define a linearGradient or radialGradient inside the SVG and point the fill at it. Use a unique id if several blobs share a page, since ids must not repeat.

<svg viewBox="-120 -120 240 240" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
  <defs>
    <linearGradient id="blob-fill-hero" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#ff75c3" />
      <stop offset="100%" stop-color="#70e2ff" />
    </linearGradient>
  </defs>
  <path d="M 87.44,0 C ..." fill="url(#blob-fill-hero)" />
</svg>

Blobs as image masks

A blob makes a good organic crop for photos and avatars. Use the exported file as a CSS mask: the browser keeps the parts of the element under the opaque fill and hides the rest, so the fill color does not matter. mask-image works unprefixed in current browsers; keep the -webkit- line for Chrome before 120 and Safari before 15.4.

clip-path: path() is less convenient here. It uses pixel coordinates from the element's top-left corner and ignores the viewBox, so the blob's coordinates, which are centered on 0,0 and include negative values, would be cut off and would not scale with the element. A mask, or an SVG clipPath, scales correctly.

.avatar {
  width: 240px;
  aspect-ratio: 1;
  object-fit: cover;
  -webkit-mask: url("/blob.svg") center / contain no-repeat;
  mask: url("/blob.svg") center / contain no-repeat;
}

Accessibility and animation

The exported markup has no accessibility attributes, so add them for your use. Most blobs are decoration: add aria-hidden="true" to the svg so screen readers skip it. If a blob carries meaning, such as a shape in a diagram, use role="img" with an aria-label, or a title element as the first child of the svg.

Two blobs with the same Complexity have the same path structure, one move command and the same number of curves, which means a browser can interpolate between them. Generate two shapes at the same point count and morph between them with an SVG animate element, which works in current Chrome, Firefox and Safari. The CSS d property can do the same in Chrome and Firefox, but Safari does not apply it. Keep morphs slow, and skip them for people who set prefers-reduced-motion.

Questions

How do I make an SVG blob responsive?

The exported SVG already has a viewBox and no fixed size, so it scales with whatever width you give it. Set the width in CSS, for example width: min(60vw, 28rem), and the height follows the square viewBox.

Can I use the blob as a CSS background?

Yes. Save the file and reference it with background-image: url("/blob.svg"), adding background-size and background-repeat: no-repeat. To change the color of a background SVG you need to edit the file, since CSS on the page cannot reach inside a background image.

How do I animate one blob into another?

Generate two blobs with the same Complexity value so their paths have matching commands, then add <animate attributeName="d" values="pathA;pathB;pathA" dur="8s" repeatCount="indefinite" /> inside the path. Paths with different point counts cannot be interpolated smoothly.

Why is my blob huge when I paste it?

An inline SVG without width or height fills the width of its container. Add a width class or style to the svg element.