JSFiddle - React, Tailwind, and code Playground

HTML

<div class="pie">
    <?xml version="1.0"?>
    <svg xmlns="http://www.w3.org/2000/svg" height=0 widht=0>
<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;
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;
}

    $('#clipping').find('polygon').attr('points',points());
}

drawPie();
ani();
function ani(){
    if(angle<340) angle+=.3;
    drawPie(); requestAnimationFrame(ani);
}