Distribute circles around a center circle

http://stackoverflow.com/questions/30426255/distribute-circles-around-a-center-circle

by Kearnan Kelly

HTML

<div class="circles">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

CSS

div.circles {
    font-size: 10vw;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1em;
    height: 1em;
    border-radius: 50%;
    background-color: #f00;
}

div.circles > div {
    width: 1em;
    height: 1em;
    background-color: rgba(0, 0, 0, .5);
    border-radius: 50%;
    position: absolute;
}

JavaScript

var circles = document.querySelectorAll('div.circles > div');

Array.prototype.forEach.call(circles, function (circle, index) {

    var angle = index * Math.PI / 3;
    
    circle.style.top = Math.sin(angle) + 'em';
    circle.style.left = Math.cos(angle) + 'em';
});