# Edit in JSFiddle

```//find the position of the center circle
var center = \$(".center-circle").position(),
//25. Grabs one of the outer circles' diameters and divides by 2 to find the radius
//25. Grabs the center circle's diameter and divides by 2 to find the radius
//175. Finds the point around the main circle on the x-axis, given the center circle's left position added to the center circle's radius. Manually updating "center.left" will cause the outer circles to move left or right on the x-axis drawn through the center circle
//175. Finds the point around the main circle on the y-axis, given the center circle's left position added to the center circle's radius. Manually updating "center.top" will cause the outer cirlces to move up and down on the y-axis drawn through the center circle
x, y, angle = 0, angles = [],
//where to position the outer circles, evenly around the center circle. Divide 360 by how many outer circles
space = 360 / 4,
//0.017453292519943295
i = 0;

//loop through the circles
for(;i < 4; i++) {
//space = 90;
//angle = 90, 180, 270, 360
//angles = 0, 90, 180, 270
angles.push(angle);
angle += space;
}

//How far circles are out from the main point. If "20" is manually changed: larger number = spaced out further from the center point; smaller number = closer to the center point

loop();

function loop() {
for(var i = 0; i < angles.length; i++) {
angle = angles[i];
//x = 175 + 25 * Math.cos(angle * 0.017453292519943295)
//x = 175 + 25 * Math.sin(angle * 0.017453292519943295)
//for each circle, find the left and top coords to animate
//negative number makes it go counter clockwise. positive makes it go clockwise. The larger the number, the faster it goes
angles[i] = angles[i] + 1;
}
requestAnimationFrame(loop);
}```
```<div class="border animated-circle center-circle">&nbsp;</div>
<div class="border animated-circle circle0">&nbsp;</div>
<div class="border animated-circle circle1">&nbsp;</div>
<div class="border animated-circle circle2">&nbsp;</div>
<div class="border animated-circle circle3">&nbsp;</div>```
```.border {
position:fixed;
}
.animated-circle {
width:50px;
height:50px;
}
.center-circle {
left:150px;
top:150px;
background-color: #000000;
}
.circle0 {
background-color: red;
}
.circle1 {
background-color: blue;
}
.circle2 {
background-color: purple;
}
.circle3 {
background-color: green;
}```