javascript circle moves around a point -

my element circling around point. jsfiddle

html

<div class="center-dot">     <div class="dot"></div>     <div class="one"></div>     <div class="two"></div> </div> 

css:

.center-dot {position:relative;top:200px;left:200px;} .dot {width:3px;height:3px;background:blue;} .one {width:40px;height:40px;border-radius:40px;background:red;position:absolute;} .two {width:40px;height:40px;border-radius:40px;background:green;position:absolute;} 

js:

var 1 = $('.one'),     2 = $('.two');  var one_start = 0,     two_start = 0;  setinterval(function(){     ++one_start;     var one_css = {         'left': math.sin(one_start * 0.0010) * 100 ,         'top': math.cos(one_start * 0.0010) * 100     }     one.css(one_css);      ++two_start;     var two_css = {         'left': math.sin(two_start * 0.0025) * 200 ,         'top': math.cos(two_start * 0.0025) * 200     }     two.css(two_css); }, 1); 

but not exactly, zigzag.

how make sure element did clean circle?

don't use jquery.

the problem positions rounded nearest pixel, meaning shapes cannot follow exact circle.

here css3-only reproduction of animation. using transform, effect not constrained integer pixel values , can therefore follow circle perfectly.