JSFiddle - React, Tailwind, and code Playground

by octavioamu

HTML

<svg viewBox="-1 -1 2 2" style="transform: rotate(-90deg)"></svg>

CSS

svg {
  height: 200px; // the contents will scale to fit because of viewBox
}

JavaScript

const svgEl = document.querySelector('svg');
const slices = [
  { percent: 0.1, color: 'Coral' },
  { percent: 0.65, color: 'CornflowerBlue' },
  { percent: 0.2, color: '#00ab6b' },
  { percent: 0.05, color: 'red' },
];
let cumulativePercent = 0;

function getCoordinatesForPercent(percent) {
  const x = Math.cos(2 * Math.PI * percent);
  const y = Math.sin(2 * Math.PI * percent);
  return [x, y];
}

slices.forEach(slice => {
  // destructuring assignment sets the two variables at once
  const [startX, startY] = getCoordinatesForPercent(cumulativePercent);
  
  // each slice starts where the last slice ended, so keep a cumulative percent
  cumulativePercent += slice.percent;
  
  const [endX, endY] = getCoordinatesForPercent(cumulativePercent);

  // if the slice is more than 50%, take the large arc (the long way around)
  const largeArcFlag = slice.percent > .5 ? 1 : 0;

	// create an array and join it just for code readability
  const pathData = [
    `M ${startX} ${startY}`, // Move
    `A 1 1 0 ${largeArcFlag} 1 ${endX} ${endY}`, // Arc
    `L 0 0`, // Line
  ].join(' ');

  // create a <path> and append it to the <svg> element
  const pathEl = document.createElementNS('http://www.w3.org/2000/svg', 'path');
  pathEl.setAttribute('d', pathData);
  pathEl.setAttribute('fill', slice.color);
  svgEl.appendChild(pathEl);
});