<svg id="circleoutter" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">
<g transform="rotate(-90 43 -17)">
<circle cx="0" cy="0" r="8">
<animateTransform id="b" attributeName="transform" dur="0.2s" type="translate" values="0 0; 14 0; 0 0" begin="0;a.end"/>
</circle>
</g>
<g transform="rotate(-30 124.962 -145.406)">
<circle cx="0" cy="0" r="8">
<animateTransform id="c" attributeName="transform" dur="0.2s" type="translate" values="0 0; 14 0; 0 0" begin="b.end"/>
</circle>
</g>
<g transform="rotate(30 -98.962 205.406)">
<circle cx="0" cy="0" r="8">
<animateTransform id="d" attributeName="transform" dur="0.2s" type="translate" values="0 0; 14 0; 0 0" begin="c.end"/>
</circle>
</g>
<g transform="rotate(90 -17 77)">
<circle cx="0" cy="0" r="8">
<animateTransform id="e" attributeName="transform" dur="0.2s" type="translate" values="0 0; 14 0; 0 0" begin="d.end-0.02s"/>
</circle>
</g>
<g transform="rotate(150 4.962 42.594)">
<circle cx="0" cy="0" r="8">
<animateTransform id="f" attributeName="transform" dur="0.2s" type="translate" values="0 0; 14 0; 0 0" begin="e.end"/>
</circle>
</g>
<g transform="rotate(-150 21.038 17.406)">
<circle cx="0" cy="0" r="8">
<animateTransform id="a" attributeName="transform" dur="0.2s" type="translate" values="0 0; 14 0; 0 0" begin="f.end"/>
</circle>
</g>
</svg>