<style>*{padding: 0;margin: 0;}</style>
<svg id=”sv” style=”width: 100%; height: 100%;margin: 0″>
<circle id=cir r=”10″ cx=”10″ cy=”10″/>
<circle id=cir2 r=”10″ cx=”20″ cy=”20″/>
</svg>
<script>
w = window.innerWidth/2
h = window.innerHeight/2
function rot(b,offset){
b.setAttribute(“cx”,w+offset)
b.setAttribute(“cy”,h+offset)
a = 0;
posx = parseFloat(b.getAttribute(“cx”))
posy = parseFloat(b.getAttribute(“cy”))
setInterval(function(){
b.setAttribute(“cx”,posx+Math.cos(a)*100 +offset)
b.setAttribute(“cy”,posy+Math.sin(a)*100+offset)
a += 0.01
})
}
rot(cir,10)
rot(cir2,100)
</script>