JSFiddle - React, Tailwind, and code Playground

by zakariamouhid

HTML

<section id="section">
  <canvas id="bg"></canvas>
  <canvas id="canvas"></canvas>
</section>

CSS

body {
  text-align: center;
}
#section {
  position: relative;
  overflow: hidden;
  border: solid 3px #009688;
  display: inline-block;
  border-radius: 100%;
  background-color: #fff;
}
#bg {
  position: absolute;
  left: 0;
  top: 0;
}
#canvas {
  position: relative;
  animation: rotateInf 10s linear infinite;
  display: block;
  transform: rotate(0deg);
}
#section:hover #canvas {
    animation-play-state: paused;
}
@keyframes rotateInf {
  0%   {transform: rotate(0deg); }
  100% {transform: rotate(360deg); }
}

JavaScript

var c = canvas.getContext("2d"),
    u = 300,
    fb = (1 + Math.sqrt(5)) / 2,
    w = canvas.width = u + u / fb,
    h = canvas.height = u,
    lw = 2,
    lw2 = lw / 2,
    pi = Math.PI,
    pi2 = pi / 2,
    i,
    args = [
      {
        x: u,
        y: u,
        r: u,
        a: pi
      }
    ];
function drawArg(arg) {
  c.arc(arg.x, arg.y, Math.max(arg.r - lw2, 0), arg.a, arg.a + pi2);
}
function nextArg() {
  var n = args.length,
      arg = args[n - 1],
      x,
      y;
  if (n % 4 === 0) {
    x = arg.x - arg.r + arg.r / fb;
    y = arg.y;
  } else if (n % 4 === 1) {
    x = arg.x;
    y = arg.y - arg.r + arg.r / fb;
  } else if (n % 4 === 2) {
    x = arg.x + arg.r - arg.r / fb;
    y = arg.y;
  } else {
    x = arg.x;
    y = arg.y + arg.r - arg.r / fb;
  }
  args[n] = {
    x: x,
    y: y,
    r: arg.r / fb,
    a: arg.a + pi2
  };
}
for (i = 0; i < 76; i += 1) {nextArg(); }
var arg = args[args.length - 1];
w = h = canvas.width = canvas.height = arg.x * 2;
c.translate(0, arg.x - arg.y);
c.beginPath();
c.strokeStyle = 'black';
c.lineWidth = lw;
args.forEach(drawArg);
c.stroke();

(function () {
  var c = bg.getContext("2d");
  bg.width = bg.height = w;
  c.beginPath();
  c.moveTo(w / 2, 0);
  c.lineTo(w / 2, w);
  c.stroke();
  c.moveTo(0, w / 2);
  c.lineTo(w, w / 2);
  c.stroke();
  // هذه القيم مأخودة يدويا
  // يمكن أخد القيم برمجيا لدقة أكبر
  var arr = [142,110,65,12,498,526,558,590,636,688,203,174];
  arr.forEach(function (y) {
    c.beginPath();
    c.arc(w / 2, y, 3, -pi, pi);
    c.fill();
  });
  /*
  var a = 0;
  bg.onclick = function (e) {
    var x = e.layerX, y = e.layerY;
    console.log(x, y);
    c.beginPath();
    c.arc(x, y, 3, -pi, pi);
    c.fill();
    a += 1;
    canvas.style.transform = "rotate(" + 360 * a / 12 + "deg)";
  };
  */
}());