samedi 7 avril 2018

grid



<svg width="400" height="400">
<defs>
<mask id="msk">
<g>
<rect width="400" height="400" fill="white"/>
<circle cx="200" cy="200" r="200"/>
</g>
</mask>
</defs>
<rect width="400" height="400" x="0" y="0" fill="royalblue"/>
<g>
<path stroke="blue" stroke-width="50" fill="none" d="m25 0L25 400" stroke-dasharray="5" stroke-dashoffset="0">
<animate attributename="stroke-dashoffset" begin="0s" repeatcount="indefinite" dur="4s" values="0;-50"/>
</path>
<path stroke="blue" stroke-width="50" fill="none" d="m50 375L400 375" stroke-dasharray="5" stroke-dashoffset="0">
<animate attributename="stroke-dashoffset" begin="0s" repeatcount="indefinite" dur="4s" values="0;-50"/>
</path>
<path stroke="blue" stroke-width="50" fill="none" d="m375 350L375 0" stroke-dasharray="5" stroke-dashoffset="0">
<animate attributename="stroke-dashoffset" begin="0s" repeatcount="indefinite" dur="4s" values="0;-50"/>
</path>
<path stroke="blue" stroke-width="50" fill="none" d="m350 25L50 25" stroke-dasharray="5" stroke-dashoffset="0">
<animate attributename="stroke-dashoffset" begin="0s" repeatcount="indefinite" dur="4s" values="0;-50"/>
</path>
<path stroke="blue" stroke-width="50" fill="none" d="m75 50L75 350" stroke-dasharray="5" stroke-dashoffset="0">
<animate attributename="stroke-dashoffset" begin="0s" repeatcount="indefinite" dur="4s" values="0;50"/>
</path>
<path stroke="blue" stroke-width="50" fill="none" d="m100 325L350 325" stroke-dasharray="5" stroke-dashoffset="0">
<animate attributename="stroke-dashoffset" begin="0s" repeatcount="indefinite" dur="4s" values="0;50"/>
</path>
<path stroke="blue" stroke-width="50" fill="none" d="m325 300L325 50" stroke-dasharray="5" stroke-dashoffset="0">
<animate attributename="stroke-dashoffset" begin="0s" repeatcount="indefinite" dur="4s" values="0;50"/>
</path>
<path stroke="blue" stroke-width="50" fill="none" d="m300 75L100 75" stroke-dasharray="5" stroke-dashoffset="0">
<animate attributename="stroke-dashoffset" begin="0s" repeatcount="indefinite" dur="4s" values="0;50"/>
</path>
<path stroke="blue" stroke-width="50" fill="none" d="m125 100L125 300" stroke-dasharray="5" stroke-dashoffset="0">
<animate attributename="stroke-dashoffset" begin="0s" repeatcount="indefinite" dur="4s" values="0;-50"/>
</path>
<path stroke="blue" stroke-width="50" fill="none" d="m150 275L300 275" stroke-dasharray="5" stroke-dashoffset="0">
<animate attributename="stroke-dashoffset" begin="0s" repeatcount="indefinite" dur="4s" values="0;-50"/>
</path>
<path stroke="blue" stroke-width="50" fill="none" d="m275 250L275 100" stroke-dasharray="5" stroke-dashoffset="0">
<animate attributename="stroke-dashoffset" begin="0s" repeatcount="indefinite" dur="4s" values="0;-50"/>
</path>
<path stroke="blue" stroke-width="50" fill="none" d="m250 125L150 125" stroke-dasharray="5" stroke-dashoffset="0">
<animate attributename="stroke-dashoffset" begin="0s" repeatcount="indefinite" dur="4s" values="0;-50"/>
</path>
<path stroke="blue" stroke-width="50" fill="none" d="m175 150L175 250" stroke-dasharray="5" stroke-dashoffset="0">
<animate attributename="stroke-dashoffset" begin="0s" repeatcount="indefinite" dur="4s" values="0;50"/>
</path>
<path stroke="blue" stroke-width="50" fill="none" d="m200 225L250 225" stroke-dasharray="5" stroke-dashoffset="0">
<animate attributename="stroke-dashoffset" begin="0s" repeatcount="indefinite" dur="4s" values="0;50"/>
</path>
<path stroke="blue" stroke-width="50" fill="none" d="m225 200L225 150" stroke-dasharray="5" stroke-dashoffset="0">
<animate attributename="stroke-dashoffset" begin="0s" repeatcount="indefinite" dur="4s" values="0;50"/>
</path>
<animateTransform attributeName="transform" attributetype="xml" type="rotate" values="0 200 200;360 200 200" begin="0s" dur="24s" repeatCount="indefinite"/>
</g>
<g opacity="0.5">
<path stroke="white" stroke-width="500" fill="none" d="m200 0L200 400" stroke-dasharray="1,50" stroke-dashoffset="0"/>
<path stroke="white" stroke-width="500" fill="none" d="m0 200L400 200" stroke-dasharray="1,50" stroke-dashoffset="0"/>
<animateTransform attributeName="transform" attributetype="xml" type="rotate" values="0 200 200;-360 200 200" begin="0s" dur="24s" repeatCount="indefinite"/>
</g>
<rect width="400" height="400" mask="url(#msk)" fill="white"/>
</svg>