samedi 24 novembre 2018

<!doctype html>
<head>
<style>
html,body{
height:100%;
margin:0;
//overflow:hidden;
}
body{
font-family:arial;
font-size:12px;
background:#000;
}
p{
margin:4px;
color:#0f0;
}
path{
animation-name:draw;
animation-duration:1s;
}
@keyframes draw{
from {stroke-dasharray:0,2000;}
to {stroke-dasharray:2000;}
}
button{
color:#0f0;
background:#000;
border:1px solid #0f0;
}
input{
margin:4px;
color:#0f0;
background:#000;
border:1px solid #0f0;
}
</style>
<title>Path generator</title>
</head>
<body>
<svg width="2000" height="500" onmousedown="myFunctionE(event)" id="mySVG2" onmousemove="myFunctionP(event)">
<path d="m0 500L2000 500" stroke-width="2" stroke="#0f0" fill="none"/>
</svg>
<input/>
<p id="clicn">number of clicks : 0</p>
<p id="posi">X : 0 Y : 0</p>
<p id="result">current path coordinates : n/a</p>
<p id="fullp">full path : n/a</p>
<p id="butts"></p>
<script>
var coorXY=[];
var hcoorXY=[];
var firstXY=[];
var i=1;

function myFunctionE(){
var x1=event.clientX;
var y1=event.clientY;
var circ1=document.createElementNS(mySVG2.namespaceURI,"circle");
circ1.setAttributeNS(null,"cx",x1);
circ1.setAttributeNS(null,"cy",y1);
circ1.setAttributeNS(null,"r","2");
circ1.setAttributeNS(null,"fill","#ccc");
mySVG2.appendChild(circ1);
if(i>1){
var path1=document.createElementNS(mySVG2.namespaceURI,"path");
path1.setAttributeNS(null,"d","m"+x1+" "+y1+"L"+coorXY+"");
path1.setAttributeNS(null,"stroke-width","1");
path1.setAttributeNS(null,"stroke","#ccc");
path1.setAttributeNS(null,"fill","none");
mySVG2.appendChild(path1);
document.getElementById("result").innerHTML="path coordinates : m"+x1+" "+y1+"L"+coorXY;
}
document.getElementById("clicn").innerHTML="number of clicks : "+i;
i++;
if(i>2){
document.getElementById("butts").innerHTML="<button onclick=\"myFunctionGO()\">Launch</button> <button onclick=\"myFunctionRE()\">Reset</button>";
hcoorXY.push(x1+" "+y1);
document.getElementById("fullp").innerHTML="full path : "+firstXY+hcoorXY;
coorXY.shift();
}
coorXY.push(x1+" "+y1);
if(i==2){
firstXY.push("m"+x1+" "+y1+"L");
}}

function myFunctionP(){
var px=event.clientX;
var py=event.clientY;
document.getElementById("posi").innerHTML="X : "+px+" Y : "+py;
}

function myFunctionGO(){
var circ2=document.createElementNS(mySVG2.namespaceURI,"circle");
circ2.setAttributeNS(null,"cx","0");
circ2.setAttributeNS(null,"cy","0");
circ2.setAttributeNS(null,"r","4");
circ2.setAttributeNS(null,"fill","#0f0");
var anim1=document.createElementNS(mySVG2.namespaceURI,"animateMotion");
anim1.setAttributeNS(null,"path",firstXY+hcoorXY);
anim1.setAttributeNS(null,"begin","0s");
anim1.setAttributeNS(null,"dur",i+"s");
anim1.setAttributeNS(null,"repeatCount","indefinite");
anim1.setAttributeNS(null,"rotate","auto");
circ2.appendChild(anim1);
mySVG2.appendChild(circ2);
}

function myFunctionRE(){
coorXY=[];
hcoorXY=[];
firstXY=[];
i=1;
document.getElementById("clicn").innerHTML="number of clicks : 0";
document.getElementById("posi").innerHTML="X : 0 Y : 0";
document.getElementById("result").innerHTML="path coordinates : n/a";
document.getElementById("fullp").innerHTML="full path : n/a";
document.getElementById("butts").innerHTML="";
document.getElementById("mySVG2").innerHTML="<path d=\"m0 500L2000 500\" stroke-width=\"2\" stroke=\"#0f0\" fill=\"none\"/>";
}
</script>
</body>

mardi 20 novembre 2018

jeudi 15 novembre 2018

ghosts&snow

