<div class="box">
</div>

<div class="box">
</div>
body {
  padding: 0;
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.box {
  background-color: #8cffa0;
  
  -webkit-mask-image: url(https://hsto.org/webt/63/22/f2/6322f2f0b4422699382932.png);
  mask-image: url(https://hsto.org/webt/63/22/f2/6322f2f0b4422699382932.png);
  
  mask-repeat:no-repeat;
  -webkit-mask-repeat:no-repeat;
  
  mask-size: calc(20vw + 20vh);
  -webkit-mask-size: calc(20vw + 20vh);
  
  width: calc(20vw + 20vh);
  height: calc(20vw + 20vh);
}

.box:nth-child(2) {
  background-color: tomato;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.