JSFiddle - React, Tailwind, and code Playground

HTML

<svg viewBox="0 0 100 100" >
    <clipPath id="clip">
      <circle cx="50" cy="50" r="25" />
    </clipPath>
 
  <use clip-path="#clip" x="50" y="50"/>
</svg>

CSS

svg {
  background-image: linear-gradient(90deg,yellow,transparent);
}