<select id="select">
<option value="add">add</option>
<option value="subtract">subtract</option>
<option value="intersect">intersect</option>
<option value="exclude" selected>exclude</option>
</select>
<img src="https://picsum.photos/600/400" />
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3rem;
min-height: 100vh;
}
select {
padding: .5em 1em;
}
img {
width: 250px;
max-width: 100%;
display: block;
margin: 0 auto;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24.394 24.394'%3E%3Ccircle cx='12.197' cy='12.197' r='12.197'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 297 297'%3E%3Cpath d='M294.061 101.395a9.869 9.869 0 00-6.976-2.887l-88.617.012.013-88.655a9.868 9.868 0 00-2.888-6.977A9.868 9.868 0 00188.616 0l-80.188.012c-5.445.002-9.859 4.415-9.86 9.86l-.016 88.662-88.626.014c-5.446 0-9.86 4.415-9.861 9.86L.051 188.63a9.863 9.863 0 009.865 9.865l88.621-.012-.014 88.653a9.86 9.86 0 009.866 9.865l80.187-.016c5.445 0 9.859-4.415 9.86-9.86l.014-88.658 88.629-.016c5.445 0 9.859-4.415 9.86-9.86l.012-80.22a9.876 9.876 0 00-2.89-6.976z'/%3E%3C/svg%3E");
-webkit-mask-size: 150px, 200px;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-composite: exclude;
}
var element = document.querySelector('img');
var select = document.querySelector('#select');
select.addEventListener("change", function (e) {
element.style.MaskComposite = e.target.value;
element.style.webkitMaskComposite = e.target.value;
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.