jeudi 26 avril 2018

Alignement


<svg width="400" height="400">
<rect width="400" height="400" x="0" y="0" fill="none" stroke-width="1" stroke="#000"/>
<g>
<path d="m200 0L200 200" fill="none" stroke-width="0.5" stroke="#000"/>
<animateTransform attributeName="transform" attributetype="xml" type="rotate" values="0 200 200;360 200 200" begin="0s" dur="60s" repeatCount="indefinite"/>
</g>
<g>
<path d="m200 400L200 200" fill="none" stroke-width="0.5" stroke="#000"/>
<animateTransform attributeName="transform" attributetype="xml" type="rotate" values="0 200 200;360 200 200" begin="0s" dur="60s" repeatCount="indefinite"/>
</g>
<g>
<path d="m0 0L400 0" fill="none" stroke-width="0.5" stroke="#000"/>
<animateMotion begin="0s" values="0,0;0,400" dur="60s" repeatcount="indefinite"/>
</g>
<g>
<path d="m0 400L400 400" fill="none" stroke-width="0.5" stroke="#000"/>
<animateMotion begin="0s" values="0,0;0,-400" dur="60s" repeatcount="indefinite"/>
</g>
<g>
<path d="m200 600L600 200" fill="none" stroke-width="0.5" stroke="#000"/>
<animateMotion begin="0s" values="0,0;-400,-400" dur="60s" repeatcount="indefinite"/>
</g>
<g>
<path d="m-200 200L200 -200" fill="none" stroke-width="0.5" stroke="#000"/>
<animateMotion begin="0s" values="0,0;400,400" dur="60s" repeatcount="indefinite"/>
</g>
<circle cx="200" cy="200" r="0" stroke-width="0.5" stroke="#000" fill="none">
<animate attributename="r" begin="0s" repeatcount="indefinite" dur="60s" values="0;200"/>
</circle>
<circle cx="200" cy="200" r="200" stroke-width="0.5" stroke="#000" fill="none">
<animate attributename="r" begin="0s" repeatcount="indefinite" dur="60s" values="200;0"/>
</circle>
</svg>