Animating a path’s dashed stroke without JavaScript using stroke-dasharray and stroke-dashoffset. As long as you animate the offset to be equal to one full dash group (e.g. stroke-dasharray: 10,5 and stroke-dashoffset: -15), the animation will appear continuous.
Two caveats:
- You can only animate the dash “backwards” in this way, so you may need to reverse the path’s direction for the desired effect.
- If the path is closed, you might get a tiny “seam” at the start/end of the path where the dash doesn’t line up. To fix that, you can ensure that the dash group is a factor of the path length like in this example.