offset multiple positions in a circle

draw circles without canvas using divs

by frumbert

HTML

<p>
&nbsp;
</p>
<div id="o">
  <span>0</span>
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
  <span>6</span>
  <span>7</span>
  <span>8</span>
  <span>9</span>
  <span>a</span>
  <span>b</span>
  <span>c</span>
</div>

<output id="w"></output>
<output id="q"></output>

CSS

#o {
  width: 500px;
  height: 500px;
  position: relative;
  border: 1px solid red;
  border-radius: 250px
}
#o span {
  position: absolute;
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  border: 1px solid blue;
}

JavaScript

var spans = document.querySelectorAll("#o span"),
	ox = 250,
  oy = 250,
  r = 250,
  a = [];

document.getElementById("w").textContent = spans.length;

var alpha = (2 * Math.PI) / spans.length;

Array.from(spans).forEach(function(el, index) {

	var theta = (alpha * index) - 1.5707,
  	px = Math.floor(Math.cos(theta) * r),
    py = Math.floor(Math.sin(theta) * r);

	a.push([theta, px, py]);

  el.style.top = (py + oy) + 'px';
  el.style.left = (px + ox) + 'px';

});

document.getElementById("q").textContent = JSON.stringify(a);