<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://source.unsplash.com/random?iran/600x400" />
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;
});  

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.