score:2

Accepted answer

the animation will start at the start of the line, as defined in the svg. to make it start at an arbitrary point, you have to offset it accordingly. to get the exact opposite as in your case, the change is almost trivial though -- you just start at the end and move towards the beginning. that is, you "invert" the transition by considering 1-t instead of t:

return function (t) {
    var p = path.getpointatlength((1-t) * l);
    return "translate(" + p.x + "," + p.y + ")";
};

complete demo here.


Related Query

More Query from same tag