Interpolate and animate two svg path

Question

I have two svg path curves that I want to animate. I want that in 5 seconds dPathBefore becomes dPathNow with a smooth animation transition.

<

Answer 1

The d attribute for the paths has to have the same commands. I've rewritten your paths and now it works. I hope this helps.

svg{border:1px solid; width:100vh}

UPDATE

The OP updated their question so I'm updating my answer: I see those paths are practically polylines. Apparently the only command used apart of M and Z is L

In this case the simplest way to achieve what you want would be by programming those paths to have the same number of points.

If this is not possible, the easier way would be by reducing the number of points of the first path (from 80 t0 68). For this you need to split the d string into an array of points path.split("L") and remove every 6th or so. Next you join the points back into a string to be used as a d attribute.

An other way would be adding points to the second path (from 68 to 80). To do this you will need to split the d string into an array of points, and every n points you need to add a point in between. Then again you join the points back into a string to be used as a d attribute or for the values attribute.