nothing: spinning squares

vendredi 13 septembre 2019

spinning squares

<!doctype html>

<head>

<style>

html,body{

height:100%;

margin:0;

}

body{

font-family:sans-serif;

overflow:hidden;

}

#div1{

font-size:6px;

position:absolute;

top:0;

left:0;

-moz-user-select:none;

user-select:none;

}

#svg1{

width:100%;

height:100%;

}

</style>

</head>

<body>

var ww=window.innerWidth;

var wh=window.innerHeight;

var div1=document.getElementById("div1");

var svg1=document.getElementById("svg1");

var j=250;

var r0=document.createElementNS(svg1.namespaceURI,"rect");

r0.setAttributeNS(null,"x",0);

r0.setAttributeNS(null,"y",0);

r0.setAttributeNS(null,"width",ww);

r0.setAttributeNS(null,"height",wh);

r0.setAttributeNS(null,"fill","#"+Math.round(0xFFFFFF * Math.random()).toString(16));

r0.setAttributeNS(null,"id","fond");

svg1.appendChild(r0);

for(i=1;i<=100;i++){

var d1=Math.round(Math.random()*20);

var d2=Math.round(Math.random()*20);

var g1=document.createElementNS(svg1.namespaceURI,"g");

var r1=document.createElementNS(svg1.namespaceURI,"rect");

r1.setAttributeNS(null,"x",ww/2-(ww/i)/2);

r1.setAttributeNS(null,"y",wh/2-(ww/i)/2);

r1.setAttributeNS(null,"width",ww/i);

r1.setAttributeNS(null,"height",ww/i);

r1.setAttributeNS(null,"fill","#"+Math.round(0xFFFFFF * Math.random()).toString(16));

r1.setAttributeNS(null,"id","rect"+i);

var a1=document.createElementNS(svg1.namespaceURI,"animateTransform");

a1.setAttribute("attributeName","transform");

a1.setAttribute("attributeType","xml");

a1.setAttribute("type", "rotate");

a1.setAttribute("begin", "0s");

a1.setAttribute("values","0 "+ww/2+" "+wh/2+";360 "+ww/2+" "+wh/2);

a1.setAttribute("dur",d1);

a1.setAttribute("repeatCount","indefinite");

svg1.appendChild(g1);

g1.appendChild(r1);

g1.appendChild(a1);

div1.innerHTML+=i+" ";

}

</script>

</body>

</html>