Blob Generator

Generate random organic blob shapes as SVG. Customize complexity and randomness, pick your color, then download or copy the SVG code.

Instant SVGCopy pathFree download

① Adjust complexity, randomness and color ② Click Randomize to generate a blob ③ Copy SVG or download PNG

Complexity (points)6

Randomness50

Seed

Fill color#C9B89A

How it works

The blob is built from N evenly-spaced points on a circle, each displaced inward or outward by a random amount. Smooth cubic Bézier curves connect the points using Catmull-Rom to Bézier conversion.

Complexity

Controls the number of anchor points (6–10). More points create more intricate, irregular silhouettes. Fewer points produce simpler, rounder blobs.

Randomness

Controls how far each point can deviate from the base circle radius. 0 gives a perfect circle; 100 gives maximum organic irregularity.

What is a blob shape and how are they generated?

Blob shapes are smooth, organic, amoeba-like forms used extensively in modern web design for backgrounds, illustrations, avatars, and UI accents. They are generated algorithmically by placing anchor points on a circle at equal angular intervals, then randomly displacing each point radially. Cubic Bézier curves — computed via the Catmull-Rom-to-Bézier conversion — connect the points smoothly, producing the characteristic flowing silhouette. The result is an SVG path embeddable directly in HTML or CSS via background-image, clip-path, or inline <svg>, exportable to Figma, Illustrator, and Inkscape. Blob shapes are popular for hero section backgrounds, card decorations, profile picture frames, and mascot illustration bases.

Frequently asked questions

A blob shape is a smooth, organic, rounded form that resembles a natural, amoeba-like silhouette. Unlike geometric shapes (circles, squares), blobs have irregular, flowing outlines that feel organic and playful. They are widely used in modern web design for backgrounds, illustrations, and UI decorations.

Blobs are created by placing N anchor points at equal angular intervals around a circle. Each point is then displaced randomly inward or outward by a configurable amount. Cubic Bézier curves — derived using the Catmull-Rom spline to Bézier conversion — connect all points into a smooth, closed path. The seeded random number generator ensures reproducibility.

Complexity controls the number of anchor points (6–10). More points allow more local variation and intricate silhouettes. Randomness controls the magnitude of each point's displacement from the base circle. At 0, all points sit on the circle producing a near-perfect circle; at 100, points deviate maximally producing highly irregular shapes.

The tool outputs a standard SVG cubic Bézier path using the "C" command. The full markup is a self-contained <svg> element with a viewBox of "0 0 300 300". The path uses absolute coordinates and ends with "Z" to close the shape. You can paste it directly into HTML, Figma, Illustrator, or any SVG-compatible tool.

The generated shape is deterministic given the same seed, complexity, and randomness values. Very high randomness with low complexity can occasionally produce self-intersecting paths. The shapes are generated in a 300×300 viewBox, but SVG scales infinitely so there is no resolution limit. The tool generates 2D flat shapes; 3D effects require additional CSS or shader work.

You can use the downloaded SVG as an <img> source, as a CSS background-image, or inline the <svg> code directly in your HTML for maximum control. In CSS you can apply clip-path with the path() function using the copied path string. Blobs work great as background decorations, hero section accents, image masks, and card backgrounds.

Yes. SVG and cubic Bézier paths are supported in all modern browsers (Chrome, Firefox, Safari, Edge) and have been since 2012. The downloaded file is a plain SVG XML file compatible with all design tools including Figma, Adobe Illustrator, Inkscape, and Sketch.

What is a blob shape and how are they generated?

Frequently asked questions

Explore Our Network