<svg width="1200" height="400" id="svgNeige">
<defs>
<filter height="200%" width="200%" y="-50%" x="-50%" id="blur">
<feGaussianBlur stdDeviation="3" in="SourceGraphic"/>
</filter>
</defs>
<rect width="1200" height="400" fill="midnightblue"/>
<path d="m612.3,152.1c4.92,6.71 3.93,22.7 -8.3,25.51c-5.66,1.3 -12.57,0.4 -16.79,-3.82c-7.01,-7.01 -6.59,-22.97 6.79,-27.26c6.64,-1.09 13.98,-0.32 18.3,5.57zm-129.46,16.9c0.88,3.34 2.18,9.51 -0.58,12.26c-2.08,2.09 -6.5,1.74 -9.26,1.74c-4.16,0.01 -17.59,0.93 -20.26,-1.74c-2.25,-2.25 -1.64,-6.44 -1.12,-9.26c1.47,-7.94 4.97,-16.36 12.38,-20.26c11.76,-2.73 16.34,7.71 18.84,17.26zm54.43,-1c1.02,3.37 2.86,9.39 0,12.26c-2.09,2.09 -6.52,1.74 -9.27,1.74c-4.01,0.01 -17.83,0.71 -20.57,-1.17c-3.15,-2.17 -2.28,-6.69 -1.53,-9.83c1.69,-7.1 4.43,-15.58 11.12,-19.26c13.15,-3.2 16.95,5.24 20.25,16.26zm366.03,7.1c4.92,6.71 3.93,22.7 -8.3,25.51c-5.66,1.3 -12.57,0.4 -16.79,-3.82c-7.01,-7.01 -6.59,-22.97 6.79,-27.26c6.64,-1.09 13.98,-0.32 18.3,5.57zm-593.4,2.55c6.77,5.16 7.81,18.86 1.71,24.96c-3.64,3.64 -8.66,4.61 -13.61,4.35c-10.73,-0.56 -14.26,-8.39 -13.98,-17.96c0.1,-3.49 0.5,-5.97 2.78,-8.79c2.11,-2.6 4.21,-3.43 7.2,-4.57c5.13,-1.03 11.51,-1.33 15.9,2.01zm395.36,8.09c1.96,1.95 1.73,5.69 1.74,8.26c0.02,4.16 1.16,15.36 -2.43,17.83c-1.92,1.31 -5.31,1.16 -7.57,1.17c-2.92,0.01 -8.09,0.44 -10.26,-1.74c-2.09,-2.08 -1.74,-6.5 -1.74,-9.26c-0.01,-5.49 -1.72,-13.69 3.23,-17.26c3.55,-0.94 14.31,-1.73 17.03,1zm73,0c1.96,1.95 1.73,5.69 1.74,8.26c0.02,4.16 1.16,15.36 -2.43,17.83c-1.92,1.31 -5.31,1.16 -7.57,1.17c-2.92,0.01 -8.09,0.44 -10.26,-1.74c-2.09,-2.08 -1.74,-6.5 -1.74,-9.26c-0.01,-5.49 -1.72,-13.69 3.23,-17.26c3.55,-0.94 14.31,-1.73 17.03,1zm-196.3,29.18c-1.62,-3.15 -1.45,-20.91 0,-23.71c3.73,-5.92 12.69,-5.45 17.04,1.79c4.5,-6.43 13.52,-9.04 17.83,-0.96c1.71,3.22 1.22,12.96 1.17,16.96c-0.04,2.36 0.06,5.46 -1.74,7.26c-2.24,2.24 -11.22,2.28 -13.99,1.02c-1.55,-0.71 -1.45,-1.1 -2.27,-2.36c0,0 -2,0 -2,0c-2.8,4.1 -14.01,4.68 -16.04,0zm-140.96,9.08c-0.05,-10.41 -3.47,-31.49 13,-29.89c13.04,1.27 10.02,19.63 10,28.89c0,2.16 0.14,5.85 -0.74,7.78c-1.07,2.33 -3.14,3.1 -5.26,4.22c2.3,1.22 3.22,1.61 4.55,4.06c2.28,4.21 1.52,19.47 1.45,24.94c-0.04,2.36 0.06,5.46 -1.74,7.26c-2.54,2.54 -16.98,2.54 -19.52,0c-2.09,-2.08 -1.74,-6.5 -1.74,-9.26c0,0 0,-14 0,-14c0.09,-6.78 0.72,-9.49 6,-14c-6.36,-1.44 -5.97,-4.16 -6,-10zm29,1c-0.06,-4.91 -0.73,-22.46 1.17,-25.9c1.43,-2.56 4.03,-4.08 6.83,-4.71c2.49,-0.56 5.63,-0.37 7.98,0.62c8.34,3.47 6.02,15.44 6.02,22.99c0,2.89 0.32,10.47 -0.74,12.78c-1.07,2.33 -3.14,3.1 -5.26,4.22c2.16,0.82 3.25,1.07 4.55,3.22c2.34,3.87 1.52,20.49 1.45,25.78c-0.04,2.36 0.06,5.46 -1.74,7.26c-2.24,2.24 -8.21,1.78 -11.26,1.74c-2.73,-0.04 -6.08,0.1 -7.83,-2.43c-1.2,-1.75 -1.14,-4.52 -1.17,-6.57c-0.07,-5.32 -0.83,-21.88 1.45,-25.79c1.19,-2.05 2.69,-2.91 4.55,-4.21c-5.84,-1.32 -5.92,-3.4 -6,-9zm28,0c-0.06,-4.34 -0.47,-20.92 0.74,-23.98c1.24,-3.17 4.07,-5.37 7.26,-6.37c5.2,-1.63 11.14,-0.04 13.26,5.37c1.21,3.07 0.8,20.55 0.74,24.98c-0.08,5.75 -0.28,6.66 -5,10c1.92,1.02 2.62,1.17 3.91,3.14c3.07,4.64 2.17,19.84 2.09,25.86c-0.04,2.36 0.06,5.46 -1.74,7.26c-2.54,2.54 -16.98,2.54 -19.52,0c-2.09,-2.08 -1.74,-6.5 -1.74,-9.26c0,0 0,-15 0,-15c0.09,-6.6 0.91,-8.69 6,-13c-5.84,-1.32 -5.92,-3.4 -6,-9zm29,0c-0.06,-4.91 -0.73,-22.46 1.17,-25.9c1.6,-2.87 4.67,-4.43 7.83,-4.89c15.65,-2.25 13,14.98 13,24.79c0,2.76 0.3,9.52 -0.74,11.78c-1.07,2.33 -3.14,3.1 -5.26,4.22c2.29,1.15 3.51,1.63 4.83,4.06c1.9,3.51 1.23,20.06 1.17,24.94c-0.04,2.73 0.1,6.08 -2.43,7.83c-2.71,1.86 -15.44,1.82 -17.83,-0.57c-1.8,-1.8 -1.7,-4.9 -1.74,-7.26c0,0 0,-18 0,-18c0.08,-6 0.55,-7.84 5,-12c-5.03,-1.94 -4.93,-3.93 -5,-9zm181,-8c2.26,0.01 5.65,-0.14 7.57,1.17c2.73,1.88 2.41,5.9 2.43,8.83c0,0 0,28 0,28c-0.01,2.57 0.22,6.31 -1.74,8.26c-2.08,2.09 -6.5,1.74 -9.26,1.74c0,0 -23,0 -23,0c-2.57,-0.01 -6.31,0.22 -8.26,-1.74c-2.09,-2.08 -1.74,-6.5 -1.74,-9.26c0,0 0,-21 0,-21c0,-5.17 -1.39,-11.93 3.23,-15.26c5.33,-1.41 24.09,-0.77 30.77,-0.74zm74,0c9.22,0.13 9.94,3.62 9.67,12c0,0 0,16.73 0,16.73c0.14,4.44 0.92,14.27 -2.4,17.53c-2.13,2.09 -6.48,1.74 -9.27,1.74c0,0 -23,0 -23,0c-2.57,-0.01 -6.31,0.22 -8.26,-1.74c-2.09,-2.08 -1.74,-6.5 -1.74,-9.26c0,0 0,-21 0,-21c0,-5.17 -1.39,-11.93 3.23,-15.26c5.18,-1.37 25.21,-0.83 31.77,-0.74zm95,0c2.43,0.04 5.4,-0.07 7.28,1.74c3.42,3.29 3.11,17.64 2.42,22.26c-0.3,2 -0.92,4.81 -2.42,6.26c-2.17,2.09 -6.45,1.74 -9.28,1.74c-3.8,0.01 -15.88,0.68 -18.57,-1.17c-2.9,-2 -2.42,-6.71 -2.43,-9.83c-0.01,-3.46 -0.43,-15.27 0.74,-17.77c0.81,-1.74 1.17,-1.54 2.49,-2.49c4.78,-1.27 14.46,-0.81 19.77,-0.74zm39,0c2.36,0.04 5.46,-0.06 7.26,1.74c1.96,1.95 1.73,5.69 1.74,8.26c0.02,4.14 0.92,17.6 -1.74,20.26c-2.08,2.09 -6.5,1.74 -9.26,1.74c-3.8,0.01 -15.88,0.68 -18.57,-1.17c-2.9,-2 -2.42,-6.71 -2.43,-9.83c-0.01,-3.46 -0.43,-15.27 0.74,-17.77c0.81,-1.74 1.17,-1.54 2.49,-2.49c4.78,-1.27 14.46,-0.81 19.77,-0.74zm-629,5c2.36,0.04 5.46,-0.06 7.26,1.74c1.96,1.95 1.73,5.69 1.74,8.26c0.02,4.14 0.92,17.6 -1.74,20.26c-2.08,2.09 -6.5,1.74 -9.26,1.74c-3.8,0.01 -15.88,0.68 -18.57,-1.17c-2.9,-2 -2.42,-6.71 -2.43,-9.83c-0.01,-3.46 -0.43,-15.27 0.74,-17.77c0.81,-1.74 1.17,-1.54 2.49,-2.49c4.78,-1.27 14.46,-0.81 19.77,-0.74zm37,0c3.16,0.02 7,-0.23 9.26,2.43c2.59,3.05 1.75,14.31 1.74,18.57c0,2.76 0.35,7.18 -1.74,9.26c-2.08,2.09 -6.5,1.74 -9.26,1.74c-3.8,0.01 -15.88,0.68 -18.57,-1.17c-2.9,-2 -2.42,-6.71 -2.43,-9.83c-0.01,-6.49 -2.11,-16.32 4.11,-20.26c5.04,-1.28 11.6,-0.77 16.89,-0.74zm52,21.42c15.69,1.66 14,18.14 14,29.58c0,3.6 0.77,12.76 -1.74,15.26c-2.08,2.09 -6.5,1.74 -9.26,1.74c-4.05,0.01 -16.61,0.91 -19.26,-1.74c-2.09,-2.08 -1.74,-6.5 -1.74,-9.26c-0.02,-12.7 -3.36,-29.31 11,-35.58c2.68,-0.32 4.22,-0.57 7,0zm225,1.94c14.62,1.5 13,15.95 13,26.64c0,3.6 0.77,12.76 -1.74,15.26c-2.08,2.09 -6.5,1.74 -9.26,1.74c-3.84,0.01 -14.66,0.86 -17.26,-1.74c-2.09,-2.08 -1.74,-6.5 -1.74,-9.26c-0.02,-11.79 -3.18,-27.91 11,-32.64c2.25,-0.19 3.68,-0.44 6,0z"  fill="gold"/>

