How to svg blob animation techniques: morphing, pulse, and drift
- Step 1CSS keyframe morphing (simplest) — Generate two blobs with the same complexity (same point count). Place the path data in CSS keyframes: @keyframes blob-morph { 0%, 100% { d: path('M...'); } 50% { d: path('M...'); } }. Apply with animation: blob-morph 8s ease-in-out infinite. This requires the CSS d property which has 90%+ support in modern browsers.
- Step 2GSAP MorphSVG (most capable) — GSAP's MorphSVG plugin handles morphing between paths with different point counts — it subdivides paths to match before interpolating. gsap.to('#blob', { duration: 4, morphSVG: '#blob-target', repeat: -1, yoyo: true, ease: 'sine.inOut' }).
- Step 3Respect prefers-reduced-motion — Wrap all blob animations in a media query: @media (prefers-reduced-motion: reduce) { .blob { animation: none } }. Users who have enabled reduced motion in their OS accessibility settings will see a static blob instead.
Frequently asked questions
What is the CSS d property and why is it used for blob morphing?+
The CSS d property allows animating the d attribute of an SVG path element using CSS transitions and keyframes. It's supported in Chrome 93+, Firefox 97+, and Safari 16.4+. It enables zero-JavaScript blob morphing using only CSS animations, but requires paths with identical command counts for smooth interpolation.
Why does GSAP MorphSVG produce smoother morphs than CSS?+
MorphSVG analyses both paths and subdivides the simpler one to match the control point count of the more complex one before interpolating. CSS d property morphing requires the same number of commands and uses linear interpolation between command values — this can produce unexpected intermediate shapes for non-trivial paths.
How do I create a 'floating' blob animation without morphing?+
Use CSS translate and rotate transforms on the blob element: @keyframes float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-20px) rotate(5deg); } }. The rotation on a non-symmetric blob creates the appearance of organic drifting without requiring path morphing.
Can I morph between a blob and a circle or rectangle?+
Yes, with MorphSVG or Flubber.js. A circle becomes an SVG circle element converted to a path (M cx,cy m -r,0 a r,r 0 1,0 2r,0 a r,r 0 1,0 -2r,0). A rectangle is four straight path segments. GSAP distributes points along both paths to enable smooth morphing between any two closed shapes.
Privacy first
Every JAD SVG tool runs entirely in your browser using the DOM API and Canvas. Your SVG files never leave your device — verified by zero outbound network requests during processing.