JSFiddle - React, Tailwind, and code Playground
by Fred Fourie
HTML
<svg width="100" height="100">
<circle cx="50" cy="50" r="45" stroke="black" stroke-width="1" fill="white" />
<circle cx="50" cy="50" r="50" stroke="black" stroke-width="1" fill="none"/>
<polygon points="50,10 53,20 53,85 47,85 47,20 50,10" fill="#4D4D4D" transform="rotate(180,50,50)" id="point">
</polygon>
<polygon points="50,15 65,20 65,85 35,85 35,20 50,15" fill="#FFFF33" opacity="0.9" style="stroke:black" transform="rotate(270,50,50)">
</polygon>
</svg>