JSFiddle - React, Tailwind, and code Playground

by Uday Hiwarale

HTML

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

CSS

#nav {
  background-color: #eee;
  margin: 20px;
  position: relative;
}

JavaScript

var nav = document.getElementById('nav');
nav.style.position = 'relative';
nav.style.overflow = 'hidden';

var radius = 150; // radius of circle in px
var angle = 180; // span angle of points on circle
var points = 3; // number of points
var pointSize = 10; // 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 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 r * sin * 2;
}

// set box width and height based on angle and radius
// add extra space for point size
function renderBox(r, a) {
  var width = getWidth(r, a) + pointSize;
  var height = getHeight(r, a) + pointSize;

  nav.style.width = width + 'px';
  nav.style.height = height + 'px';
}

// render reference circle
function renderCircle(r) {
  var circleElem = document.createElement('div');
  circleElem.style.width = (r * 2) + 'px';
  circleElem.style.height = (r * 2) + 'px';
  circleElem.style.borderRadius = '100%';
  circleElem.style.border = '1px dashed #666';
  
  circleElem.style.position = 'absolute';
  circleElem.style.right = '0px';
  circleElem.style.top = '50%';
  circleElem.style.transform = 'translateY(-50%)';
  
  nav.appendChild(circleElem);
}




renderBox(radius, angle);
renderCircle(radius);