JSFiddle - React, Tailwind, and code Playground

by Ayyappan Sakthivadivel

HTML

<svg width="1000" height="1000">
<defs>
<linearGradient id="lgrad" x1="0%" y1="49%" x2="100%" y2="51%" >
<stop offset="0%" style="stop-color:rgb(255,230,0);stop-opacity:1" />
<stop offset="21%" style="stop-color:rgb(255,228,25);stop-opacity:1" />
<stop offset="43%" style="stop-color:rgb(255,214,10);stop-opacity:1" />
<stop offset="47%" style="stop-color:rgb(255,204,18);stop-opacity:1" />
<stop offset="58%" style="stop-color:rgb(255,123,0);stop-opacity:1" />
<stop offset="62%" style="stop-color:rgb(255,123,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,123,0);stop-opacity:1" />
</linearGradient>
</defs>
  <path fill-rule="evenodd" class="fill-clr" fill="url(#lgrad)" clip-rule="evenodd" d="M416.196 72.6198C226.664 72.6198 73.0182 226.266 73.0182 415.798C73.0182 605.33 226.664 758.976 416.196 758.976C605.729 758.976 759.375 605.33 759.375 415.798C759.375 226.266 605.729 72.6198 416.196 72.6198ZM1.39842 415.798C1.39842 186.711 187.11 1 416.196 1C645.283 1 830.994 186.711 830.994 415.798C830.994 644.885 645.283 830.596 416.196 830.596C187.11 830.596 1.39842 644.885 1.39842 415.798Z" />
</svg>