Create a blue square with a red circle mask.

HTML

<div class="a"></div>
<div class="b"></div>

CSS

div {
  width: 200px;
  height: 200px;
  &.a {
    mask-image: var(--urlA);
    background-color: blue;
  }
  &.b {
    mask-image: var(--urlB);
    background-color: green;
  }
}

JavaScript

const svgURL = URL.createObjectURL(new Blob([`
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <style>svg :not(:target, :target *) {display: none}</style>
  <circle cx="50" cy="50" r="50" fill="red" id="a"/>
  <rect x="10" y="10" width="50" height="50" transform="rotate(30 30 40)" fill="red" id="b"/>
</svg>
`], { type: "image/svg+xml" }));
document.body.style.setProperty("--urlA", `url("${svgURL}#a"`);
document.body.style.setProperty("--urlB", `url("${svgURL}#b"`);