JSFiddle - React, Tailwind, and code Playground

by k_sav

HTML

<svg width="500" height="500">
    <defs>
<radialGradient id="exampleGradient"> 
      <stop offset="10%" stop-color="red"/> 
      <stop offset="95%" stop-color="white"/> 
    </radialGradient>

        <mask id="donutMask">
            <circle cx="250" cy="250" r="150" fill="white"/>
            <circle cx="250" cy="250" r="120"/>
        </mask>
    </defs>
    <circle fill="url(#exampleGradient)" id="donut" cx="250" cy="250" r="200" mask="url(#donutMask)"/>
</svg>