Moving some circles around.
Once we 'Go!', a large circle appears in the center and changes color. 4 smaller circles follow their respective edges back and forth - the timing of each event avoids a loss of separation (crash). We start the red circle and green circle .5 seconds after the other two.
We disappear the text by changing opacity from 1 to 0, then we start our circle animations.
<text id="T1" x="240" y="250" style="font-size:3em;text-anchor:middle">
Go!
<animate attributeName="opacity" from="1" to="0" begin="0s" dur="1s" fill="freeze">
Circles are aligned by their centers.
Here is the code for the small red circle:
<circle id="c1" cx="485" cy="250" r="25" fill="red">
<animate attributeName="cy" values="25;480;25" dur="3s" begin="1.5s" repeatCount="indefinite">
<animate attributeName="cx" values="485;" dur="3s" begin="1.5s" repeatCount="indefinite">
</circle>
And the large central circle:
<circle id="C0" cx="250" cy="250" r="100" fill="transparent">
<animate attributeName="fill" values="red;orange;yellow;green;blue;indigo;red" begin="1s" dur="10s" repeatCount="indefinite">
</circle>
We've also included a change in the fill attribute over 10 seconds.