CodePen Embed - SVG Clip-path Example

<svg width="400" height="200" viewbox="-200 -100 400 200">
   <defs>
      <clipPath id="clip-path">
         <circle cx="0" cy="0" r="50" />
      </clipPath>
   </defs>

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

   <rect clip-path="url(#clip-path)" x="-200" y="-100" width="400" height="200" 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

This Pen is owned by Maxwell Antonucci on CodePen.

See more by @max1128 on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.