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">
<!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAlho1OS7Cfgy470D0URhBkYIXNOi8Rq04H2t8TgONrAyHxXHmipRA2yQACvdKpdHMbCK1_cpjB5V52bjGmP5tGUJJCl5APCtqwM1HRQEVlh2A_Shgtr8_wxigCKDG6xqzi4FDP_mcNVet/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAlho1OS7Cfgy470D0URhBkYIXNOi8Rq04H2t8TgONrAyHxXHmipRA2yQACvdKpdHMbCK1_cpjB5V52bjGmP5tGUJJCl5APCtqwM1HRQEVlh2A_Shgtr8_wxigCKDG6xqzi4FDP_mcNVet/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAlho1OS7Cfgy470D0URhBkYIXNOi8Rq04H2t8TgONrAyHxXHmipRA2yQACvdKpdHMbCK1_cpjB5V52bjGmP5tGUJJCl5APCtqwM1HRQEVlh2A_Shgtr8_wxigCKDG6xqzi4FDP_mcNVet/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAlho1OS7Cfgy470D0URhBkYIXNOi8Rq04H2t8TgONrAyHxXHmipRA2yQACvdKpdHMbCK1_cpjB5V52bjGmP5tGUJJCl5APCtqwM1HRQEVlh2A_Shgtr8_wxigCKDG6xqzi4FDP_mcNVet/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAlho1OS7Cfgy470D0URhBkYIXNOi8Rq04H2t8TgONrAyHxXHmipRA2yQACvdKpdHMbCK1_cpjB5V52bjGmP5tGUJJCl5APCtqwM1HRQEVlh2A_Shgtr8_wxigCKDG6xqzi4FDP_mcNVet/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAlho1OS7Cfgy470D0URhBkYIXNOi8Rq04H2t8TgONrAyHxXHmipRA2yQACvdKpdHMbCK1_cpjB5V52bjGmP5tGUJJCl5APCtqwM1HRQEVlh2A_Shgtr8_wxigCKDG6xqzi4FDP_mcNVet/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAlho1OS7Cfgy470D0URhBkYIXNOi8Rq04H2t8TgONrAyHxXHmipRA2yQACvdKpdHMbCK1_cpjB5V52bjGmP5tGUJJCl5APCtqwM1HRQEVlh2A_Shgtr8_wxigCKDG6xqzi4FDP_mcNVet/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAlho1OS7Cfgy470D0URhBkYIXNOi8Rq04H2t8TgONrAyHxXHmipRA2yQACvdKpdHMbCK1_cpjB5V52bjGmP5tGUJJCl5APCtqwM1HRQEVlh2A_Shgtr8_wxigCKDG6xqzi4FDP_mcNVet/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAlho1OS7Cfgy470D0URhBkYIXNOi8Rq04H2t8TgONrAyHxXHmipRA2yQACvdKpdHMbCK1_cpjB5V52bjGmP5tGUJJCl5APCtqwM1HRQEVlh2A_Shgtr8_wxigCKDG6xqzi4FDP_mcNVet/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAlho1OS7Cfgy470D0URhBkYIXNOi8Rq04H2t8TgONrAyHxXHmipRA2yQACvdKpdHMbCK1_cpjB5V52bjGmP5tGUJJCl5APCtqwM1HRQEVlh2A_Shgtr8_wxigCKDG6xqzi4FDP_mcNVet/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAlho1OS7Cfgy470D0URhBkYIXNOi8Rq04H2t8TgONrAyHxXHmipRA2yQACvdKpdHMbCK1_cpjB5V52bjGmP5tGUJJCl5APCtqwM1HRQEVlh2A_Shgtr8_wxigCKDG6xqzi4FDP_mcNVet/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAlho1OS7Cfgy470D0URhBkYIXNOi8Rq04H2t8TgONrAyHxXHmipRA2yQACvdKpdHMbCK1_cpjB5V52bjGmP5tGUJJCl5APCtqwM1HRQEVlh2A_Shgtr8_wxigCKDG6xqzi4FDP_mcNVet/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>
