Try it Yourself: SVG Clip and Mask

SVG Clip and Mask

<!DOCTYPE html>
<html>
<body>

<svg viewBox="0 0 120 120">
  <clipPath id="circleClip">
    <circle cx="60" cy="60" r="45" />
  </clipPath>
  <rect x="0" y="0" width="120" height="120" fill="#f39c12"
        clip-path="url(#circleClip)" />
</svg>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<svg viewBox="0 0 120 120">
  <clipPath id="circleClip">
    <circle cx="60" cy="60" r="45" />
  </clipPath>
  <rect x="0" y="0" width="120" height="120" fill="#f39c12"
        clip-path="url(#circleClip)" />
</svg>

</body>
</html>