JSFiddle - React, Tailwind, and code Playground

HTML

<svg
      id="canvas"
      width="380"
      height="380"
      style="border: 1px black solid;"
    ></svg>

JavaScript

const canvas = document.getElementById("canvas");

const smallRadius = 180;
const smallCenter = { X: 380, Y: 380 };
const bigRadius = 300;
const bigCenter = { X: 300, Y: 300 };

const startAngle = Math.PI;
const endAngle = Math.PI * 1.5;
const stepCount = 5;

let { big: bigArcStart, small: smallArcStart } = getArcsPoints(
  startAngle
);

const step = (endAngle - startAngle) / stepCount;

for (let angle = startAngle + step; angle <= endAngle; angle += step) {
  let { big: bigArcEnd, small: smallArcEnd } = getArcsPoints(angle);

  const path =
    `M ${smallArcStart.X} ${smallArcStart.Y} ` +
    `L ${bigArcStart.X} ${bigArcStart.Y} ` +
    `A ${bigRadius} ${bigRadius} 0 0 1 ${bigArcEnd.X} ${bigArcEnd.Y} ` +
    `L ${smallArcEnd.X} ${smallArcEnd.Y} ` +
    `A ${smallRadius} ${smallRadius} 0 0 0 ${smallArcStart.X} ${smallArcStart.Y}`;

  const pathElm = document.createElementNS(
    "http://www.w3.org/2000/svg",
    "path"
  );
  pathElm.setAttributeNS(null, "d", path);
  pathElm.setAttributeNS(
    null,
    "fill",
    `#${Math.random().toString(16).substr(2, 6)}`
  );
  pathElm.setAttributeNS(null, "stroke", "black");

  canvas.appendChild(pathElm);

  bigArcStart = bigArcEnd;
  smallArcStart = smallArcEnd;
}

function getArcsPoints(angle) {
  const sin = Math.sin(angle);
  const cos = Math.cos(angle);
  const big = {
    X: bigCenter.X + bigRadius * cos,
    Y: bigCenter.Y + bigRadius * sin,
  };
  const small = {
    X: smallCenter.X + smallRadius * cos,
    Y: smallCenter.Y + smallRadius * sin,
  };
  return { big, small };
}