<!doctype html>
<head>
<title>Sapin JS</title>
</head>
<svg width="400" height="400" style="border:1px solid darkblue" id="SVGcard">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="black"/>
<stop offset="50%" stop-color="darkblue"/>
<stop offset="100%" stop-color="royalblue"/>
</linearGradient>
<g id="flake" transform="scale(0.05)">
<g>
<path d="m230 215L230 145,175 115,190 85,230 105,235 55,265 50,270 100,305 80,325 115,270 145,265 215,335 180,330 115,365 120,370 160,410 135,435 170,390 195,425 215,405 250,350 215,290 250,355 290,410 260,425 285,390 310,430 335,415 370,370 340,370 390,330 385,330 320,270 290,275 355,325 390,310 425,270 400,270 450,230 450,235 410,195 420,175 390,230 360,230 290,170 325,170 380,130 385,135 340,90 360,70 330,115 315,80 290,95 255,140 290,215 250,145 210,90 250,75 215,110 195,70 165,85 135,130 160,130 120,165 120,170 185z" fill="white" stroke="none"/>
<animateTransform attributeType="xml" attributeName="transform" type="rotate" values="0 25 25;360 25 25" dur="4s" repeatCount="indefinite"/>
</g>
</g>
<filter height="200%" width="200%" y="-50%" x="-50%" id="blur">
<feGaussianBlur stdDeviation="2" in="SourceGraphic"/>
</filter>
<animate id="ani" attributeName="r" begin="on.mousedown" dur="6s" fill="freeze" values="0;10"/>
</defs>
<rect width="400" height="400" fill="url(#grad1)""/>
<path d="m170 360L170 340,90 340,140 250,110 250,160 160,130 160,200 40,270 160,240 160,290 250,260 250,310 340,230 340,230 360z" fill="black">
<animate attributeName="fill" begin="on.mousedown" dur="6s" fill="freeze" values="black;darkgreen"/>
</path>
<rect width="400" height="40" y="360" fill="#fff"/>
<g filter="url(#blur)">
<circle cx="195" cy="075" r="0" fill="black" id="boule00">
<animate attributeName="r" begin="on.mousedown" dur="6s" fill="freeze" values="0;10"/>
</circle>
<circle cx="225" cy="095" r="0" fill="black" id="boule01">
<animate attributeName="r" begin="on.mousedown" dur="6s" fill="freeze" values="0;10"/>
</circle>
<circle cx="165" cy="115" r="0" fill="black" id="boule02">
<animate attributeName="r" begin="on.mousedown" dur="6s" fill="freeze" values="0;10"/>
</circle>
<circle cx="210" cy="130" r="0" fill="black" id="boule03">
<animate attributeName="r" begin="on.mousedown" dur="6s" fill="freeze" values="0;10"/>
</circle>
<circle cx="155" cy="175" r="0" fill="black" id="boule04">
<animate attributeName="r" begin="on.mousedown" dur="6s" fill="freeze" values="0;10"/>
</circle>
<circle cx="245" cy="190" r="0" fill="black" id="boule05">
<animate attributeName="r" begin="on.mousedown" dur="6s" fill="freeze" values="0;10"/>
</circle>
<circle cx="200" cy="215" r="0" fill="black" id="boule06">
<animate attributeName="r" begin="on.mousedown" dur="6s" fill="freeze" values="0;10"/>
</circle>
<circle cx="130" cy="245" r="0" fill="black" id="boule07">
<animate attributeName="r" begin="on.mousedown" dur="6s" fill="freeze" values="0;10"/>
</circle>
<circle cx="260" cy="235" r="0" fill="black" id="boule08">
<animate attributeName="r" begin="on.mousedown" dur="6s" fill="freeze" values="0;10"/>
</circle>
<circle cx="245" cy="290" r="0" fill="black" id="boule09">
<animate attributeName="r" begin="on.mousedown" dur="6s" fill="freeze" values="0;10"/>
</circle>
<circle cx="175" cy="270" r="0" fill="black" id="boule010">
<animate attributeName="r" begin="on.mousedown" dur="6s" fill="freeze" values="0;10"/>
</circle>
<circle cx="120" cy="295" r="0" fill="black" id="boule011">
<animate attributeName="r" begin="on.mousedown" dur="6s" fill="freeze" values="0;10"/>
</circle>
<circle cx="160" cy="315" r="0" fill="black" id="boule012">
<animate attributeName="r" begin="on.mousedown" dur="6s" fill="freeze" values="0;10"/>
</circle>
<circle cx="280" cy="300" r="0" fill="black" id="boule013">
<animate attributeName="r" begin="on.mousedown" dur="6s" fill="freeze" values="0;10"/>
</circle>
<circle cx="250" cy="325" r="0" fill="black" id="boule014">
<animate attributeName="r" begin="on.mousedown" dur="6s" fill="freeze" values="0;10"/>
</circle>
</g>
<rect width="20" height="20" x="10" y="370" onclick="myON()" id="on"/>
</svg>
<script>
function myFunctionFall(){
for(var i=0;i<150;i++){
var cx=Math.floor(400*Math.random());
var cy=Math.floor(400*Math.random());
var r=Math.floor(2*Math.random())+2;
var d=Math.floor(8*Math.random())+8;
var d2=Math.floor(20*Math.random())+10;
var o=Math.random();
var x=Math.floor(20*Math.random())+10;
var circle1=document.createElementNS(SVGcard.namespaceURI, 'circle');
circle1.setAttributeNS(null,'cx', cx);
circle1.setAttributeNS(null,'cy', cy);
circle1.setAttributeNS(null,'r', r);
circle1.setAttributeNS(null,'fill', '#ffffff');
circle1.setAttributeNS(null,'opacity', o);
var animation1=document.createElementNS(SVGcard.namespaceURI,'animateMotion');
animation1.setAttribute('path','m0 -400L0 400');
animation1.setAttribute('begin','0s');
animation1.setAttribute('dur',d);
animation1.setAttribute('repeatCount', 'indefinite');
var animation2 = document.createElementNS(SVGcard.namespaceURI, 'animateMotion');
animation2.setAttribute('path','m0 0l'+x+' 0z');
animation2.setAttribute('begin','0s');
animation2.setAttribute('dur',d2);
animation2.setAttribute('repeatCount','indefinite');
var g1=document.createElementNS(SVGcard.namespaceURI,'g');
var g2=document.createElementNS(SVGcard.namespaceURI,'g');
g1.appendChild(animation1);
g1.appendChild(circle1);
g2.appendChild(animation2);
g2.appendChild(g1);
SVGcard.appendChild(g2);
}
for(var i = 0;i<20; i++) {
var fx=Math.floor(800*Math.random());
var fy=Math.floor(450*Math.random());
var d2=Math.floor(6*Math.random())+6;
var d3=Math.floor(2*Math.random())+2;
var o2=Math.random();
var g3=document.createElementNS(SVGcard.namespaceURI, 'g');
var animation3=document.createElementNS(SVGcard.namespaceURI, 'animateMotion');
animation3.setAttribute('path', 'm0 -450L0 450');
animation3.setAttribute('begin', '0s');
animation3.setAttribute('dur', d2);
animation3.setAttribute('repeatCount', 'indefinite');
var use1=document.createElementNS(SVGcard.namespaceURI, 'use');
use1.setAttributeNS(null, 'href', '#flake');
use1.setAttributeNS(null, 'opacity', o2);
use1.setAttributeNS(null, 'transform', 'translate('+fx+' '+fy+')');
g3.appendChild(animation3);
g3.appendChild(use1);
SVGcard.appendChild(g3);
}}
myFunctionFall();
function light(){
for(var i=0;i<15;i++){
document.getElementById("boule0"+i).setAttribute("fill","#"+Math.round(0xFFFFFF * Math.random()).toString(16));
}}
function myON(){
setInterval(light,1000);
}
</script>
