How to Animate SVG Path Morphing
Morph SVG paths between two shapes with CSS animations or JavaScript — create smooth play/pause buttons, hamburger menu transitions, and shape-shifting icons.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
SVG Morph with CSS (Same Node Count)
CSS can morph between two SVG path d values if both paths have the same number and type of commands.
- Define two @keyframes states with different d attribute values
- Both paths must have identical command structure (same M, C, L, Z commands)
- CSS: @keyframes morph { from { d: path('M...') } to { d: path('M...') } }
- Apply: animation: morph 1s ease-in-out forwards on the path element
- Browser support: Chrome/Edge — Firefox partial, Safari limited
SVG Morph with JavaScript (GSAP MorphSVG)
GSAP's MorphSVGPlugin handles morphing between paths of different node counts.
- Install GSAP: npm install gsap
- Import MorphSVGPlugin (Club GreenSock member plugin)
- gsap.to('#shape', { duration: 1, morphSVG: '#target-shape' })
- GSAP automatically matches nodes between different path structures
- Handles hamburger → X menu transition, play → pause buttons, and complex shape changes
Frequently Asked Questions
Why do my SVG paths look distorted during the morph?
Paths morph by interpolating each corresponding point. When paths have different numbers of points, the browser distributes them unevenly causing distortion. Use GSAP MorphSVG which handles this automatically.
What's the easiest SVG morph to build? (A beginner example)
Play/pause button: the play triangle morphs to two pause rectangles. They have the same number of points. Define both paths in CSS @keyframes and trigger the animation class on click.
Can I morph between two completely different SVG shapes?
Yes with GSAP MorphSVG Plugin. It redistributes points algorithmically to create smooth transitions between shapes with different point counts and structures.
Are there free SVG morphing libraries?
Flubber.js (free, open-source) handles path interpolation without requiring GSAP. SVG.js also has a morphing plugin. For simple cases with matching paths, CSS animation is free and dependency-free.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG