JSFiddle - React, Tailwind, and code Playground

HTML

<svg viewBox="0 0 50 50" >
    <clipPath id="clip">
      <circle cx="25"  cy="25"  r="20"
    </clipPath>
</svg>
<div></div>

CSS

svg {
  width: 0em;
  height: 0em;
}

div {
  width: 5em;
  height: 5em;
  background-image: linear-gradient(90deg,yellow,transparent 50%);
  clip-path: url(#clip);
}