SVG Blob Generator

How to use this tool

1. Adjust the point count, randomness, and color controls.
2. Set a seed from 0 to 9999, or click Regenerate to choose and display a random seed.
3. Choose SVG markup or CSS clip-path to view the corresponding generated code.
4. Download the SVG file, or copy the SVG markup or CSS clip-path for your project.

What are SVG blobs?

An SVG blob is an organic shape described by an SVG <path>. This generator places 4 to 12 anchors around a circle, then joins them with smooth cubic Bézier curves. For each anchor, its angle is evenly spaced around the circle and its radius is adjusted by a repeatable pseudo-random value. The Randomness control scales that adjustment: at 0%, anchors sit on a regular circle; at 100%, their radii can vary more widely.

The Seed field makes a result reproducible. With the same seed, point count, and randomness, the generator calculates the same anchors and path each time. The default seed is 42; you can enter any whole number from 0 through 9999. Color changes the SVG fill without changing the geometry. For example, a designer can save a blob's seed and settings with a page mockup, then recreate that same shape when building an avatar treatment or a section background.

Using your blob

The SVG tab shows the complete markup, and Download SVG saves the current color and path as a file. Use SVG when you want the smooth Bézier outline in the preview or need a vector asset that scales cleanly. You can also embed that markup directly in HTML. To use it as a CSS background image, encode the SVG as a data URI; this page displays and downloads the SVG but does not create a data URI for you.

The CSS clip-path tab and Copy CSS clip-path action provide a responsive clip-path: polygon(...) rule for masking an HTML element. It follows the same anchor positions as the SVG, but connects them with straight line segments, so the mask is an approximation of the smooth curve. This tool does not emit an SVG <clipPath> element or a url(#blob-id) reference; those are a separate SVG clipping technique you can author manually.

Shape detail and performance

This generator limits shapes to 4–12 anchors, so its output is intended for ordinary interface decoration and masks rather than highly detailed illustrations. A page with many separately animated paths can require more paint work; keep motion subtle and check performance on the devices you support. The tool creates one static blob at a time and does not export animation keyframes.

Understanding Bézier curves

SVG blobs are built from cubic Bézier curves. Each curve segment is controlled by four points: a start point, two control handles (which "pull" the curve toward them like magnets), and an end point. Moving a control handle further from the curve makes it more pronounced; bringing it close creates a sharper bend. You don't need to understand the math to use blobs, but knowing this explains why some shapes look smooth while others appear jagged.

Animating SVG blobs

You can build an animation by hand from compatible SVG paths. This generator provides one path at a time; it does not make a second path or animation keyframes. For a hand-written morph, keep the same point count so both paths have matching commands, then animate the SVG d property in browsers that support it. A minimal keyframe structure looks like this:

@keyframes morph {
  0%, 100% { d: path("M..."); }
  50%       { d: path("M..."); }
}
.blob { animation: morph 4s ease-in-out infinite; }

Both paths need compatible numbers and types of commands for smooth interpolation. A plugin such as GSAP MorphSVG can help with mismatched paths, but the generated SVG here does not include that library or an animation setup.

Accessibility note

When you use a blob only as decoration, add aria-hidden="true" to its SVG so screen readers can skip it. If a blob communicates information, give it an accessible name or description. When a polygon clips meaningful content such as an avatar, provide alternative text or an accessible label for the image or content itself; a CSS mask does not change its screen-reader meaning.