JSFiddle - React, Tailwind, and code Playground

HTML

<div class="pie">
  <div>
    something
  </div>
  <svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" height=0 widht=0 viewport='0 0 100 100'>
<clipPath id="clipping">
    <polygon points=""></polygon>
</clipPath>
</svg>
</div>

CSS

.pie {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 1000px;
  -webkit-clip-path: url(#clipping);
  background-color: red;
}

* {
  padding: 0;
  margin: 0;
}

JavaScript

// Pie Chart
var angle = 10,
  c = $('.pie'),
  clip = $('#clipping').find('polygon');

function drawPie() {
  var x, y, s = 0;
  if (angle > 360) angle = angle % 360;
  var p = {
    0: '50 0',
    1: '100 0',
    2: '100 100',
    3: '0 100',
    4: '0 0',
    cp: '50 50',
    mp: ''
  }

  if (angle > 315) s = 7;
  else if (angle > 225) s = 6;
  else if (angle > 135) s = 5;
  else if (angle == 0 || angle == 360 || angle > 0) s = 4;

  function points() {

    if (angle < 45 || angle > 314) {
      y = 0;
      x = 50 + (Math.tan(angle * Math.PI / 180) * 50);
    } else if (angle < 135) {
      y = 50 - (Math.tan((90 - angle) * Math.PI / 180) * 50);
      x = 100;
    } else if (angle < 225) {
      y = 100;
      x = 50 + (Math.tan((180 - angle) * Math.PI / 180) * 50);
    } else if (angle < 315) {
      y = 50 + (Math.tan((270 - angle) * Math.PI / 180) * 50);
      x = 0;
    }
    var str = "";
    p.mp = '' + x + ' ' + y;
    for (var i = 0; i < s - 2; i++) str += p[i] + ',';
    str += p.mp + ',' + p.cp;
    return str;
  }

  clip.attr('points', points());
}

drawPie();
ani();

function ani() {
  if (angle < 340) angle += .6;
  drawPie();
  c.hide();
  setTimeout(function() {
    c.show();
  }, 1);
  requestAnimationFrame(ani);
}