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).