SVG Blob Generator — Smooth Organic Shapes, Reproducible by Seed

Real-world use cases

• A soft blob background behind a SaaS hero headline

  The 2024-era SaaS landing page (Linear, Vercel, Stripe) puts a soft gradient blob behind or beside the hero text. Workflow: set complexity to 6, randomness to about 0.4, switch fill to gradient and pick two brand colours, then copy the inline SVG. Drop it into your hero section as an absolutely-positioned, low-z-index element with `opacity: 0.6` and a heavy CSS `filter: blur(40px)`. The blurred blob reads as an ambient glow rather than a hard shape, and because the seed is in the markup you can regenerate the identical glow later if the design changes.

• Clip a circular avatar into an organic shape

  Round avatars are everywhere; a blob-masked avatar instantly looks more designed. Generate a blob with complexity 7 and low randomness (about 0.25) so it stays roughly circular, copy the `clip-path: path(...)` export, and apply it to the `<img>` of your avatar. The photo is now clipped to the organic silhouette with zero extra DOM. Keep the same seed across your whole team's avatars for a consistent house style, or give each person a different seed for playful variety.

• Decorative section dividers and blob "stickers"

  Instead of a straight `<hr>` or a boring rectangle, export a couple of blobs at different seeds, fill them with translucent brand colours, and scatter them as decorative stickers behind feature cards or at the top/bottom of a section. Because each download is a standalone `.svg`, you can hand the files straight to a designer or drop them into Figma, Webflow or Framer as image assets without any code.

• Generate matching blob variations for a design system

  A design system often needs a family of related-but-not-identical shapes — three blobs that look like siblings. Lock the complexity and randomness, then step the seed by hand (seed 1001, 1002, 1003). Each seed yields a distinct but tonally consistent blob, and the seeds are documented right in your tokens file so any teammate can regenerate the exact same set months later.

• Animated morphing blobs with a CSS/JS tween

  For a living, breathing hero, you can morph between two blob paths. Generate blob A (seed 100), copy its SVG path `d` attribute, generate blob B (seed 200) with the SAME complexity so the two paths have the same number of points, and copy its `d`. Feed both into an SVG `<animate>` element or a JS library like flubber/anime.js to tween between them. Matching complexity is the trick that makes the morph interpolate cleanly instead of glitching.

Common pitfalls

• Morphing between two blobs with different complexity. SVG path interpolation needs the same number of curve segments on both paths, or the tween snaps and glitches. Always generate the start and end blob with the identical complexity value before copying their `d` attributes.

• Relying on `clip-path: path()` for old browsers. The path() form of clip-path is unsupported in IE and very old Safari/Chrome. If you must support legacy, export the inline SVG and use it as a masked image, or ship a rounded-rectangle fallback behind an `@supports (clip-path: path('M0 0'))` query.

• Forgetting that clip-path coordinates are absolute pixels, not percentages. The path() export is sized to the blob's pixel dimensions. If you scale the clipped element with CSS, the clip won't scale with it — set the element's width/height to match the blob size, or regenerate the blob at the target size.

Privacy