<svg width="0" height="0" viewBox="0 0 400 300">
<defs>
<mask id="mask">
<rect fill="#000000" x="0" y="0" width="400" height="300"></rect>
<circle fill="#FFFFFF" cx="150" cy="150" r="100" />
<circle fill="#FFFFFF" cx="50" cy="50" r="150" />
</mask>
</defs>
</svg>
<div class="container">
<img src="https://assets.codepen.io/5928893/masking-balloons.jpg" alt="Balloons">
</div>
.container img {
height: 300px;
width: 450px;
object-fit: cover;
-webkit-mask-image: url(#mask);
mask-image: url(#mask);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.