JSFiddle - React, Tailwind, and code Playground

HTML

<svg height="200" width="200">
  <defs>
    <mask id="mask1" maskContentUnits="userSpaceOnUse">
      <rect width="200" height="200" fill="white" opacity="0.5"/>
      <path d="M50 50 H100 V100 H50 Z M75 75 H125 V125 H75 Z" />
    </mask>
    <mask id="mask2" maskContentUnits="userSpaceOnUse">
      <rect width="200" height="200" fill="white" opacity="0.5"/>
      <path d="M10 10 H100 V100 H10 Z" />
    </mask>
  </defs>
  <image xlink:href="http://www.downloadclipart.net/thumb/17283-ok-icon-vector-thumb.png" height="200" width="200"/>
  <rect width="200" height="200" mask="url(#mask1)" style="visibility: visible;"  />
  <rect width="200" height="200" mask="url(#mask2)" style="visibility: hidden;" />
</svg>