samedi 2 juillet 2016
Myriade
<svg width="4cm" height="4cm" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" version="1.1">
<g transform="rotate(45 200 200)">
<rect x="0" y="0" width="400" height="400" fill="none">
<animate attributename="stroke-width" begin="0s" dur="10s" values="75;100;75" repeatcount="indefinite"/>
<animate attributename="stroke" begin="0s" dur="10s" values="orange;green;blue;orange" repeatcount="indefinite"/>
</rect>
<rect x="0" y="0" width="400" height="400" fill="none" stroke="white">
<animate attributename="stroke-width" begin="0s" dur="10s" values="25;50;25" repeatcount="indefinite"/>
<animate attributename="opacity" begin="0s" dur="10s" values="1;0;1" repeatcount="indefinite"/>
</rect>
<line x1="0" y1="0" x2="400" y2="400">
<animate attributename="stroke-width" begin="0s" dur="10s" values="75;100;75" repeatcount="indefinite"/>
<animate attributename="stroke" begin="0s" dur="10s" values="orange;green;blue;orange" repeatcount="indefinite"/>
<animateTransform attributeName="transform" attribuTetype="xml" type="rotate" values="360 200 200;0 200 200" dur="20s" repeatcount="indefinite"/>
</line>
<line x1="0" y1="400" x2="400" y2="0">
<animate attributename="stroke-width" begin="0s" dur="10s" values="75;100;75" repeatcount="indefinite"/>
<animate attributename="stroke" begin="0s" dur="10s" values="orange;green;blue;orange" repeatcount="indefinite"/>
<animateTransform attributeName="transform" attribuTetype="xml" type="rotate" values="360 200 200;0 200 200" dur="20s" repeatcount="indefinite"/>
</line>
<line x1="0" y1="0" x2="400" y2="400" stroke="white">
<animate attributename="stroke-width" begin="0s" dur="10s" values="25;50;25" repeatcount="indefinite"/>
<animateTransform attributeName="transform" attribuTetype="xml" type="rotate" values="360 200 200;0 200 200" dur="20s" repeatcount="indefinite"/>
<animate attributename="opacity" begin="0s" dur="10s" values="1;0;1" repeatcount="indefinite"/>
</line>
<line x1="0" y1="400" x2="400" y2="0" stroke="white">
<animate attributename="stroke-width" begin="0s" dur="10s" values="25;50;25" repeatcount="indefinite"/>
<animateTransform attributeName="transform" attribuTetype="xml" type="rotate" values="360 200 200;0 200 200" dur="20s" repeatcount="indefinite"/>
<animate attributename="opacity" begin="0s" dur="10s" values="1;0;1" repeatcount="indefinite"/>
</line>
<g>
<line x1="0" y1="0" x2="400" y2="400" stroke="white">
<animate attributename="stroke-width" begin="0s" dur="10s" values="25;50;25" repeatcount="indefinite"/>
<animate attributename="opacity" begin="0s" dur="10s" values="1;0;1" repeatcount="indefinite"/>
</line>
<line x1="0" y1="400" x2="400" y2="0" stroke="white">
<animate attributename="stroke-width" begin="0s" dur="10s" values="25;50;25" repeatcount="indefinite"/>
<animate attributename="opacity" begin="0s" dur="10s" values="1;0;1" repeatcount="indefinite"/>
</line>
<animateTransform attributeName="transform" attribuTetype="xml" type="rotate" values="0 200 200;360 200 200" dur="20s" repeatcount="indefinite"/>
</g>
<g>
<line x1="0" y1="0" x2="400" y2="400" stroke="white">
<animate attributename="stroke-width" begin="0s" dur="10s" values="25;50;25" repeatcount="indefinite"/>
<animate attributename="opacity" begin="0s" dur="10s" values="1;0;1" repeatcount="indefinite"/>
</line>
<line x1="0" y1="400" x2="400" y2="0" stroke="white">
<animate attributename="stroke-width" begin="0s" dur="10s" values="25;50;25" repeatcount="indefinite"/>
<animate attributename="opacity" begin="0s" dur="10s" values="1;0;1" repeatcount="indefinite"/>
</line>
</g>
<animateTransform attributeName="transform" attribuTetype="xml" type="rotate" values="180 200 200;360 200 200" dur="20s" repeatcount="indefinite"/>
</g>
</svg>
-
Animation attribute (width, opacity, etc.) <animate attributeName="?" begin="0s" dur="6s" repeatCount...
-
Generate