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>