JSFiddle - React, Tailwind, and code Playground

by Christopher

HTML

<div id="one">
    <div class="two"></div>
</div>

CSS

#one {background-color:blue;height:350px;width:350px;position:relative;}
.two {
    height:225px;
    width:225px;
    transform:translateY(-50%);
    margin:0 auto;
    position:relative;
    top:50%;
    background-image:url("http://www.thecreativesheep.ca/wdp/wip/paint_circle2.svg"); 
    background-position:center;
}
.two:after {
    position:absoloute;
     mask:url("http://www.thecreativesheep.ca/wdp/wip/paint_erase.svg")
    mask-type:luminance;
    z-index:2;
}