<svg width="400" height="200" viewbox="-200 -100 400 200">
   <defs>
      <rect id="lower-rectangle" x="-200" y="-100" width="400" height="200" />
      
      <mask id="mask">
         <use href="#lower-rectangle" fill="white" />

         <circle cx="0" cy="0" r="50" fill="black" />
      </mask>
   </defs>

   <rect x="-200" y="-100" width="400" height="200" fill="#fffbda" />

   <use href="#lower-rectangle" mask="url(#mask)" fill="red" />
</svg>
body {
   display: flex;
   min-height: 100vh;
   align-items: center;
   justify-content: center;

   background: linear-gradient(
      150deg,
      rgba(255, 255, 255, 1) 0%,
      rgba(102, 179, 197, 0.7) 50%,
      rgba(151, 212, 224, 0.7) 100%
   );
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.