JSFiddle - React, Tailwind, and code Playground

by Yunus Gaziev

HTML

<svg id="theMap" width="100%" height="100%" viewBox="0 0 800 800" preserveAspectRatio="xMidYMid meet">

  <circle cx="400" cy="400" r="300" fill="#660"/>
  <g id="arcs" transform=" translate(400 400) rotate(-90) scale(1 -1)">
  </g>
  <circle cx="400" cy="400" r="100" fill="#fff"/>

</svg>

CSS

html, body, div, svg {
  height: 100%;
}

JavaScript

$(function() {
  var perc = 0;
  /*$('#mapWrapper').click(function(){
    update();
  })*/
  update();
  //setInterval(update, 20);

  function update() {
    // requestAnimationFrame(update);
    console.log(perc);
    $("#arcs").empty();

    $("<path />")
      .attr("d", createSvgArc(0, 0, 300, 0, perc))
      .attr("fill", "#ff0")
      .attr("opacity", 0.5)
      .appendTo($("#arcs"));

    perc += Math.PI / 50;
    perc = perc % (Math.PI * 2);

    $("#arcs").html($("#arcs").html());
  }

  function createSvgArc(x, y, r, startAngle, endAngle) {
    if (startAngle > endAngle) {
      var s = startAngle;
      startAngle = endAngle;
      endAngle = s;
    }
    if (endAngle - startAngle > Math.PI * 2) {
      endAngle = Math.PI * 1.99999;
    }

    var largeArc = endAngle - startAngle <= Math.PI ? 0 : 1;

    return [
      "M",
      x,
      y,
      "L",
      x + Math.cos(startAngle) * r,
      y - Math.sin(startAngle) * r,
      "A",
      r,
      r,
      0,
      largeArc,
      0,
      x + Math.cos(endAngle) * r,
      y - Math.sin(endAngle) * r,
      "L",
      x,
      y
    ].join(" ");
  }

  function randomColorAsString() {
    return ( "#" + "0123456789abcdef".split("").map(function(v, i, a) { return i > 5 ? null : a[Math.floor(Math.random() * 16)]; }).join(""));
  }
});