Animated CSS SVG Blob Generator

Animated SVG blobs in CSS: morphing organic shapes for modern UIs

An animated blob is an organic SVG shape that morphs smoothly over time and shows up everywhere in modern web design — Stripe's homepage, Hotjar, Notion, Linear's landing pages. The basic construction is an SVG <path> built with cubic Bezier curves plus a CSS animation. The catch: the SVG d attribute is not directly animatable in pure CSS. The Web Animations API and JavaScript libraries are the modern fix.

Animating the d attribute: real options

Three legitimate approaches, ranked by browser support and tradeoffs:

• SMIL <animate>: works in Chrome, Firefox, Safari but was deprecated by Chrome (2015), then undeprecated (2016). Still functional, no longer recommended.
• Web Animations API + JS: the standards-compliant path — element.animate([{ d: "path(...)" }]). Requires JS but no external deps.
• GSAP MorphSVG (commercial GreenSock Premium) or anime.js morphSVG / Flubber.js (Mike Bostock, free): production-grade interpolation between any two path strings.

Pure-CSS workaround: transform-based fake morph

If you can't use JS, the trick is to animate transform: rotate/scale on a static blob — the organic feel comes from asymmetric curves combined with rotation. Layer 2-3 blob SVGs and animate their opacity/position to fake a true morph:

@keyframes blob-morph {
  0%   { transform: rotate(0deg) scale(1); }
  33%  { transform: rotate(120deg) scale(1.1); }
  66%  { transform: rotate(240deg) scale(0.95); }
  100% { transform: rotate(360deg) scale(1); }
}
.blob { animation: blob-morph 8s ease-in-out infinite; }

Performance, accessibility and prefers-reduced-motion

Transforms are GPU-composited, so a couple of blobs at 60 FPS is fine. Stay within a 1-2 blob budget per page — more triggers paint thrashing on mid-range mobiles. For accessibility, mark decorative blobs as aria-hidden="true" and always respect prefers-reduced-motion:

@media (prefers-reduced-motion: reduce) {
  .blob { animation: none; }
}

Tools, generators and trends

Popular blob generators: Haikei (haikei.app — backgrounds and blobs), Blobs.app, SVG Blob Animator, Get Waves. Current trends: gradient blobs (blue→purple), mesh gradients, glassmorphism overlays. CSS variables for theming: --blob-color: #f0a. Tailwind integration via arbitrary values: bg-[url(...)] works inline. Animated <stop> elements inside <linearGradient> let you animate the gradient itself (SMIL or WAAPI).

FAQ

Can I animate the d attribute with pure CSS? No — d is not a CSS-animatable property. Use the Web Animations API in JS, GSAP, or SMIL <animate>. The pure-CSS workaround is to animate transforms on a static blob.

Should I respect prefers-reduced-motion? Always. Users with vestibular disorders can get motion sick from large morphing shapes — disable the animation in the reduced-motion media query.

Can I animate gradient colors? Yes — animate stop-color on <stop> elements via SMIL, or use the WAAPI on CSS custom properties registered with @property for smooth gradient transitions.

Is GSAP MorphSVG free? No — it requires a GreenSock Club membership. Free alternatives include Flubber.js (Mike Bostock) and anime.js's morphTo helper for interpolating between two paths.