<g id="smoke">
<circle fill="white" cx="322" cy="150" r="5" filter="url(#blur)" opacity="0.5">
<animate attributeName="cy" begin="0s" dur="12s" repeatCount="indefinite" values="150;-20"/>
<animate attributeName="r" begin="0s" dur="2s" repeatCount="indefinite" values="10;15;10"/>
</circle>
<circle fill="white" cx="322" cy="155" r="5" filter="url(#blur)" opacity="0.5">
<animate attributeName="cy" begin="0s" dur="12s" repeatCount="indefinite" values="165;-10"/>
<animate attributeName="r" begin="0s" dur="2s" repeatCount="indefinite" values="10;5;10"/>
</circle>
<circle fill="white" cx="322" cy="155" r="5" filter="url(#blur)" opacity="0.5">
<animate attributeName="cy" begin="0s" dur="12s" repeatCount="indefinite" values="180;0"/>
<animate attributeName="r" begin="0s" dur="2s" repeatCount="indefinite" values="2;5;2"/>
</circle>
<circle fill="black" cx="315" cy="140" r="2">
<animate attributeName="cy" begin="0s" dur="12s" repeatCount="indefinite" values="145;-20"/>
</circle>
<circle fill="black" cx="330" cy="140" r="2">
<animate attributeName="cy" begin="0s" dur="12s" repeatCount="indefinite" values="145;-20"/>
</circle>
<g>
<path d="m318 152 Q 322 156 326 152" stroke="black" stroke-width="2" fill="none"/>
<animateMotion begin="0s" dur="12s" repeatCount="indefinite" values="0,0;0,-165"/>
</g>
</g>

