SVG - animate/move dots along path

Question

I'm looking for a way to move dots along existing path in order to get animation that looks like this:

I was thinking about working with dasharray but wasn't able to get this exact behavior.

Here is an example of something I tried, but as you can see it doesn't really work:

path.link {
  stroke-width: 3px;
  stroke-dasharray: 5 5;
  stroke: black;
}
path.link-anim {
  stroke-width: 3px;
  animation: link-anim 5s linear infinite;
}
path.red {
  stroke: red;
}
path.blue {
  stroke: blue;
}
path.green {
  stroke: green;
}
path.pink {
  stroke: pink;
}
@keyframes link-anim {
    0% {
        stroke-dashoffset: 0;
        stroke-dasharray: 5 5 100%;
    }
    100% {
        stroke-dashoffset: 100%;
        stroke-dasharray: 100% 5 5;
    }
}

<svg width="450" height="450">
  <g>
    <path class="link" d="M10,10L100,10"></path>
    <path class="link-anim red" d="M10,10L100,10"></path>
  </g>
  <g>
    <path class="link" d="M50,50L200,50"></path>
    <path class="link-anim blue" d="M50,50L200,50"></path>
  </g>
  <g>
    <path class="link" d="M75,75L75,200"></path>
    <path class="link-anim green" d="M75,75L75,200"></path>
  </g>
  <g>
    <path class="link" d="M85,85L450,450"></path>
    <path class="link-anim pink" d="M85,85L450,450"></path>
  </g>
</svg>

Note - the angle of the line is not something I care about. I should have written this from the start. What I need is the 3 dots to move forward (and only those 3 dots).

Answer 1

You can simply duplicate your paths, and set the stroke dash-array of the top one to only contain the 3 dots you need.

Then you can animate the dashoffset property of these top paths.

Note that it's not really modular, the dashoffset, dash-array and steps() timing function need to be calculated according to the path length.

path, circle {
  stroke-width: 4px;
  fill: transparent;
}

.bg {
  stroke: white;
  stroke-dasharray: 4 12;
}

.move {
  stroke: red;
  animation: link-anim 3s infinite steps(21);
  stroke-dasharray: 4 12 4 12 4 300;
}

@keyframes link-anim {
  0% {
    stroke-dashoffset: 368;
  }
  100% {
    stroke-dashoffset: 32;
  }
}

body {
  background: lightblue;
}

<svg width="500" height="330">
  <defs>
  <path id="v_path" d="M30,20V288"/>
  <path id="h_path" d="M30,20H358"/>
  <path id="d_path" d="M30,20L228 228"/>
  <circle id="c_path" cx="150" cy="150" r="53.4"/>
  </defs>
    <use class="bg" xlink:href="#v_path"/>
    <use class="move" xlink:href="#v_path"/>

    <use class="bg" xlink:href="#h_path"/>
    <use class="move" xlink:href="#h_path"/>

    <use class="bg" xlink:href="#d_path"/>
    <use class="move" xlink:href="#d_path"/>

    <use class="bg" xlink:href="#c_path"/>
    <use class="move" xlink:href="#c_path"/>

</svg>