HTML
CSS
JavaScript
<div class='masked-box'></div>
.masked-box { width: 300px; height: 200px; background-color: #3498db; mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><circle cx="50" cy="50" r="50" fill="white"/></svg>'); mask-position: 100px 0; mask-size: 100px 100px; -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><circle cx="50" cy="50" r="50" fill="white"/></svg>'); -webkit-mask-position: 100px 0; -webkit-mask-size: 100px 100px; }}
// No JavaScript required for this demo