JSFiddle - React, Tailwind, and code Playground

HTML

<img src="http://upload.wikimedia.org/wikipedia/commons/5/51/Fox_Head.jpg" alt="" style="position: absolute; width: 300px;">

<svg style="position: absolute; width: 300px; height: 300px;">
  <!--
    This `path` element draws 3 squares:
      1. A gray 300x300 square
      2. A transparent 100x100 square
      3. Another transparent 100x100 square
    
    The key mechanism for creating transparent regions in the shape is
    `fill-rule="evenodd"`. This attribute effects pixel colors in the following
    way. Pick a pixel and draw an infinitely long line in any direction:
      - If the line crosses an odd number of lines, the pixel receives the fill
        color. In this fiddle, the infinite line extending from any gray pixel
        crossed an odd number of lines -- for example, just the line that is the
        perimeter of the gray rectangle.
      - If the line crosses an even number of lines, the pixel is transparent.
        In this fiddle, the infinite line extending from any transparent pixel
        crossed an even number of lines -- for example, the perimeters of the
        transparent square and the gray square.
  -->
  <path
    fill="grey"
    fill-rule="evenodd"
    d="
      M 0 0
      h 300
      v 300
      h -300
      Z
      
      M 25 50
      h 100
      v 100
      h -100
      Z
      
      M 175 50
      h 100
      v 100
      h -100
      Z
    "
  />
</svg>