HTML Curve Navigation

HTML

<div id="nav"></div>

CSS

#nav {
  background-color: #fff;
  margin: 30px;
  position: relative;
}

JavaScript

var nav = document.getElementById('nav');

/*****************************/
/*****************************/
/*****************************/

var radius = 200; // radius of circle in px
var angle = 90; // span angle of points on circle
var points = 7; // number of points
var pointSize = 15; // size of points in px

/*****************************/
/*****************************/
/*****************************/

// get sin of an angle
function getSin(a) {
  if (a < 90) {
    return Math.sin(a * (Math.PI / 180));
  } else {
    return 1;
  }
}

// get cos of an angle
function getCos(a) {
  if (a < 90) {
    return Math.cos(a * (Math.PI / 180));
  } else {
    return 0;
  }
}

// get minimum width of div to fit points
// r - (cos(angle/2) * r)
function getWidth(r, a) {
  var cos = getCos(a / 2);
  return Math.round(r - (cos * r));
}

// get minimum height of div to fit points
// r * sin(angle/2) * 2
function getHeight(r, a) {
  var sin = getSin(a / 2);
  return Math.round(r * sin * 2);
}

// get canvas width and height
function canvasSize(r, a) {
  var width = getWidth(r, a);
  var height = getHeight(r, a);

  return {
    width,
    height
  };
}

// set point margin
function setPointMargin(pointElements, radius, angle, bottom, even, count) {
  let {
    width,
    height
  } = canvasSize(radius, angle);
  let currentAngle = (angle / 2);
  let separationAngle = (angle / 2) / pointElements.length;

  for (let index in pointElements) {
    let left = (getCos(currentAngle) * radius) - (radius - width);
    let top = (height / 2) - (getSin(currentAngle) * radius);

    if (bottom) {
      top = height - top;
    }

    pointElements[index].style.top = Math.round(top) + 'px';
    pointElements[index].style.left = Math.round(left) + 'px';
    
    if(even){
    	currentAngle -= (separationAngle + (separationAngle / (count-1)));
    }
    else{
    	currentAngle -= separationAngle;
    }
  }

  return pointElements;
}

// set box width and height based on angle and radius
//...