As many people are aware, the future of animating SVG using SMIL has an uncertain future. Chrome has slated SMIL for deprecation and is already displaying a notice in Devtools.

An awful lot of what can be achieved with SMIL can be replicated using CSS transitions and animations.

The one thing that can't currently be recreated using CSS is animating the 'd' (points) of a path/shape.

This effect can certainly be achieved using libraries like Snap.svg or GSAP's MorphSVG Plugin

I had the notion, what if I just wanted to do this without adding an extra library into my app/page

So below is my stab at a vanilla js implementation, using requestAnimationFrame for the animation.

I have a source and destination path, both of which are hidden, I duplicate the 'from' and un-hide it.

I loop through each of the points in the path, calculating the difference between each of the points and storing the difference in a 'diff' object.

I use switch: case's fallthrough behaviour to my advantage so that only the properties that need to be compared/copied depending on the point type..

e.g. A Move point (M/m) has only an x and y position values, while at the other end of the scale a Cubic point (C/c) has a six position values: x,y, x1,y1, x2,y2

More details to follow, if anybody is actually interested :)