JSFiddle - React, Tailwind, and code Playground

by alexb

HTML

<svg width="530" height="530"></svg>

Babel + JSX

var R = 265,
    c = 10,
    a1 = 2 * Math.asin(c/(R*2)),
    a2 = Math.PI/2 - a1,
    h = R * (1-Math.cos(a2/2));

var vis = d3.select("svg");
for (var i = 0; i < 4; i++) {
  var start = Math.PI/2 * i + Math.PI/4;
  var arc = d3.svg.arc()
    .innerRadius(0)
    .outerRadius(R)
    .startAngle(start)
    .endAngle(start + a2);
    
  vis.append("path")
    .attr("d", arc)
    .attr("transform", "translate("+R+","+R+")");
}