JSFiddle - React, Tailwind, and code Playground

by Tom Bristol

HTML

<body>
<svg viewbox="0 0 100 100" height="100%" width="100%">
  <defs>
    <mask id="mask" x="0" y="0" width="80" height="80">
      <rect x="5" y="5" width="100%" height="100%" fill="#ffffff" />
      <circle cx="50%" cy="40%" r="30%" />
    </mask>
  </defs>
  <rect x="0" y="0" width="100%" height="100%" mask="url(#mask)" fill="blue" fill-opacity="0.6"/>    
</svg>
<svg viewbox="0 0 100 100" height="100%" width="100%">
<circle cx="50%" cy="40%" r="30%" fill="red" fill-opacity="0.5" />
</svg>
</body>

CSS

svg:nth-child(2) {
  margin-top:-100%;
  position:relative;
  top:-18px;
}
body {
  background-image: url(http://bennettfeely.com/clippy/pics/pittsburgh.jpg);
  
}