The title might sound weird, but is exactly what I want to do. I dont know how though....

There is a center div (planet earth) and other 4 divs (satelites) wich are floating arround it. What im looking is for a way to draw a dashed line from each planet to earth, and still keep the motion going. Im only using jquery ... and I really got no idea how to achieve this one.


Code:
Code:
$(window).load(function(){
var pos = $('#center').position(),
    radiusSat = $('#sat0').width() * 0.5,
    radius = $('#center').width() * 0.5,
    cx = pos.left + radius,
    cy = pos.top + radius,
    x, y, angle = 0, angles = [],
    spc = 360 / 4,
    deg2rad = Math.PI / 180,
    i = 0;

for(;i < 4; i++) {
    angles.push(angle);
    angle += spc;
}

/// space out radius
radius += (radiusSat + 15);

loop();

function loop() {

    for(var i = 0; i < angles.length; i++) {

        angle = angles[i];
        
        x = cx + radius * Math.cos(angle * deg2rad);
        y = cy + radius * Math.sin(angle * deg2rad);

        $('#sat' + i).css({left:x - radiusSat, top:y - radiusSat});
    
        angles[i] = angles[i] + 1;
        if (angles[i] > 360) angles[i] = 0;
    }
    
    requestAnimationFrame(loop);
}
});
the css

Code:
  div {
    border-radius:50%;
    border:2px solid #000;
    position:fixed;
}
#center {
    width:200px;
    height:200px;
    left:100px;
    top:100px;
    
}
#sat0, #sat1, #sat2, #sat3 {
    width:50px;
    height:50px;
    
}
And HTML
Code:
<div id="centre">
			<div id="center"></div>
			<div id="sat0"></div>
			<div id="sat1"></div>
			<div id="sat2"></div>
			<div id="sat3"></div>
		</div>
any ideas how to achieve this ?