JSFiddle - React, Tailwind, and code Playground

HTML

<div id="box">
    <svg id="dark">
        <defs>
          <radialGradient id="rade" r="50%" cx="50%" cy="50%">
             <stop stop-color="green" offset="0%" stop-opacity="1"	/>
             <stop stop-color="green" offset="50%" stop-opacity="1"	/>
             <stop stop-color="back" offset="100%"stop-opacity="1"	/>
          </radialGradient>
        </defs>
       <rect x="0" y="0" height="200" width="200"/> 
       <circle cx="90" cy="100" r="40" style="fill:url(#rade)"/>
    </svg>
</div>

CSS

#box{
    width: 200px;
    height:200px;
    background-color: red;
    position:relative;
}
#dark{
      position:absolute;
      top:0px;left:0px;
      width:200px;
      height:200px;
}
#dark > rect{
    fill:#000;
}

JavaScript

//problem in general: green should be red
//of course I tried cut, using mask but I give up finally after hours works