Morphing SVG Shapes with GSAP MorphSVG
MorphSVG smoothly transitions between two different SVG path shapes, automatically handling mismatched anchor point counts.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Handling Shapes with Different Point Counts
A basic path-to-path animation requires both shapes to have the same number of points to interpolate smoothly, but MorphSVG automatically adds and redistributes points as needed to match a source and target shape's point counts, letting a circle morph into a star or any two arbitrary shapes transition smoothly.
- Basic path interpolation requires both shapes to share the same point count
- MorphSVG automatically adds and redistributes points to match shapes up
- Enables smooth morphing between any two arbitrary shapes, like circle to star
Fine-Tuning Morph Precision and Origin
MorphSVG offers configuration options like shapeIndex to control which point on the destination shape the morph animation starts from, avoiding an unwanted twisting artifact that can occur when the plugin's automatic point-matching doesn't align the shapes the way a designer intended.
- shapeIndex controls which destination point the morph animation starts from
- Prevents unwanted twisting artifacts from misaligned automatic point-matching
- Gives designers manual control when the default morph result needs adjustment
Frequently Asked Questions
Do both shapes need the same number of points to use MorphSVG?
No, MorphSVG automatically adds and redistributes points as needed, so shapes with completely different point counts, like a circle and a star, can still morph smoothly.
Why does my MorphSVG animation twist unexpectedly during the transition?
This usually happens when the plugin's automatic point-matching doesn't align corresponding points as intended — adjusting the shapeIndex option typically resolves the twisting artifact.
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