JSFiddle - React, Tailwind, and code Playground

by Peter Galiba

HTML

<div id="raphael-canvas"></div>

JavaScript

(function (R) {
  var paper = new R(document.getElementById('raphael-canvas'), 640, 480),
      kappa = 4 * (Math.sqrt(2) - 1) / 3;
  function circle(x, y, r) {
    var path = "M" + x + ',' + y,
        parts = 4,
        vars = {
          vk: r*kappa,
          vr: r,
          vy: y,
          vx: x
        };
    path = "Mvx,vy c0,-vk vk,-vr vr,-vr vk,0 vr,vk vr,vr".replace(/v[kryx]/g, function (match) {
      return vars[match];
    });

    paper.path(path);

  }
  circle(13,87, 70);
}(Raphael));