Animating an SVG line is nothing to write home about. It has already been described in great detail many, multiple, different times. We make the line use dashes, configure it so that there is a single dash that spans the entire line, and then we animate the offset of that dash. Done.

But what if we want to animate a line that itself is dashed? Like a dashed line in a treasure map?

As it turns out, we can animate it in pretty much the same way! But instead of animating the dashed line, we mask that dashed line with an identical line, and then we animate that line. So, step by step:

  1. Define the line path inside a defs element so that it’s not drawn.

  2. Draw the line by defining a use element whose xlink:href attribute points to the path defined in the previous step.

  3. Create a mask with an identical line by using another use element. The mask must be white (like in Photoshop) and have the same stroke properties (stroke-width, stroke-linecap, stroke-miterlimit, etc) as the drawn line so that it can cover it perfectly.

  4. Make the mask line use dashes, make it dashed with a single dash that spans its total length, and then animate the dash offset. The usual stuff.

Finally, we can change the transition timing function to achieve different results. Using the steps transition function with the same amount of steps as the number of line dashes results in a nice effect.