JSFiddle - React, Tailwind, and code Playground

by Osama Qassar

HTML

<div id="main">
  
  
  
</div>

CSS

div#main {
    height: 300px;
    width: 300px;
    position: absolute;
    margin: 0 auto;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
}
div.circle {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid black;
    border-radius: 50%;
}
body {
    margin: 0 auto;
}

JavaScript

var setup = function () {
    var radius = 150;
    var main = document.getElementById('main');
    var mainHeight = parseInt(window.getComputedStyle(main).height.slice(0, -2));
    var theta = [0, Math.PI / 6, Math.PI / 4, Math.PI / 3, Math.PI / 2, 2 * (Math.PI / 3), 3 * (Math.PI / 4), 5 * (Math.PI / 6), Math.PI, 7 * (Math.PI / 6), 5 * (Math.PI / 4), 4 * (Math.PI / 3), 3 * (Math.PI / 2), 5 * (Math.PI / 3), 7 * (Math.PI / 4), 11 * (Math.PI / 6)];
    var circleArray = [];
    var colors = ['red', 'green', 'purple', 'black', 'orange', 'yellow', 'maroon', 'grey', 'lightblue', 'tomato', 'pink', 'maroon', 'cyan', 'magenta', 'blue', 'chocolate', 'DarkSlateBlue'];
    for (var i = 0; i < 16; i++) {
        var circle = document.createElement('div');
        circle.className = 'circle number'+i;
        circleArray.push(circle);
        circleArray[i].posx = Math.round(radius * (Math.cos(theta[i]))) + 'px';
        circleArray[i].posy = Math.round(radius * (Math.sin(theta[i]))) + 'px';
        circleArray[i].style.position = "absolute";
        circleArray[i].style.backgroundColor = colors[i];
        circleArray[i].style.top = ((mainHeight / 2) - parseInt(circleArray[i].posy.slice(0, -2))) + 'px';
        circleArray[i].style.left = ((mainHeight/ 2 ) + parseInt(circleArray[i].posx.slice(0, -2))) + 'px';
        main.appendChild(circleArray[i]);
    }
};
setup();