JSFiddle - React, Tailwind, and code Playground

by Simon060694

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/18.6.0/tween.umd.js"></script>
<canvas></canvas>

JavaScript

const MaxAngle=0.815;
const drawProgress = (angle , angle1 ) => {
const canvas = document.querySelector('canvas'); 
    if (canvas) {
      // const angle = Math.PI * 2;
      // const angle1 = Math.PI * 2;
      const can = canvas;
      const ctx = can.getContext("2d");

      const width = 16;
      const radius = 50;
      ctx.clearRect(0, 0, 10 * radius, 10 * radius);
      ctx.translate(width / 2, width / 2); // just to get it away from the edge

      const greenPart = ctx.createLinearGradient(0, 0, 0, 2 * radius);
      greenPart.addColorStop(0, "#dfac50");
      greenPart.addColorStop(1, "#3be086");

      const whitePart = ctx.createLinearGradient(0, 0, 0, 2 * radius);
      whitePart.addColorStop(0, "#dfac50");
      whitePart.addColorStop(1, "#e71d73");

      ctx.lineWidth = width;

      // First we make a clipping region for the left half
      ctx.save();
      ctx.beginPath();
      ctx.rect(-width, -width, radius + width, 2 * radius + width * 2);
      ctx.clip();

      // Then we draw the left half
     ctx.strokeStyle = greenPart;
      ctx.beginPath();
      const startAngle = 120 * (Math.PI / 180);
      const a = (MaxAngle<0.5?MaxAngle:1)*angle;
      ctx.arc(radius, radius, radius, startAngle , startAngle+((90*(Math.PI / 180))+Math.PI)*a, false);
      ctx.stroke();

      ctx.restore(); // restore clipping region to default

      if (angle1&&MaxAngle>=0.5) { 
        // Then we make a clipping region for the right half
        const startAngle = -Math.PI/2 ;
        const a = angle1*(1-MaxAngle+0.5)
        ctx.save();
        ctx.beginPath();
        ctx.rect(radius, -width, radius + width, 2 * radius + width * 2);
        ctx.clip();

        // Then we draw the right half
        ctx.strokeStyle = whitePart;
        ctx.beginPath();
        ctx.arc(
          radius,
          radius,
          radius,
          startAngle ,
           startAngle+(  150 * (Math.PI / 180))*a,
          false
        );
        ctx.stroke();

       ...