nothing: fireworms

jeudi 12 mai 2016

fireworms

<svg width="500" height="500" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

<title>Layer 1</title>
<rect id="svg_1" height="500" width="500" y="0" x="0" stroke-width="0" stroke="#000000" fill="#000000"/>
<g>
<image xlink:href="https://lh3.googleusercontent.com/-h1n6sbgldE0/VzSSPufYIWI/AAAAAAAAceQ/cKGbcvKCng8jVQeh0IktkRzoxOcA5NX9QCCo/s100/flake.png" id="svg_2" height="600" width="600" y="-50" x="-50">
<animateTransform attributeName="transform" attributetype="xml" type="rotate" values="0 300 300; 360 300 300" dur="40s" repeatCount="indefinite"/>
<animate attributename="opacity" values="0;1;0" dur="2s" begin="0s" repeatcount="indefinite"/>
</image>
<image xlink:href="https://lh3.googleusercontent.com/-h1n6sbgldE0/VzSSPufYIWI/AAAAAAAAceQ/cKGbcvKCng8jVQeh0IktkRzoxOcA5NX9QCCo/s100/flake.png" id="svg_2" height="600" width="600" y="-50" x="-50">
<animateTransform attributeName="transform" attributetype="xml" type="rotate" values="0 350 300; 360 350 300" dur="20s" repeatCount="indefinite"/>
<animate attributename="opacity" values="1;0;1" dur="2s" begin="0s" repeatcount="indefinite"/>
</image>
<image xlink:href="https://lh3.googleusercontent.com/-h1n6sbgldE0/VzSSPufYIWI/AAAAAAAAceQ/cKGbcvKCng8jVQeh0IktkRzoxOcA5NX9QCCo/s100/flake.png" id="svg_2" height="600" width="600" y="-50" x="-50">
<animateTransform attributeName="transform" attributetype="xml" type="rotate" values="360 260 300; 0 300 300" dur="40s" repeatCount="indefinite"/>
<animate attributename="opacity" values="0;1;0" dur="2s" begin="0s" repeatcount="indefinite"/>
</image>
<image xlink:href="https://lh3.googleusercontent.com/-h1n6sbgldE0/VzSSPufYIWI/AAAAAAAAceQ/cKGbcvKCng8jVQeh0IktkRzoxOcA5NX9QCCo/s100/flake.png" id="svg_2" height="600" width="600" y="-50" x="-50">
<animateTransform attributeName="transform" attributetype="xml" type="rotate" values="360 350 300; 0 350 300" dur="20s" repeatCount="indefinite"/>
<animate attributename="opacity" values="1;0;1" dur="2s" begin="0s" repeatcount="indefinite"/>
</image>
<image xlink:href="https://lh3.googleusercontent.com/-h1n6sbgldE0/VzSSPufYIWI/AAAAAAAAceQ/cKGbcvKCng8jVQeh0IktkRzoxOcA5NX9QCCo/s100/flake.png" id="svg_2" height="600" width="600" y="-50" x="-50">
<animate attributename="x" values="-600;600" dur="60s" begin="0s" repeatcount="indefinite"/>
<animate attributename="opacity" values="1;0;1" dur="3s" begin="0s" repeatcount="indefinite"/>
</image>
<image xlink:href="https://lh3.googleusercontent.com/-h1n6sbgldE0/VzSSPufYIWI/AAAAAAAAceQ/cKGbcvKCng8jVQeh0IktkRzoxOcA5NX9QCCo/s100/flake.png" id="svg_2" height="600" width="600" y="-50" x="-50">
<animate attributename="x" values="600;-600" dur="60s" begin="0s" repeatcount="indefinite"/>
<animate attributename="opacity" values="1;0;1" dur="4s" begin="0s" repeatcount="indefinite"/>
</image>
<animateTransform attributeName="transform" type="scale" values="1;2;1" dur="20s" begin="0s" repeatCount="indefinite"/>
<animateMotion values="0,0;-600,-600;0,0" begin="0s" dur="20s" repeatcount="indefinite"></animateMotion>
</g>
<g>
<image xlink:href="https://lh3.googleusercontent.com/-h1n6sbgldE0/VzSSPufYIWI/AAAAAAAAceQ/cKGbcvKCng8jVQeh0IktkRzoxOcA5NX9QCCo/s100/flake.png" id="svg_2" height="600" width="600" y="-50" x="-50">
<animateTransform attributeName="transform" attributetype="xml" type="rotate" values="0 300 300; 360 300 300" dur="40s" repeatCount="indefinite"/>
<animate attributename="opacity" values="0;1;0" dur="2s" begin="0s" repeatcount="indefinite"/>
</image>
<image xlink:href="https://lh3.googleusercontent.com/-h1n6sbgldE0/VzSSPufYIWI/AAAAAAAAceQ/cKGbcvKCng8jVQeh0IktkRzoxOcA5NX9QCCo/s100/flake.png" id="svg_2" height="600" width="600" y="-50" x="-50">
<animateTransform attributeName="transform" attributetype="xml" type="rotate" values="0 350 300; 360 350 300" dur="20s" repeatCount="indefinite"/>
<animate attributename="opacity" values="1;0;1" dur="2s" begin="0s" repeatcount="indefinite"/>
</image>
<image xlink:href="https://lh3.googleusercontent.com/-h1n6sbgldE0/VzSSPufYIWI/AAAAAAAAceQ/cKGbcvKCng8jVQeh0IktkRzoxOcA5NX9QCCo/s100/flake.png" id="svg_2" height="600" width="600" y="-50" x="-50">
<animateTransform attributeName="transform" attributetype="xml" type="rotate" values="360 260 300; 0 300 300" dur="40s" repeatCount="indefinite"/>
<animate attributename="opacity" values="0;1;0" dur="2s" begin="0s" repeatcount="indefinite"/>
</image>
<image xlink:href="https://lh3.googleusercontent.com/-h1n6sbgldE0/VzSSPufYIWI/AAAAAAAAceQ/cKGbcvKCng8jVQeh0IktkRzoxOcA5NX9QCCo/s100/flake.png" id="svg_2" height="600" width="600" y="-50" x="-50">
<animateTransform attributeName="transform" attributetype="xml" type="rotate" values="360 350 300; 0 350 300" dur="20s" repeatCount="indefinite"/>
<animate attributename="opacity" values="1;0;1" dur="2s" begin="0s" repeatcount="indefinite"/>
</image>
<image xlink:href="https://lh3.googleusercontent.com/-h1n6sbgldE0/VzSSPufYIWI/AAAAAAAAceQ/cKGbcvKCng8jVQeh0IktkRzoxOcA5NX9QCCo/s100/flake.png" id="svg_2" height="600" width="600" y="-50" x="-50">
<animate attributename="x" values="-600;600" dur="60s" begin="0s" repeatcount="indefinite"/>
<animate attributename="opacity" values="1;0;1" dur="3s" begin="0s" repeatcount="indefinite"/>
</image>
<image xlink:href="https://lh3.googleusercontent.com/-h1n6sbgldE0/VzSSPufYIWI/AAAAAAAAceQ/cKGbcvKCng8jVQeh0IktkRzoxOcA5NX9QCCo/s100/flake.png" id="svg_2" height="600" width="600" y="-50" x="-50">
<animate attributename="x" values="600;-600" dur="60s" begin="0s" repeatcount="indefinite"/>
<animate attributename="opacity" values="1;0;1" dur="4s" begin="0s" repeatcount="indefinite"/>
</image>
</g>
<rect id="blacksq" height="500" width="500" y="0" x="0" stroke-width="0" stroke="#000000" fill="#000000">
<animate attributename="opacity" values="1;0;0;0;0;0;1" dur="120s" begin="blacksq.mousedown"/>
</rect>
</svg>