JSFiddle - React, Tailwind, and code Playground
by DOK_UA
HTML
<svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">
<defs> <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:black" /> <stop offset="50%" style="stop-color:gray" /><stop offset="100%" style="stop-color:black" /> </linearGradient> </defs>
<circle r="70" cy="80" cx="80" stroke-width="8" stroke="#6fdb6f" fill=url(#grad1) stroke-dasharray="440" stroke-dashoffset="150" transform="rotate(23, 80, 80)" />
</svg>