SVG morphing

This animation is simple, but a great example of how to use Motion to animate an SVG path.

All the heavy lifting is done by the motion.path component, with transition properties to control the animation.

Essentially, the SVG is made with two parts, left and right. Pause icon is 2 bars, play icon is one triangle and one quadrilateral.

transition property can be used to change the shape of one bar to a quadrilateral and the other bar to a triangle, without you having to write any custom CSS.