Offseting animation start point for SVG AnimateMotion

Question

I have a path in my SVG, and I want to animate 2 rect elements along it, using animateMotion. However, I want the two rectangles to start at different points along the path.

I've gotten close by using begin to offset the start time, but that means that one rectangle gets stuck until its time starts - which is non ideal. Is there something similar to begin, like startOffset for text that would work?

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <path fill="none" stroke="lightgrey" id="motionPath"
    d="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />

  <circle r="5" fill="red">
    <animateMotion dur="10s" repeatCount="indefinite"
    >
    <mpath xlink:href="#motionPath"/>
    </animateMotion>
  </circle>
  
   <circle r="5" fill="red">
    <animateMotion dur="10s" repeatCount="indefinite"
            begin="2s"
    >
      <mpath xlink:href="#motionPath"/>
    </animateMotion>
  </circle>
</svg>

Answer 1

For your case of a indefinitely repeated motion, the easiest solution is to set the begin time to a negative value. At document start time, the motion is computed to have already begun, and the animated element starts at an offset.

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <path fill="none" stroke="lightgrey" id="motionPath"
    d="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />

  <circle r="5" fill="red">
    <animateMotion dur="10s" repeatCount="indefinite"
    >
    <mpath xlink:href="#motionPath"/>
    </animateMotion>
  </circle>
  
   <circle r="5" fill="red">
    <animateMotion dur="10s" repeatCount="indefinite"
            begin="-2s"
    >
      <mpath xlink:href="#motionPath"/>
    </animateMotion>
  </circle>
</svg>

Note: for a non-repeated motion, you can also use the notation keyPoints="0.2;1". This way, during the simple duration, the animated element moves from 20% to 100% along the path, but never is shown at its start.