décalages

<svg width="400" height="400">
<rect width="400" height="400"/>

<circle cx="200" cy="200" r="75" fill="none" stroke-width="150" stroke-dasharray="471" stroke-dashoffset="0" stroke="darkred" transform="rotate(270 200 200)">
<animate attributename="stroke-dashoffset" begin="0s" dur="4.0s" repeatcount="indefinite" values="471;0"/>
</circle>

<circle cx="200" cy="200" r="75" fill="none" stroke-width="150" stroke-dasharray="471" stroke-dashoffset="0" stroke="red" transform="rotate(270 200 200)">
<animate attributename="stroke-dashoffset" begin="0s" dur="4.5s" repeatcount="indefinite" values="471;0"/>
</circle>

<circle cx="200" cy="200" r="75" fill="none" stroke-width="150" stroke-dasharray="471" stroke-dashoffset="0" stroke="orange" transform="rotate(270 200 200)">
<animate attributename="stroke-dashoffset" begin="0s" dur="5.0s" repeatcount="indefinite" values="471;0"/>
</circle>

<circle cx="200" cy="200" r="75" fill="none" stroke-width="150" stroke-dasharray="471" stroke-dashoffset="0" stroke="yellow" transform="rotate(270 200 200)">
<animate attributename="stroke-dashoffset" begin="0s" dur="5.5s" repeatcount="indefinite" values="471;0"/>
</circle>

<circle cx="200" cy="200" r="75" fill="none" stroke-width="150" stroke-dasharray="471" stroke-dashoffset="0" stroke="white" transform="rotate(270 200 200)">
<animate attributename="stroke-dashoffset" begin="0s" dur="6.0s" repeatcount="indefinite" values="471;0"/>
</circle>

</svg>