mardi 20 mars 2018
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>
-
Animation attribute (width, opacity, etc.) <animate attributeName="?" begin="0s" dur="6s" repeatCount...
-
Generate
-
<html lang="fr"> <head> <title>Eyes</title> <style> html,body{ height:100%; margin:0; } #left_eye{ t...