<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#smoke" transform="translate(186 0)"/>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#smoke" transform="translate(396 50)"/>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#smoke" transform="translate(460 50)"/>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#smoke" transform="translate(589 40)"/>

<path d="m570.75,126c0,0 21.08,-41 21.08,-41c0.94,-1.77 2.63,-4.66 2.94,-6.58c0.32,-1.96 -1.78,-9.36 4.22,-8.88c5.25,0.42 2.91,5.8 3.39,8.74c0.29,1.8 2.01,5.02 2.88,6.72c0,0 21.49,41 21.49,41c2.26,4.5 8.28,12.45 1.25,15c0,0 0,76 0,76c0,0 5,0 5,0c0,0 0,51 0,51c0,0 1,18 1,18c0,0 22,1 22,1c0,0 0,-65.03 0,-65.03c0,0 -4.78,0 -4.78,0c-11.59,-1.03 -1.29,-10.3 0,-14.97c1.11,-2.74 0.78,-12.54 0.78,-16c3.59,-0.17 10.87,-1.2 13.91,-2.98c3.17,-1.87 13.95,-17.02 17.09,-21.02c2.36,-3 9.36,-13.8 13,-13.8c2.26,0 3.98,2.24 5.25,3.82c0,0 10.75,13.98 10.75,13.98c0,0 0,-8 0,-8c-4.52,-0.79 -4.63,-1.56 -5,-6c0,0 16.85,-0.69 16.85,-0.69c3.08,0.92 4.19,4.65 -1.85,5.69c0,0 1.14,22 1.14,22c0,0 9.86,14 9.86,14c0,0 25.47,-34 25.47,-34c1.91,-2.53 7.39,-10.8 10.55,-10.8c2.22,0 4.03,2.29 5.32,3.82c0,0 10.66,13.98 10.66,13.98c0,0 0,-8 0,-8c-4.52,-0.79 -4.63,-1.56 -5,-6c0,0 16.85,-0.52 16.85,-0.52c2.83,0.52 4.46,4.43 -1.85,5.52c0,0 0,14 0,14c0.02,4.18 0.08,8.42 3.53,11.42c3.48,3.01 12.4,2.54 14.45,5.17c1.46,1.88 0.98,7.92 1.02,10.41c0.04,1.7 0.03,3.35 0.77,5c1.14,4.18 10.22,13.04 0,13.97c0,0 -4.77,0 -4.77,0c0,0 0,58.03 0,58.03c0,0 15,2 15,2c0,0 0,6 0,6c5.14,-0.07 7.28,0.37 9,-5c10.91,0 12.98,0.96 13,-10c0,0 0,-71 0,-71c-3.24,0 -12.93,0.99 -10.84,-5.02c1.15,-3.28 10.99,-13.03 13.8,-15.98c0,0 26.11,-29 26.11,-29c3.01,-3.31 10.12,-13.5 14.93,-11.83c3.24,1.12 12.8,12.6 16,15.83c0,0 -1,-11 -1,-11c-5.03,-0.88 -4.83,-2.21 -5,-7c0,0 22,0 22,0c0,0 -1,6 -1,6c0,0 -4,0 -4,0c0,9.02 -1.64,22.46 3.54,30c0,0 14.88,17 14.88,17c1.53,1.8 4.96,5.36 4.97,7.77c0.02,4.15 -8.68,3.23 -11.39,3.23c0,0 0,62 0,62c0,15.29 -1.62,18.82 8,19c0,0 4,0 4,0c0,0 0,20 0,20c0,0 18,1.83 18,1.83c0,0 67,7.01 67,7.01c0,0 79,9.88 79,9.88c0,0 94,14.28 94,14.28c0,0 0,64 0,64c0,0 -1200,0 -1200,0c0,0 0,-73 0,-73c0,0 1.6,-7.98 1.6,-7.98c0,0 15.4,-2.6 15.4,-2.6c0,0 42,-5 42,-5c0,0 64,-6.59 64,-6.59c0,0 68,-5.92 68,-5.92c0,0 33,-2.82 33,-2.82c0,0 23,-1.18 23,-1.18c0,0 10,-0.91 10,-0.91c0,0 0,-36 0,-36c0,0 -1,-17 -1,-17c0,0 0,-33 0,-33c-3.08,0 -10.44,0.79 -10.18,-4.06c0.2,-3.51 7.3,-10.12 9.76,-12.94c0,0 30,-33 30,-33c2.34,-2.71 10.08,-12.17 13.51,-12.26c4.5,-0.11 13.6,11.79 16.91,15.26c0,0 0,-10 0,-10c0,0 -4.94,0 -4.94,0c0,0 0,-5.4 0,-5.4c0,0 6.94,-1.6 6.94,-1.6c0,0 14,0 14,0c-0.33,3.91 -0.17,4.66 -4,6c0,4.19 -0.43,20.12 0.59,23c1.8,5.05 11,13.84 15.41,17c2.89,-5.38 14.12,-16.83 18.92,-22c1.97,-2.13 4.96,-6.37 8.09,-6.37c4.17,0 10.6,8.33 13.27,11.37c0,0 21.81,24.04 21.81,24.04c4.39,4.62 10.09,9.75 11.91,15.96c-8.52,0.01 -10.94,-0.48 -11,9c0,0 0,64 0,64c0,0 26,0 26,0c0,0 0,-91 0,-91c-2.74,0 -8.04,0.67 -9.39,-2.31c-1.52,-3.38 2.8,-12.22 4.19,-15.69c0,0 11,-28 11,-28c2.77,-6.81 5.1,-11.4 13.2,-11.06c0,0 50,0 50,0c0,0 0,-19.94 0,-19.94c0,0 13,0 13,0c0,0 0,20 0,20c0,0 8,0 8,0c0,0 0,-20 0,-20c0,0 13,0 13,0c0,0 0,20 0,20c10.97,-0.8 12.79,7.3 16.05,16c0,0 8.35,21 8.35,21c1.42,3.59 6.45,14.44 4.99,17.69c-1.18,2.6 -4.09,1.94 -6.08,3.33c-2.77,1.93 -2.3,5.99 -2.31,8.98c0,0 0,77 0,77c0,0 7,1 7,1c0,0 0,-67 0,-67c0,0 6,0 6,0c0,0 0,-75 0,-75c-7.56,-2.65 -1.63,-10.27 0.75,-15zm17.25,35c0,0 9,0 9,0c0,0 0,-10 0,-10c-5.67,2.3 -7.7,3.87 -9,10zm12,-10c0,0 0,9 0,9c0,0 10,1 10,1c-1.65,-6.33 -3.77,-8.16 -10,-10zm-132.01,5.74c-7.84,-0.18 -11.2,15.4 -11.99,21.26c0,0 23,0 23,0c-0.46,-5.51 -3.95,-21.09 -11.01,-21.26zm54.01,-0.45c-7.54,0 -10.83,14.89 -12,20.71c0,0 24,0 24,0c-1.17,-5.82 -4.46,-20.71 -12,-20.71zm-206,4.71c0,0 1,1 1,1c0,0 0,-1 0,-1c0,0 -1,0 -1,0zm272,3c1.76,5.14 3.86,7.24 9,9c0,0 0,-9 0,-9c0,0 -9,0 -9,0zm12,0c0,0 0,9 0,9c6.13,-1.3 7.7,-3.33 10,-9c0,0 -10,0 -10,0zm279,20c0,0 9,0 9,0c0,0 0,-10 0,-10c-5.67,2.3 -7.7,3.87 -9,10zm12.32,-5.1c0.35,6.27 4.65,5.1 9.68,5.1c-1.62,-6.22 -3.28,-7.38 -9,-10c-0.75,1.69 -0.78,3.04 -0.68,4.9zm-602.32,10.1c0,0 9,0 9,0c0,0 0,-9 0,-9c-5.64,1.68 -7.55,3.2 -9,9zm12,-9c0,0 0,9 0,9c0,0 9,0 9,0c-1.25,-5.86 -3.14,-7.75 -9,-9zm578,7c1.71,4.99 4.01,7.29 9,9c0,0 0,-9 0,-9c0,0 -9,0 -9,0zm12,0c0,0 0,9 0,9c6.13,-1.3 7.7,-3.33 10,-9c0,0 -10,0 -10,0zm-201,2c0,0 0,8 0,8c0,0 5,0 5,0c0,0 0,-8 0,-8c0,0 -5,0 -5,0zm7,0c0,0 0,8 0,8c0,0 5,0 5,0c0,0 0,-8 0,-8c0,0 -5,0 -5,0zm66,0c0,0 0,8 0,8c0,0 5,0 5,0c0,0 0,-8 0,-8c0,0 -5,0 -5,0zm8,0c0,0 0,8 0,8c0,0 4,0 4,0c0,0 0,-8 0,-8c0,0 -4,0 -4,0zm-482,3c1.25,5.85 3.35,8.07 9,10c0,0 0,-10 0,-10c0,0 -9,0 -9,0zm12,10c6.04,-1.79 7.4,-3.36 10,-9c-9.91,-2.81 -9.99,0.63 -10,9zm293.79,-4.98c-1.01,-2.76 -3.41,-5.51 -6.48,-3.79c-3.52,1.98 -2.31,15.77 -2.31,19.77c0,0 8.79,0 8.79,0c0.21,-3.14 0.45,-13.64 0,-15.98zm18.05,0c-0.8,-2.47 -2.76,-4.95 -5.62,-4.14c-4.78,1.36 -3.22,15.99 -3.22,20.12c0,0 8.84,0 8.84,0c0,0 0,-15.98 0,-15.98zm-154.05,7.98c-1.14,-3.29 -4.01,-6.47 -7.75,-5.34c-3.27,0.98 -4.59,4.24 -4.99,7.34c0,0 0,22 0,22c0,0 12.74,0 12.74,0c0,0 0,-24 0,-24zm28.21,3c-0.08,-4.06 -0.8,-8.55 -6,-8.55c-3.46,0 -5.35,2.38 -5.93,5.57c0,0 0,23.98 0,23.98c0,0 11.93,0 11.93,0c0,0 0,-21 0,-21zm28,0c-0.06,-2.95 -0.12,-6.37 -3.15,-7.93c-3.72,-1.93 -7.62,1.37 -8.69,4.95c0,0 0,23.98 0,23.98c0,0 11.84,0 11.84,0c0,0 0,-21 0,-21zm29,1c-0.07,-3.98 -0.76,-9.55 -6.03,-9.55c-3.44,0 -5.32,2.41 -5.9,5.57c0,0 0,23.98 0,23.98c0,0 11.93,0 11.93,0c0,0 0,-20 0,-20zm146,-10c0,0 0,9 0,9c6.75,-1.19 6.75,-7.81 0,-9zm7,1c0,0 0,7 0,7c0,0 5,1 5,1c0,0 0,-9 0,-9c0,0 -5,1 -5,1zm66,-1c0,0 0,9 0,9c6.75,-1.19 6.75,-7.81 0,-9zm8,0c0,0 0,9 0,9c0,0 4,0 4,0c0,0 0,-9 0,-9c0,0 -4,0 -4,0zm-92,23c0,0 0,8 0,8c0,0 10,0 10,0c-0.11,-8.45 -1.34,-7.99 -10,-8zm12,8c0,0 10,0 10,0c0,0 0,-8 0,-8c-8.66,0.01 -9.89,-0.45 -10,8zm13,-8c0,0 0,8 0,8c0,0 9,0 9,0c0,0 0,-8 0,-8c0,0 -9,0 -9,0zm48,0c0,0 0,8 0,8c0,0 10,0 10,0c-0.11,-8.45 -1.34,-7.99 -10,-8zm13,0c0,0 0,8 0,8c0,0 9,0 9,0c-0.11,-8.14 -1.2,-7.97 -9,-8zm12,0c0,0 0,8 0,8c0,0 10,0 10,0c-1.11,-8.05 -0.14,-7.99 -10,-8zm82,0c0,0 0,9 0,9c0,0 10,0 10,0c0,0 0,-9 0,-9c0,0 -10,0 -10,0zm13,0c0,0 0,9 0,9c0,0 10,0 10,0c0,0 0,-8 0,-8c0,0 -10,-1 -10,-1zm26,0c0,0 0,9 0,9c0,0 10,0 10,0c0,0 0,-9 0,-9c0,0 -10,0 -10,0zm13,0c0,0 0,9 0,9c0,0 9,0 9,0c0,0 0,-9 0,-9c0,0 -9,0 -9,0zm-642,5c0,0 0,10 0,10c0,0 10,0 10,0c-0.01,-9.97 -0.03,-9.99 -10,-10zm13,0c0,0 0,10 0,10c0,0 9,0 9,0c0,0 0,-10 0,-10c0,0 -9,0 -9,0zm35.4,2.31c-1.33,-2.71 -6.55,-3.02 -8.38,-0.71c-1.32,1.67 -1.02,6.26 -1.02,8.4c0,0 10,0 10,0c0,-1.87 0.17,-6.11 -0.6,-7.69zm3.6,-2.31c0,0 0,10 0,10c0,0 9,0 9,0c0,0 0,-10 0,-10c0,0 -9,0 -9,0zm358,6c0,0 0,8 0,8c0,0 10,0 10,0c0,0 0,-8 0,-8c0,0 -10,0 -10,0zm12,0c0,0 0,8 0,8c0,0 10,0 10,0c0,0 0,-8 0,-8c0,0 -10,0 -10,0zm13,0c0,0 0,8 0,8c0,0 9,0 9,0c0,0 0,-8 0,-8c0,0 -9,0 -9,0zm48,0c0,0 0,8 0,8c0,0 10,0 10,0c0,0 0,-8 0,-8c0,0 -10,0 -10,0zm13,0c0,0 0,8 0,8c0,0 9,0 9,0c0,0 0,-8 0,-8c0,0 -9,0 -9,0zm19.55,7.43c2.5,-1.3 2.5,-5.56 0,-6.86c-1.46,-0.75 -5.78,-0.57 -7.55,-0.57c0,0 0,8 0,8c1.77,0 6.09,0.18 7.55,-0.57zm74.45,-6.43c0,0 0,10 0,10c0,0 10,0 10,0c0,0 0,-10 0,-10c0,0 -10,0 -10,0zm13,0c0,0 0,10 0,10c11.11,-0.01 9.02,-0.52 10,-9c0,0 -10,-1 -10,-1zm26,0c0,0 0,10 0,10c0,0 10,0 10,0c0,0 0,-10 0,-10c0,0 -10,0 -10,0zm13,0c0,0 0,10 0,10c0,0 9,0 9,0c0,0 0,-10 0,-10c0,0 -9,0 -9,0zm-452.11,11c-0.81,-3.77 -3.69,-7.02 -7.84,-5.92c-3.27,0.86 -4.44,3.89 -4.96,6.92c0,0 0,22 0,22c0,0 12.8,0 12.8,0c0,0 0,-23 0,-23zm28,-0.96c-0.9,-4.08 -4.83,-6.46 -8.66,-4.49c-3.77,1.92 -3.22,6.9 -3.23,10.45c0,0 0,18 0,18c0,0 11.89,0 11.89,0c0,0 0,-23.96 0,-23.96zm29.11,5.96c-0.05,-4.03 -0.14,-9.56 -5.05,-10.67c-4.22,-0.95 -6.99,1.73 -7.84,5.67c0,0 0,23 0,23c0,0 12.89,0 12.89,0c0,0 0,-18 0,-18zm28,0c-0.01,-4.34 0.4,-9.48 -5.02,-10.67c-4.38,-0.96 -6.42,1.68 -6.93,5.67c0,0 0,23 0,23c0,0 11.95,0 11.95,0c0,0 0,-18 0,-18zm-275,-10c0,0 0,9 0,9c0,0 10,0 10,0c0,0 0,-9 0,-9c0,0 -10,0 -10,0zm13,0c0,0 0,9 0,9c0,0 9,0 9,0c0,0 0,-9 0,-9c0,0 -9,0 -9,0zm26,0c0,0 0,9 0,9c0,0 10,0 10,0c0,0 0,-9 0,-9c0,0 -10,0 -10,0zm13,0c0,0 0,9 0,9c0,0 9,0 9,0c0,0 0,-9 0,-9c0,0 -9,0 -9,0zm359,3c0,0 -1,8 -1,8c0,0 10,0 10,0c0,0 -1,-8 -1,-8c0,0 -8,0 -8,0zm11,8c0,0 10,0 10,0c0,0 0,-8 0,-8c-7.74,1.02 -9.89,-1.61 -10,8zm13,0c0,0 9,0 9,0c0,0 -1,-8 -1,-8c0,0 -7,0 -7,0c0,0 -1,8 -1,8zm48,-7c0,0 0,7 0,7c0,0 10,0 10,0c-0.1,-8.5 -1.9,-8.14 -10,-7zm13,-1c0,0 0,8 0,8c0,0 9,0 9,0c0,0 0,-8 0,-8c0,0 -9,0 -9,0zm12,8c0,0 10,0 10,0c0,0 0,-7 0,-7c0,0 -9,-1 -9,-1c0,0 -1,8 -1,8zm-394.09,3.02c-5.91,-10.02 -19.7,-6.8 -19.91,8.98c0,0 0,22 0,22c0,0 22,0 22,0c0,-7.18 1.2,-25.42 -2.09,-30.98zm208.1,1.03c-3.23,5.02 -2.01,22.33 -2.01,28.95c0,0 9,0 9,0c0,0 0,-34 0,-34c-3.15,1.29 -5.05,2.03 -6.99,5.05zm8.99,6.95c0,0 0,22 0,22c0,0 9,0 9,0c0,-6.12 0.98,-23.3 -1.45,-27.98c-1.67,-3.21 -3.59,-4.26 -6.55,-6.02c0,0 -1,12 -1,12zm79,-8c0,0 0,6 0,6c0,0 10,0 10,0c0,0 0,-6 0,-6c0,0 -10,0 -10,0zm12,0c0,0 0,6 0,6c0,0 10,0 10,0c0,0 0,-6 0,-6c0,0 -10,0 -10,0zm13,0c0,0 0,6 0,6c0,0 9,0 9,0c0,0 0,-6 0,-6c0,0 -9,0 -9,0zm48,0c0,0 0,6 0,6c0,0 10,0 10,0c0,0 0,-6 0,-6c0,0 -10,0 -10,0zm13,0c0,0 0,6 0,6c0,0 9,0 9,0c0,0 0,-6 0,-6c0,0 -9,0 -9,0zm12,0c0,0 0,6 0,6c0,0 9,0 9,0c0,0 1,-6 1,-6c0,0 -10,0 -10,0z" fill="black"/>
</svg>
</svg width="800" height="651">
</image xlink:href="https://whitney.org/uploads/image/file/384330/large_kusama_in_fireflies_by_jason_schmidt_800.jpg" width="800" height="651"/>
</svg>

<script>
function myFunctionC() {
for (var i = 0; i < 300; i++) {
var cx = Math.floor(1200*Math.random());
var cy = Math.floor(400*Math.random());
var r = Math.floor(2*Math.random())+1;
var d = Math.floor(6*Math.random())+6;
var o = Math.random();

var circle1 = document.createElementNS(svgNeige.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 animateMotion1 = document.createElementNS(svgNeige.namespaceURI, 'animateMotion');
    animateMotion1.setAttribute('path', 'm0 -450L0 450');
    animateMotion1.setAttribute('begin', '0s');
    animateMotion1.setAttribute('dur', d);
    animateMotion1.setAttribute('repeatCount', 'indefinite');

    circle1.appendChild(animateMotion1);
    svgNeige.appendChild(circle1);
}}
myFunctionC()
</script>

mercredi 14 novembre 2018