JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/mbostock/d3/a92f8b3ed092f7b1eeb5c92a473121e67836bef8/d3.min.js"></script>
<div id="wheel"></div>
<div id="cursor"></div>

CSS

#cursor {
  width: 50px;
  height: 50px;
  background: black;
  border-radius: 50px;
  position: absolute;
  margin-top: -25px;
  left: -25px;
  
}

#wheel {
  position: absolute;
  width: 100%;
  height: 100%;
    
}

JavaScript

var arc, data, padding, steps, r=window.innerHeight/2, pi = Math.PI;
padding = 2 * r / 200, cursor=document.getElementById("cursor");
arc = d3.svg.arc().innerRadius(0).outerRadius(r).startAngle(function(d) {
  return d.startAngle;
}).endAngle(function(d) {
  return d.endAngle;
});
steps = 2;
data = d3.range(180).map(function(d, i) {
  i *= steps;
  return {
    startAngle: i * (pi / 180),
    endAngle: (i + 2) * (pi / 180),
    fill: d3.hsl(i, 1, .5).toString()
  };
});
d3.select("#wheel").insert('svg', 'svg').attr("id", "icon").append('g').attr("transform", "translate(" + r + "," + r + ") rotate(90) scale(-1,1)").selectAll('path').data(data).enter().append('path').attr("d", arc).attr("stroke-width", 1).attr("stroke", function(d) {
  return d.fill;
}).attr("fill", function(d) {
  return d.fill;
});

window.onmousemove = function(e){
  cursor.style.left = e.pageX + "px";
  cursor.style.top = e.pageY + "px";
}