Orbit Positions

CSS

.center {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
}
.item {
  position: absolute;
  width: 36px;
  height: 36px;
  border-radius: 36px;
  background: red;
  color: #fff;
  text-align: center;
  line-height: 36px;
}

JavaScript

const orbitButtonsCount = 8;
const positions = (() => {
  const radius = 156;
  const result = [];
  const step = 2 * Math.PI / orbitButtonsCount;
  let angle = step / 2;
  while (result.length < orbitButtonsCount) {
    result.push({
      left: Math.round(Math.cos(angle) * radius),
      top: Math.round(Math.sin(angle) * radius),
    });
    angle += step;
  }
  result.unshift({ left: 0, top: 0 });
  return result;
})();

document.body.innerHTML = `
  <div class="center">
    ${positions.map((p, i) =>
      `<div class="item" style="left:${p.left}px;top:${p.top}px">${i}</div>`
    ).join('')}
  </div>
  <pre>${JSON.stringify(positions, null, '  ')}</pre>
`;