samedi 21 septembre 2019

rotations

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Demo</title>

<style>
html,body{
height:100%;
margin:0;
}
body{
overflow:hidden;
}
#svg1{
width:100%;
height:100%;
}
#div1{
position:absolute;
top:0;
left:0;
font-family:sans-serif;
font-size:8px;
}
</style>

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

<script>
var ww=Math.round(window.innerWidth);
var wh=Math.round(window.innerHeight);
var svg1=document.getElementById("svg1");
var div1=document.getElementById("div1");
var i;

ww=Math.round(window.innerWidth);
wh=Math.round(window.innerHeight);
div1.innerHTML="window size : "+ww+" x "+wh;

for(i=0;i<Math.round(ww/20);i++){
var c=document.createElementNS(svg1.namespaceURI,"circle");
c.setAttributeNS(null,"cx",Math.round(ww/2)+(i*10));
c.setAttributeNS(null,"cy",Math.round(wh/2));
c.setAttributeNS(null,"r",10);
c.setAttributeNS(null,"fill","#"+Math.round(0xFFFFFF * Math.random()).toString(16));
c.setAttributeNS(null,"id","c"+i);

var a=document.createElementNS(svg1.namespaceURI,"animateTransform");
a.setAttributeNS(null,"attributeName","transform");
a.setAttributeNS(null,"attributeType","xml");
a.setAttributeNS(null,"type","rotate");
a.setAttributeNS(null,"values","0 "+Math.round(ww/2)+" "+Math.round(wh/2)+";360 "+Math.round(ww/2)+" "+Math.round(wh/2));
a.setAttributeNS(null,"dur",(100-i)+"s");
a.setAttributeNS(null,"repeatCount","indefinite");

svg1.appendChild(c);
c.appendChild(a);
}

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