SVG Blob Generator

An SVG blob generator produces smooth, organic closed shapes — not circles, not rounded rectangles, but soft asymmetric forms that have overtaken geometric shapes in modern web design. You see them as hero-section backgrounds, behind feature icons, as section dividers, and as avatars. The appeal is simple: an organic shape reads as warmer and friendlier than a perfect circle, and it differentiates a page instantly from the same-looking templates everyone else ships.

How the blob is generated. The algorithm places N points evenly around a circle, then perturbs each point's radius by a random amount controlled by the randomness slider. Those points become anchor points for a smooth closed curve using a Catmull-Rom spline, which is converted to a single SVG path with cubic Bézier segments. The result is a shape that looks hand-drawn but is actually deterministic — the same seed produces the same blob, so you can share a configuration by URL or tweak without losing the exact shape you had.

Points vs randomness. More points plus low randomness produces a nearly circular shape. Fewer points plus high randomness produces an angular, spiky silhouette. The sweet spot for a classic web-design blob is 7–9 points with 35–50% randomness — enough asymmetry to read as organic without looking damaged. Low-point counts (3–4) produce rounded triangles or teardrops; high-point counts (12+) produce softer, wavier contours.

Fills and gradients. A solid fill reads as flat illustration; a linear gradient reads as premium web-design; an outline is useful for icon-style uses or when the blob sits behind text and you don't want it to dominate. Our gradient mode lets you set two colours and a rotation angle, producing the same output as CSS linear-gradient but inside the SVG — which means the gradient travels with the shape when you export and embed it elsewhere.

How to use the output. Copy the full SVG string to paste inline into your HTML for maximum control (CSS can target the path for hover effects). Copy only the path d if you want to drop it into an existing SVG or into a tool like Figma. Download as a file if you prefer to reference it via <img> or background-image: url(). SVG scales infinitely, so the same 500×500 export works at any size without loss.

1. Tweak points and randomness to shape the silhouette.
2. Shuffle the seed for a new variant at the same settings.
3. Pick a fill — solid, gradient, or outline.
4. Copy or download the SVG or just the path data.

• Deterministic seed-based generation — reproduce a blob from its number.
• Point count and randomness sliders for shape control.
• Solid, gradient (angle-controlled), and outline fill modes.
• Six gradient presets plus custom colour pickers.
• Copy full SVG, copy path d, or download an SVG file.
• Vector output — infinite scaling, no pixel loss.