<div class="mask cat-mask"></div>
<div class="mask bat-mask"></div>

.mask {
  mask-size: 100% 100%;
  mask-repeat: no-repeat;

  /* chrome requires this, firefox does not */
  -webkit-mask-size: 100% 100%;
}

.cat-mask {
  --size: clamp(10rem, 40dvh, 28rem);

  /* chrome still requires prefixed property */
  -webkit-mask-image: url("https://raw.githubusercontent.com/robole/artifice/main/witchin-masks/img/cat.webp");
  mask-image: url("https://raw.githubusercontent.com/robole/artifice/main/witchin-masks/img/cat.webp");

  align-self: end;
}

.bat-mask {
  --size: clamp(8rem, 30dvh, 22rem);

  -webkit-mask-image: url("https://raw.githubusercontent.com/robole/artifice/main/witchin-masks/img/bat.webp");
  mask-image: url("https://raw.githubusercontent.com/robole/artifice/main/witchin-masks/img/bat.webp");

  position: absolute;
  top: -2rem;
}

div {
  width: var(--size);
  height: var(--size);

  background: radial-gradient(#eb6122, #431c52);
}

body {
  position: relative;
  background-color: black;
  height: 100dvh;
  width: auto;
  display: grid;
  place-items: center;
}