Skip to main content
Toollyz

Search tools

Search for a command to run...

SVG Blob Generator

Generates an organic closed-curve 'blob' via deterministic seeded PRNG (same seed → same shape, perfect for reuse). N anchor points on a circle, wobbled radially, joined with Catmull-Rom-derived cubic Bezier curves for perfect smoothness. Eight gradient palettes, adjustable complexity and contrast, copy SVG markup or download .svg. 100% offline.

What is the SVG Blob Generator?

SVG Blob Generator builds organic 'blob' shapes you can drop into hero sections, decorative backgrounds, sticker illustrations or button backdrops. The algorithm scatters N anchor points evenly around a circle, then wobbles each point's radius by a controllable contrast — points are then joined with cubic Bezier curves whose control handles come from a Catmull-Rom spline, so the curve is perfectly smooth (no kinks even at low complexity). Because the random wobble is driven by a seeded mulberry32 PRNG, the same seed always reproduces the same blob — you can share a seed and your collaborator gets the same shape back, no exporting. Eight curated gradient palettes (Indigo, Sunset, Ocean, Forest, Rose, Lavender, Midnight, Amber) cover most decorative needs; you can override the fill type to solid, swap colours individually, and rotate the gradient angle. The output is a clean self-contained `<svg>` with an embedded `<linearGradient>` (when applicable) and a single `<path>` — copyable as markup or downloadable as `.svg`.

How to use it

  1. Pick a fill palette — gradient by default, switch to solid if you need a single colour.
  2. Hit Random to roll a new seed, or type a seed manually if you want to reproduce a specific shape later.
  3. Drag Complexity (number of anchor points, 4-20) — more points = more detail, fewer = simpler.
  4. Drag Contrast — higher contrast wobbles points further from the base circle, producing more irregular blobs.
  5. Click Copy SVG to grab the markup, or Download to save as a .svg file.

Benefits

  • Catmull-Rom-derived Bezier control points produce perfectly smooth curves at any complexity.
  • Seeded mulberry32 PRNG — share a seed and get the same blob back, every browser, every visit.
  • Eight curated gradient palettes (Indigo, Sunset, Ocean, Forest, Rose, Lavender, Midnight, Amber) + solid colour mode.
  • Adjustable complexity (4-20 points) for fine-grained shape control.
  • Self-contained SVG output — embedded gradient, single path, no external dependencies.
  • Downloads as .svg with seed-based filename for easy collation.
  • Pure markup output — no canvas, no raster image, scales to any size.
  • Settings persist in localStorage so your shape is one tab-open away.
  • Runs 100% in your browser — no server, no upload.

Frequently asked questions

Why is my blob always the same?

The same seed always produces the same shape — that's the point. Click 'Random' to roll a new seed, or type any integer into the seed input for full reproducibility.

Why aren't the curves perfectly smooth at low complexity?

They are mathematically smooth — but at 4-5 points the underlying polygon is wide enough that the smoothing can't hide all the angularity. Bump complexity to 8+ for organic blobs, drop to 4-5 for stylised pill or capsule shapes.

What's a Catmull-Rom spline?

An interpolating curve that passes through every control point you give it (unlike a B-spline which approximates). We use it to derive Bezier control handles so a sequence of points becomes a single smooth curve — perfect for closed loops like blobs.

Can I use the SVG as a clip-path?

Yes — wrap the `<path>` in a `<clipPath>` and reference it from CSS as `clip-path: url(#id)`. The Toollyz CSS Clip-Path Generator handles polygon-only clips; SVG path clips are the next step up for organic shapes.

How do I change the gradient direction?

Drag the Fill angle slider — `linearGradient gradientTransform='rotate(angle)'` is set automatically. 0° is horizontal left-to-right, 90° vertical top-to-bottom, 135° the classic 'shine from top-left' diagonal.

Why is the embedded `<linearGradient>` keyed by seed?

Each gradient gets a unique ID like `g123456` so multiple blobs on the same page don't clash. The ID is derived from the seed so it's stable.

Can I export PNG?

Not from this tool — SVG is scalable. To get a PNG, drop the SVG into the browser, right-click → 'Save image as…', or use a one-off SVG-to-PNG converter.

What's the max complexity?

20 anchor points — beyond that the curves start to look like noise rather than organic shapes. The 4-20 range covers the practical design space.

Does the seed need to be a specific format?

Any 32-bit unsigned integer works (0 to 4,294,967,295). The 'Random' button picks a random integer below 1 million for shareability.

Are settings saved between visits?

Yes — complexity, contrast, seed, fill type, colours and angle all persist in localStorage under `toollyz:svg-blob`.

Is anything uploaded?

No. Path generation and SVG building run entirely in your browser.

Related tools

See all image tools