What is the SVG Morphing Code Generator?
Shape morphing turns one shape into another, like a circle into a star. For it to look smooth, both paths need the same number of points, which is hard to do by hand. This tool matches them for you.
Pick two shapes or paste two paths. The tool splits curves, matches directions and finds the best starting point so the shapes do not twist. Play the animation, or slide it by hand. Then copy the code as SVG with SMIL, as CSS, or as JavaScript.
How to use it
- Pick the from and to shapes, or paste two paths.
- Set the time, easing and how it plays.
- Copy the SVG, CSS or JavaScript code.
Why people like this tool
Auto matching
Points and direction are matched for you.
3 code types
SVG SMIL, CSS and JavaScript.
Slide by hand
Scrub the morph to check each step.
Ready shapes
Circle, star, heart and more.
