JSFiddle - React, Tailwind, and code Playground

by Reshma S Raveendran

HTML

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="-10 -10 220 220" width="200px" height="200px" >

  <g fill="none" stroke-width="20" transform="translate(100,100)" >
    <path d="M 0,-100 A 100,100 0 0,1 16.6,-98" stroke="red"/>
    <path d="M 16.6,-98 A 100,100 0 0,1 86.6,50" stroke="#b3b3b3"/>
    <path d="M 86.6,50 A 100,100 0 0,1 46.6,10" stroke="red"/>
    <path d="M 0,100 A 100,100 0 0,1 -86.6,50" stroke="#666666"/>
    <path d="M -86.6,50 A 100,100 0 0,1 -86.6,-50" stroke="#666666"/>
    <path d="M -86.6,-50 A 100,100 0 0,1 0,-100" stroke="#666666"/>
  </g>
</svg>