JSFiddle - React, Tailwind, and code Playground
by Abdul Ahmad
HTML
<svg viewBox='0 0 500 500'>
<g id="jvs-content" transform="matrix(0.8, 0, 0, 0.8, -50, -50)" enable-background="new">
<ellipse cx="303.571" cy="309.821" rx="200" ry="200" fill="none" stroke="rgba(185,89,89,1)" stroke-width="100" stroke-linecap="butt" stroke-linejoin="miter" opacity="1" transform="matrix(1 0 0 1 14.2844 42.8533)" filter="">
</ellipse>
<path fill="none" stroke="rgba(255,255,255,1)" stroke-width="8" stroke-linecap="round" stroke-linejoin="miter" opacity="1" d="M 142.29440307617188 211.3655548095703 L 142.2943878173828 272.2132263183594" transform="matrix(0.951465 -0.307757 0.307757 0.951465 -63.4736 20.3193)">
<text text='one'></text>
</path>
<path fill="none" stroke="rgba(255,255,255,1)" stroke-width="8" stroke-linecap="round" stroke-linejoin="miter" opacity="1" d="M 142.29434204101562 196.93846130371094 L 142.29434204101562 253.6328582763672" transform="matrix(0.212325 -0.977199 0.977199 0.212325 -65.4844 333.504)">
</path>
<path fill="none" stroke="rgba(255,255,255,1)" stroke-width="8" stroke-linecap="round" stroke-linejoin="miter" opacity="1" d="M 142.29440307617188 211.3655548095703 L 142.2943878173828 272.2132263183594" transform="matrix(-0.123442 -0.992351 0.992351 -0.123442 -93.768 641.221)">
</path>
<path fill="none" stroke="rgba(255,255,255,1)" stroke-width="8" stroke-linecap="round" stroke-linejoin="miter" opacity="1" d="M 142.29434204101562 196.93846130371094 L 142.29434204101562 253.6328582763672" transform="matrix(-0.919876 -0.392207 0.392207 -0.919876 213.457 702.059)">
</path>
<path fill="none" stroke="rgba(255,255,255,1)" stroke-width="8" stroke-linecap="round" stroke-linejoin="miter" opacity="1" d="M 142.29440307617188 211.3655548095703 L 142.2943878173828 272.2132263183594" transform="matrix(-0.928607 -0.371064 0.371064 -0.928607 407.95 851.927)">
</path>
<path fill="none"...
CSS
svg {
}