JSFiddle - React, Tailwind, and code Playground

by nsshrinivasan

JavaScript

var paper = Raphael(20,20, 600, 600);

  function arc(center, radius, startAngle, endAngle) {
      angle = startAngle;
      coords = toCoords(center, radius, angle);
      path = "M " + coords[0] + " " + coords[1];
      while(angle<=endAngle) {
          coords = toCoords(center, radius, angle);
          path += " L " + coords[0] + " " + coords[1];
          angle += 1;
      }
      return path;
  }

  function toCoords(center, radius, angle) {
      var radians = (angle/180) * Math.PI;
      var x = center[0] + Math.cos(radians) * radius;
      var y = center[1] + Math.sin(radians) * radius;
      return [x, y];
  }

function drawCircle(valueR){

 startAngle = 0;
  seqNo = 0;
  rad = 180 / Math.PI;
  while (startAngle <= 360) {
    seqNo = seqNo + 1;
    endAngle = startAngle + 90;
    circles = 0;
    
    radius = valueR;
    rinc = 30;
    
  xCenter = 240;
   yCenter = 240;
    midAngle = (startAngle + endAngle) / 2;
    while (circles < 1) {
        paper.path(arc([xCenter, yCenter], radius, startAngle, endAngle)).attr({"fill": "#baba97", "stroke":"#fff"});
     
        paper.circle(240, 240, 70).attr({"fill": "#004965", "stroke":"#fff"});
      circles += 1;
      radius += rinc;
    }    
    startAngle = startAngle + 1;
  }
}
    
//drawCircle(supply radius);
    
drawCircle(198);