JSFiddle - React, Tailwind, and code Playground

by milanhlinak

HTML

<svg height="200" width="200">
  <image xlink:href="http://www.downloadclipart.net/thumb/17283-ok-icon-vector-thumb.png" x="0" y="0" height="200" width="200"/>
  <path fill="black" opacity="0.5" fill-rule="evenodd" d="M0 0 H200 V200 H0 Z M50 50 H100 V100 H50 Z M80 80 H150 V150 H80 Z" />
</svg>

<br>

<svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <mask id="Mask">
      <rect x="0" y="0" width="200" height="50" fill="white" opacity="0.5"  />
      <rect x="0" y="150" width="200" height="50" fill="white" opacity="0.5" />
      <rect x="0" y="50" width="50" height="100" fill="white" opacity="0.5" />
      <rect x="150" y="50" width="50" height="100" fill="white" opacity="0.5" />
    </mask>
  </defs>
  <image xlink:href="http://www.downloadclipart.net/thumb/17283-ok-icon-vector-thumb.png" x="0" y="0" height="200" width="200"/>
  <rect x="0" y="0" width="200" height="200" mask="url(#Mask)" />
</svg>