JSFiddle - React, Tailwind, and code Playground

by cristighenea

HTML

<div id="thePaper"></div>

JavaScript

var p = Raphael('thePaper', 500, 500);
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 arc(center, radius, startAngle, endAngle) {
      angle = startAngle;
      coords = toCoords(center, radius, angle);
      //path = "M " + coords[0] + " " + coords[1];
      path = "M " + center + " " + radius;
      angle +=1;  
      while(angle<=endAngle) {
          coords = toCoords(center, radius, angle);
          path += " L " + coords[0] + " " + coords[1];
          angle += 1;
      }
      return path+'L'+center[0]+' '+center[1]+ 'z';
}
var cc = p.path(arc([200, 200], 100, 0, 0));
cc.attr({fill:"url(http://raphaeljs.com/i114.png)"});
cc.animate({path:arc([200, 200], 100, 0, 200)}, 2000);