How move/animate multiple circles along motion path by SVG Animation

Question

How can move multiple circles along a (motion path) using SVG SMIL Animation <.

Problem: About the first 3 4 circles everything was fine.
Some circles went "out of orbit" – so they are not correctly aligned with the motion path.

.planePath {
    stroke: red;
    stroke-width: .1%;
    stroke-width: .5%;
    stroke-dasharray: 1% 2%;
    stroke-linecap: round;
    fill: none;
    z-index: 99;
}

user_15015675 · Answer

Your animated circles (moving along the motion path)
should be placed at cx/cy =0.
Explained here by @Paul LeBeau: Offset when following svg motion path

Otherwise their initial position will be added to the current motion path position.
That's why your circle are moving as in straight line around the path.

Path offset via animation delay

Actually all circles have the same center position of cx="0" cy="0" - so they would be overlapping without animation.

By adding an incremental begin value we mimic a path offset like so:

The higher the begin="0.1s" value, the larger the distance between the circles.

Simplified example

Drawback: at the beginning you see circles at the position x/y=0 since they are not yet aligned to the motion path, due to the delay.

As a workaround we can hide all circles until all of them are animated/aligned:

.planePath {
  stroke: red;
  stroke-width: .1%;
  stroke-width: .5%;
  stroke-dasharray: 1% 2%;
  stroke-linecap: round;
  fill: none;
}

Fade in animation

The begin value is calculated like so:
delay-increment: 0.1 * total number of circles

Initial motion path offset – css `offset-path` to the rescue

Disclaimer: browser support might still be spotty.
See also MDN Docs.

The main benefit of the offset-path property is its ability to actually define a start offset – pretty neat for static element renderings as well.
(Quite similar to svg's textPath related startOffset property)

const svg = document.querySelector('svg');
let dotsCount = 15;
let steps = 100 / dotsCount;
let duration = 10;
let circleRadius = 20;
let startOffset = 50;

//create css rules for animations
let circleMarkup = '';
let css = 
`.css-animate circle {
offset-path: path('M1.50024 430C58.2002 -111.6 853.699 -156.741 889.5 430C925.5 1020 1754 1007.5 1785 430C1816 -147.5 2665.5 -132 2665.5 430C2665.5 1010.27 1847 948 1785 453C1841.5 -83.5 930.282 -187.244 889.5 389C851 933 35 1017.5 1.50024 430Z');
offset-rotate: auto;
}`;

for (let i = 0; i < dotsCount; i++) {
    circleMarkup +=
        ``;
    css +=
`.point${i} {
offset-distance: ${steps*i+startOffset}%;
animation: followpath${i} ${duration}s linear infinite;
}
@keyframes followpath${i} {
to {
offset-distance: ${100+steps*i+startOffset}%;
}
}`;
}

svg.insertAdjacentHTML('afterbegin', '');
svg.insertAdjacentHTML('beforeend', circleMarkup);

In the above example the initial motion path offset is set by:

.point-1 {
    offset-distance: 25%;
    animation: followpath1 10s linear infinite;
}

Also referring to a @keyframe animation rule:

@keyframes followpath1 {
    to {
        offset-distance: 125%;
    }
}

Of course, you will need to adjust the values according to the desired offsets/timings.

Alternative: animated `stroke-dashoffset`

Probably the easiest approach – slightly jittery. I use pathLength to change the computed length for the dash-array to 100.

stroke-dasharray: 0 6.666;
stroke-linecap: round;

Setting the first dash-array value to 0 will result in a dotted line (so every dot is perfectly circular) when combined with stroke-linecap: round.

The second value defines the the gap or the total number of dots:
100 (pathlength) / 15 (3 circles à 5 dots) = 0.666.

.planePath {
            stroke: red;
            stroke-width: 5%;
            stroke-dasharray: 0 6.666;
            stroke-linecap: round;
            fill: none;
             animation: animStroke 10s linear infinite; 
            stroke-dashoffset: 0;

        }

        .planePath2 {
            stroke: red;
            stroke-width: 5%;
            stroke-dasharray: 0 3.333;
            stroke-linecap: round;
            fill: none;
            animation: animStroke 10s linear infinite;
        }

    
        @keyframes animStroke {
            to {
                stroke-dashoffset: -100;
            }
        }

How move/animate multiple circles along motion path by SVG Animation

1 Answers

Path offset via animation delay

Simplified example

Initial motion path offset – css offset-path to the rescue

Alternative: animated stroke-dashoffset

Initial motion path offset – css `offset-path` to the rescue

Alternative: animated `stroke-dashoffset`