JSFiddle - React, Tailwind, and code Playground

HTML

<svg></svg>

CSS

svg {
  
}
path {
  fill: red;
  stroke-width: 20;
}
path:hover {
  stroke: grey;
}

JavaScript

var svg = $('svg');
var width = 200;
var stroke = false;
var radians_prev = 0;
svg.width(width).height(width);

function ratio_to_radians(ratio, add_radians) {
	var result = 2 * Math.PI * ratio;
	if(add_radians) result += add_radians;
	return result;
}

function radians_to_coords(radius, radians) {
	return {
  	X: radius + (radius * Math.cos(radians)),
    Y: radius + (radius * Math.sin(radians))
  }
}

function draw_arc(total, count) {
	var radius = width / 2;
  var start = radians_to_coords(radius, -radians_prev);
  
	var ratio = count / total;
  var radians = ratio_to_radians(ratio, radians_prev);
  console.log(radians_prev, radians);
  radians_prev = radians;
  var end = radians_to_coords(radius, -radians);
  console.log(start, end);
  
  var large_arc_flag = ratio <= 0.5 ? '0' : '1';
  
  var d = [
  	'M', start.X, start.Y,
    'A', radius, radius, 0, large_arc_flag, 0, end.X, end.Y
  ];
  if(!stroke) d.push('L', radius, radius, 'z');
  
  return $('<path></path>').attr('d', d.join(' ')).appendTo(svg);
}

draw_arc(100, 70);
draw_arc(100, 30);