<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<path id="arc" d="m0,200c0,0 0,-200 200,-200c200,0 200,200 200,200c0,0 -400,0" stroke-width="0" stroke="#000000" fill="none">
<animate attributename="d" begin="0s" dur="12s" repeatcount="indefinite" values="
m0,200c0,0 0,-200 200,-200c200,0 200,0200 200,0200c0,0 -400,0;
m0,200c0,0 0,0200 200,0200c200,0 200,-200 200,-200c0,0 -400,0;
m0,200c0,0 0,-200 200,-200c200,0 200,0200 200,0200c0,0 -400,0;"/>
</path>
<circle cx="0" cy="0" r="2">
<animateMotion dur="12s" repeatCount="indefinite" rotate="auto" begin="0" >
<mpath xlink:href="#arc"/>
</animateMotion>
</circle>
<circle cx="0" cy="0" r="2">
<animateMotion dur="12s" repeatCount="indefinite" rotate="auto" begin="0.25" >
<mpath xlink:href="#arc"/>
</animateMotion>
</circle>
<circle cx="0" cy="0" r="2">
<animateMotion dur="12s" repeatCount="indefinite" rotate="auto" begin="0.5" >
<mpath xlink:href="#arc"/>
</animateMotion>
</circle>
<circle cx="0" cy="0" r="2">
<animateMotion dur="12s" repeatCount="indefinite" rotate="auto" begin="0.75" >
<mpath xlink:href="#arc"/>
</animateMotion>
</circle>
<circle cx="0" cy="0" r="2">
<animateMotion dur="12s" repeatCount="indefinite" rotate="auto" begin="1" >
<mpath xlink:href="#arc"/>
</animateMotion>
</circle>
<circle cx="0" cy="0" r="2">
<animateMotion dur="12s" repeatCount="indefinite" rotate="auto" begin="1.25" >
<mpath xlink:href="#arc"/>
</animateMotion>
</circle>
<circle cx="0" cy="0" r="2">
<animateMotion dur="12s" repeatCount="indefinite" rotate="auto" begin="1.5" >
<mpath xlink:href="#arc"/>
</animateMotion>
</circle>
<circle cx="0" cy="0" r="2">
<animateMotion dur="12s" repeatCount="indefinite" rotate="auto" begin="1.75" >
<mpath xlink:href="#arc"/>
</animateMotion>
</circle>
<circle cx="0" cy="0" r="2">
<animateMotion dur="12s" repeatCount="indefinite" rotate="auto" begin="2" >
<mpath xlink:href="#arc"/>
</animateMotion>
</circle>
</svg>
