Serf creux

<svg width="600" height="600" viewbox="0 0">

<g>
<g>
<circle cx="0" cy="0" r="600" fill="#000000" opacity="0.25">
<animate attributename="r" values="800;0;800" begin="0s" repeatcount="indefinite" dur="24s"/>
</circle>
<circle cx="600" cy="0" r="600" fill="#000000" opacity="0.25">
<animate attributename="r" values="800;0;800" begin="0s" repeatcount="indefinite" dur="24s"/>
</circle>
<circle cx="600" cy="600" r="600" fill="#000000" opacity="0.25">
<animate attributename="r" values="800;0;800" begin="0s" repeatcount="indefinite" dur="24s"/>
</circle>
<circle cx="0" cy="600" r="600" fill="#000000" opacity="0.25">
<animate attributename="r" values="800;0;800" begin="0s" repeatcount="indefinite" dur="24s"/>
</circle>
<animateTransform attributename="transform" type="rotate" begin="0s" dur="24s" repeatcount="indefinite" values="0 300 300;360 300 300"/>
</g>
<g>
<circle cx="300" cy="0" r="300" fill="#ffffff" opacity="0.25">
<animate attributename="r" values="300;0;300" begin="0s" repeatcount="indefinite" dur="24s"/>
</circle>
<circle cx="300" cy="600" r="300" fill="#ffffff" opacity="0.25">
<animate attributename="r" values="300;0;300" begin="0s" repeatcount="indefinite" dur="24s"/>
</circle>
<circle cx="0" cy="300" r="300" fill="#ffffff" opacity="0.25">
<animate attributename="r" values="300;0;300" begin="0s" repeatcount="indefinite" dur="24s"/>
</circle>
<circle cx="600" cy="300" r="300" fill="#ffffff" opacity="0.25">
<animate attributename="r" values="300;0;300" begin="0s" repeatcount="indefinite" dur="24s"/>
</circle>
<animateTransform attributename="transform" type="rotate" begin="0s" dur="24s" repeatcount="indefinite" values="0 300 300;-360 300 300"/>
</g>
<g>
<circle cx="300" cy="0" r="300" fill="#ffffff" opacity="0.25">
<animate attributename="r" values="0;300;0" begin="0s" repeatcount="indefinite" dur="24s"/>
</circle>
<circle cx="300" cy="600" r="300" fill="#ffffff" opacity="0.25">
<animate attributename="r" values="0;300;0" begin="0s" repeatcount="indefinite" dur="24s"/>
</circle>
<circle cx="0" cy="300" r="300" fill="#ffffff" opacity="0.25">
<animate attributename="r" values="0;300;0" begin="0s" repeatcount="indefinite" dur="24s"/>
</circle>
<circle cx="600" cy="300" r="300" fill="#ffffff" opacity="0.25">
<animate attributename="r" values="0;300;0" begin="0s" repeatcount="indefinite" dur="24s"/>
</circle>
<animateTransform attributename="transform" type="rotate" begin="0s" dur="24s" repeatcount="indefinite" values="0 300 300;360 300 300"/>

</g>
<g>
<circle cx="0" cy="0" r="600" fill="#000000" opacity="0.25">
<animate attributename="r" values="0;800;0" begin="0s" repeatcount="indefinite" dur="24s"/>
</circle>
<circle cx="600" cy="0" r="600" fill="#000000" opacity="0.25">
<animate attributename="r" values="0;800;0" begin="0s" repeatcount="indefinite" dur="24s"/>
</circle>
<circle cx="600" cy="600" r="600" fill="#000000" opacity="0.25">
<animate attributename="r" values="0;800;0" begin="0s" repeatcount="indefinite" dur="24s"/>
</circle>
<circle cx="0" cy="600" r="600" fill="#000000" opacity="0.25">
<animate attributename="r" values="0;800;0" begin="0s" repeatcount="indefinite" dur="24s"/>
</circle>
<animateTransform attributename="transform" type="rotate" begin="0s" dur="24s" repeatcount="indefinite" values="0 300 300;360 300 300"/>
</g>
</g>
</svg>