JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container"></div>

JavaScript

var stage = new Kinetic.Stage({
    container: 'container',width: 578,height: 200
    });
    var layer = new Kinetic.Layer();
    var arc = new Kinetic.Shape({
        drawFunc: function(canvas) {
            var context = canvas.getContext();
            var x = stage.getWidth() / 2;
            var y = stage.getHeight()/2;
            var radius = 70;
            var startAngle = this.getAttrs().startAngle;
            var endAngle = this.getAttrs().endAngle;
            var context = canvas.getContext('2d');
            context.beginPath();
            context.arc(x, y, radius, startAngle, endAngle, false);
            canvas.stroke(this);
        },
        fill: '#00D2FF',
        stroke: 'black',
        strokeWidth: 4,
        startAngle: 1.5*Math.PI,
        endAngle: 0*Math.PI,
        draggable:true
    });

    layer.add(arc);
    stage.add(layer);
   
    var angle = 0;
    setInterval( function() {
        start= ((angle % 360)/180-0.5)*Math.PI;
        end  = (((angle+30) % 360)/180-0.5)*Math.PI;
        arc.setAttrs({startAngle:start, endAngle:end});
        layer.draw();
        angle+=30;
    }, 100);