vendredi 13 septembre 2019

spinning squares

<!doctype html>
<html lang="fr">

<head>
<meta charset="utf-8">
<title>rot.</title>
<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>

<svg id="svg1"></svg>
<div id="div1"></div>

<script>
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>
By -