<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.