Elemente positioned in circle

by lmeurs

HTML

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

CSS

body {
  counter-reset: section;
}

div#main {
    height: 5px;
    width: 5px;
    position: absolute;
    top: 200px;
    left: 200px;
    background: red;
}
div.circle {
    position: absolute;
    width: 20px;
    height: 20px;
    outline: 2px solid black;
    www-transform: translate(-100%, -100%);
}
div.circle:after {
  counter-increment: section;
  content: counter(section) "!";  
}

JavaScript

var n = 35,
  r = 150

for (var i = 0; i < n; i++) {
  var circle = document.createElement("div")
  document.getElementById("main").appendChild(circle)
  circle.className = "circle"

  var theta = Math.PI / -2 + Math.PI * 2 * i/n;

  circle.style.top = -Math.round(r * Math.sin(theta)) + "px"
  circle.style.left = +Math.round(r * Math.cos(theta)) + "px"
  circle.style.transform = "translate(-50%, -50%) rotate(" + (-theta - Math.PI / 2) + "rad)"
}