synchro

<svg width="400" height="400">
<rect width="400" height="400" x="000" y="000" fill="#000000" />
<rect width="300" height="300" x="050" y="050" fill="#ffffff" />
<rect width="200" height="200" x="100" y="100" fill="#000000" />
<rect width="100" height="100" x="150" y="150" fill="#ffffff" />
<symbol id="c">
<circle cx="25" cy="25" r="20"/>
</symbol>
<use xlink:href="#c" fill="#ffff00" opacity="0.8">
<animatemotion values="000,000;350,000" fill="freeze" dur="4s" id="1" begin="0.end"/>
<animatemotion values="350,000;350,350" fill="freeze" dur="4s" id="2" begin="1.end"/>
<animatemotion values="350,350;000,350" fill="freeze" dur="4s" id="3" begin="2.end"/>
<animatemotion values="000,350;000,000" fill="freeze" dur="4s" id="4" begin="3.end"/>
</use>
<use xlink:href="#c" fill="#ff00ff" opacity="0.8">
<animatemotion values="0,0;050,050" fill="freeze" dur="4s" id="0" begin="button.mousedown"/>
<animatemotion values="050,050;300,050" fill="freeze" dur="4s" id="1" begin="0.end"/>
<animatemotion values="300,050;300,300" fill="freeze" dur="4s" id="2" begin="1.end"/>
<animatemotion values="300,300;050,300" fill="freeze" dur="4s" id="3" begin="2.end"/>
<animatemotion values="050,300;050,050" fill="freeze" dur="4s" id="4" begin="3.end"/>
<animatemotion values="050,050;000,000" fill="freeze" dur="4s" id="5" begin="4.end"/>
</use>
<use xlink:href="#c" fill="#00ffff" opacity="0.8">
<animatemotion values="000,000;100,100" fill="freeze" dur="4s" id="0" begin="button.mousedown"/>
<animatemotion values="100,100;250,100" fill="freeze" dur="4s" id="1" begin="0.end"/>
<animatemotion values="250,100;250,250" fill="freeze" dur="4s" id="2" begin="1.end"/>
<animatemotion values="250,250;100,250" fill="freeze" dur="4s" id="3" begin="2.end"/>
<animatemotion values="100,250;100,100" fill="freeze" dur="4s" id="4" begin="3.end"/>
<animatemotion values="100,100;000,000" fill="freeze" dur="4s" id="5" begin="4.end"/>
</use>
<use xlink:href="#c" fill="#00ff00" opacity="0.8">
<animatemotion values="000,000;150,150" fill="freeze" dur="4s" id="0" begin="button.mousedown"/>
<animatemotion values="150,150;200,150" fill="freeze" dur="4s" id="1" begin="0.end"/>
<animatemotion values="200,150;200,200" fill="freeze" dur="4s" id="2" begin="1.end"/>
<animatemotion values="200,200;150,200" fill="freeze" dur="4s" id="3" begin="2.end"/>
<animatemotion values="150,200;150,150" fill="freeze" dur="4s" id="4" begin="3.end"/>
<animatemotion values="150,150;000,000" fill="freeze" dur="4s" id="5" begin="4.end"/>
</use>
<g transform="rotate(180 200 200)">
<use xlink:href="#c" fill="#ffff00" opacity="0.8">
<animatemotion values="000,000;350,000" fill="freeze" dur="4s" id="1" begin="0.end"/>
<animatemotion values="350,000;350,350" fill="freeze" dur="4s" id="2" begin="1.end"/>
<animatemotion values="350,350;000,350" fill="freeze" dur="4s" id="3" begin="2.end"/>
<animatemotion values="000,350;000,000" fill="freeze" dur="4s" id="4" begin="3.end"/>
</use>
<use xlink:href="#c" fill="#ff00ff" opacity="0.8">
<animatemotion values="0,0;050,050" fill="freeze" dur="4s" id="0" begin="button.mousedown"/>
<animatemotion values="050,050;300,050" fill="freeze" dur="4s" id="1" begin="0.end"/>
<animatemotion values="300,050;300,300" fill="freeze" dur="4s" id="2" begin="1.end"/>
<animatemotion values="300,300;050,300" fill="freeze" dur="4s" id="3" begin="2.end"/>
<animatemotion values="050,300;050,050" fill="freeze" dur="4s" id="4" begin="3.end"/>
<animatemotion values="050,050;000,000" fill="freeze" dur="4s" id="5" begin="4.end"/>
</use>
<use xlink:href="#c" fill="#00ffff" opacity="0.8">
<animatemotion values="000,000;100,100" fill="freeze" dur="4s" id="0" begin="button.mousedown"/>
<animatemotion values="100,100;250,100" fill="freeze" dur="4s" id="1" begin="0.end"/>
<animatemotion values="250,100;250,250" fill="freeze" dur="4s" id="2" begin="1.end"/>
<animatemotion values="250,250;100,250" fill="freeze" dur="4s" id="3" begin="2.end"/>
<animatemotion values="100,250;100,100" fill="freeze" dur="4s" id="4" begin="3.end"/>
<animatemotion values="100,100;000,000" fill="freeze" dur="4s" id="5" begin="4.end"/>
</use>
<use xlink:href="#c" fill="#00ff00" opacity="0.8">
<animatemotion values="000,000;150,150" fill="freeze" dur="4s" id="0" begin="button.mousedown"/>
<animatemotion values="150,150;200,150" fill="freeze" dur="4s" id="1" begin="0.end"/>
<animatemotion values="200,150;200,200" fill="freeze" dur="4s" id="2" begin="1.end"/>
<animatemotion values="200,200;150,200" fill="freeze" dur="4s" id="3" begin="2.end"/>
<animatemotion values="150,200;150,150" fill="freeze" dur="4s" id="4" begin="3.end"/>
<animatemotion values="150,150;000,000" fill="freeze" dur="4s" id="5" begin="4.end"/>
</use>
</g>
<g transform="rotate(90 200 200)">
<use xlink:href="#c" fill="#ffff00" opacity="0.8">
<animatemotion values="000,000;350,000" fill="freeze" dur="4s" id="1" begin="0.end"/>
<animatemotion values="350,000;350,350" fill="freeze" dur="4s" id="2" begin="1.end"/>
<animatemotion values="350,350;000,350" fill="freeze" dur="4s" id="3" begin="2.end"/>
<animatemotion values="000,350;000,000" fill="freeze" dur="4s" id="4" begin="3.end"/>
</use>
<use xlink:href="#c" fill="#ff00ff" opacity="0.8">
<animatemotion values="0,0;050,050" fill="freeze" dur="4s" id="0" begin="button.mousedown"/>
<animatemotion values="050,050;300,050" fill="freeze" dur="4s" id="1" begin="0.end"/>
<animatemotion values="300,050;300,300" fill="freeze" dur="4s" id="2" begin="1.end"/>
<animatemotion values="300,300;050,300" fill="freeze" dur="4s" id="3" begin="2.end"/>
<animatemotion values="050,300;050,050" fill="freeze" dur="4s" id="4" begin="3.end"/>
<animatemotion values="050,050;000,000" fill="freeze" dur="4s" id="5" begin="4.end"/>
</use>
<use xlink:href="#c" fill="#00ffff" opacity="0.8">
<animatemotion values="000,000;100,100" fill="freeze" dur="4s" id="0" begin="button.mousedown"/>
<animatemotion values="100,100;250,100" fill="freeze" dur="4s" id="1" begin="0.end"/>
<animatemotion values="250,100;250,250" fill="freeze" dur="4s" id="2" begin="1.end"/>
<animatemotion values="250,250;100,250" fill="freeze" dur="4s" id="3" begin="2.end"/>
<animatemotion values="100,250;100,100" fill="freeze" dur="4s" id="4" begin="3.end"/>
<animatemotion values="100,100;000,000" fill="freeze" dur="4s" id="5" begin="4.end"/>
</use>
<use xlink:href="#c" fill="#00ff00" opacity="0.8">
<animatemotion values="000,000;150,150" fill="freeze" dur="4s" id="0" begin="button.mousedown"/>
<animatemotion values="150,150;200,150" fill="freeze" dur="4s" id="1" begin="0.end"/>
<animatemotion values="200,150;200,200" fill="freeze" dur="4s" id="2" begin="1.end"/>
<animatemotion values="200,200;150,200" fill="freeze" dur="4s" id="3" begin="2.end"/>
<animatemotion values="150,200;150,150" fill="freeze" dur="4s" id="4" begin="3.end"/>
<animatemotion values="150,150;000,000" fill="freeze" dur="4s" id="5" begin="4.end"/>
</use>
</g>
<g transform="rotate(270 200 200)">
<use xlink:href="#c" fill="#ffff00" opacity="0.8">
<animatemotion values="000,000;350,000" fill="freeze" dur="4s" id="1" begin="0.end"/>
<animatemotion values="350,000;350,350" fill="freeze" dur="4s" id="2" begin="1.end"/>
<animatemotion values="350,350;000,350" fill="freeze" dur="4s" id="3" begin="2.end"/>
<animatemotion values="000,350;000,000" fill="freeze" dur="4s" id="4" begin="3.end"/>
</use>
<use xlink:href="#c" fill="#ff00ff" opacity="0.8">
<animatemotion values="0,0;050,050" fill="freeze" dur="4s" id="0" begin="button.mousedown"/>
<animatemotion values="050,050;300,050" fill="freeze" dur="4s" id="1" begin="0.end"/>
<animatemotion values="300,050;300,300" fill="freeze" dur="4s" id="2" begin="1.end"/>
<animatemotion values="300,300;050,300" fill="freeze" dur="4s" id="3" begin="2.end"/>
<animatemotion values="050,300;050,050" fill="freeze" dur="4s" id="4" begin="3.end"/>
<animatemotion values="050,050;000,000" fill="freeze" dur="4s" id="5" begin="4.end"/>
</use>
<use xlink:href="#c" fill="#00ffff" opacity="0.8">
<animatemotion values="000,000;100,100" fill="freeze" dur="4s" id="0" begin="button.mousedown"/>
<animatemotion values="100,100;250,100" fill="freeze" dur="4s" id="1" begin="0.end"/>
<animatemotion values="250,100;250,250" fill="freeze" dur="4s" id="2" begin="1.end"/>
<animatemotion values="250,250;100,250" fill="freeze" dur="4s" id="3" begin="2.end"/>
<animatemotion values="100,250;100,100" fill="freeze" dur="4s" id="4" begin="3.end"/>
<animatemotion values="100,100;000,000" fill="freeze" dur="4s" id="5" begin="4.end"/>
</use>
<use xlink:href="#c" fill="#00ff00" opacity="0.8">
<animatemotion values="000,000;150,150" fill="freeze" dur="4s" id="0" begin="button.mousedown"/>
<animatemotion values="150,150;200,150" fill="freeze" dur="4s" id="1" begin="0.end"/>
<animatemotion values="200,150;200,200" fill="freeze" dur="4s" id="2" begin="1.end"/>
<animatemotion values="200,200;150,200" fill="freeze" dur="4s" id="3" begin="2.end"/>
<animatemotion values="150,200;150,150" fill="freeze" dur="4s" id="4" begin="3.end"/>
<animatemotion values="150,150;000,000" fill="freeze" dur="4s" id="5" begin="4.end"/>
</use>
</g>
<rect width="400" height="400" x="0" y="0" fill="#ffffff" opacity="0" id="button"/>
</svg>