mercredi 9 janvier 2019

smileys rain

<html>
<head>
<meta charset="UTF-8">
<style>
html,body{height:100%;margin:0;}
body{overflow:hidden;}
svg{background:royalblue;}
</style>
</head>
<body>
<svg width="0" height="0" id="mysvg">
</svg>
<p id="demo"></p>
<script>
var mysvg=document.getElementById("mysvg");
var emoj=["😀","😀","😁","😂","😃","😄","😅","😆","😉","😊","😋","😎","😍","😘","😗","😙","😚","😐","😑","😶","😏","😣","😥","😮","😯","😪","😫","😴","😌","😛","😜","😝","😒","😓","😔","😕","🙃","😲","😖","😞","😟","😢","😭","😦","😧","😨","😩","😰","😱","😳","😵","😡","😠","😷","😇","😈","😺","😸","😹","😻","😼","😽","🙀","😿","😾"];

var sw=window.innerWidth;
var sh=window.innerHeight;
document.getElementById("mysvg").setAttribute("width",sw);
document.getElementById("mysvg").setAttribute("height",sh);

for(var a=0;a<500;a++){
var i=Math.round(Math.random()*64);
var myTextElement=document.createElementNS("http://www.w3.org/2000/svg","text");
var myText=document.createTextNode(emoj[i]);
var x=Math.round(Math.random()*sw)-20;
var y=Math.round(Math.random()*(sh+40))-20;
    myTextElement.setAttribute("x",x);
    myTextElement.setAttribute("y",y);
    myTextElement.setAttribute("font-family","Arial");
    myTextElement.setAttribute("font-size","100");
var d=Math.round(Math.random()*60)+30;

var choix=Math.round(Math.random());

var anim1=document.createElementNS(mysvg.namespaceURI,"animateMotion");
    if(choix==0){
    anim1.setAttribute("path","m0 -"+sh+"L0 "+(sh+40));
    }
    if(choix==1){
    anim1.setAttribute("path","m0 "+sh+"L0 -"+(sh+40));
    }
    anim1.setAttribute("begin","0s");
    anim1.setAttribute("dur",d+"s");
    anim1.setAttribute("repeatCount","indefinite");

    myTextElement.appendChild(myText);
    myTextElement.appendChild(anim1)
    mysvg.appendChild(myTextElement);

}

</script>
</body>
</html>
By -