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