JSFiddle - React, Tailwind, and code Playground

by Felipe Alfaro

HTML

<svg width="500" height="500">
  <defs>
    <linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%"   stop-color="#05a"/>
      <stop offset="100%" stop-color="#0a5"/>
    </linearGradient>
  </defs>
  <circle cx="250" cy="250" r="200" stroke="grey" stroke-width="50" fill="transparent"/>
  <pathd="M 250,50 A 200 200 0 1 1 250 450 A 200 200 0 1 1 250 50" stroke="url(#linear)" stroke-linecap="round" stroke-width="50" fill="transparent" stroke-dasharray="750,1256" />
</svg>