JSFiddle - React, Tailwind, and code Playground

by Rolf

HTML

<svg>
  <clipPath id="clip" clipPathUnits="objectBoundingBox">
    <circle cx=".32" cy=".32" r=".25" />
    <circle cx=".32" cy=".68" r=".25" />
    <circle cx=".68" cy=".32" r=".25" />
    <circle cx=".68" cy=".68" r=".25" />
  </clipPath>
</svg>
<main>
<div></div>
</main>

CSS

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

main { background-color: #ccc; }
div {
  width: 5em;
  height: 5em;
  background-image: linear-gradient(90deg, red 10%, white 90%);
  clip-path: url(#clip);
}