JSFiddle - React, Tailwind, and code Playground

by Emanuel Vecchio

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="b">click me</button>
<div class="container">
<img class="background" src="http://lorempixel.com/500/500/sports/2/">
<div class="overlayer"></div>
<img id="a" class="viewport" src="http://lorempixel.com/500/500/sports/2/">
</div>

<svg width="0" height="0">
  <defs>
    <clipPath id="image-clip">
      <rect id="image-clip-shape" x="150" y="150" width="200" height="200" rx="100" />
    </clipPath>
  </defs>
</svg>

CSS

.container {
  position: relative;
}

.background { 
  position: absolute;
  top: 0;
  left: 0;
}

.overlayer {
  position: absolute;
  top: 0;
  left: 0;
  width: 500px;
  height: 500px;
  background: black;
  opacity: 0.5;
}

.front{
  position: relative;
  top: 0;
}

.viewport {
  position: relative;
  -webkit-clip-path: url(#image-clip);
  clip-path: url(#image-clip);
  transition: all .2s ease-in-out;
}

JavaScript

var a = document.getElementById("image-clip-shape");
var b = document.getElementById("b");

b.addEventListener('click', function(e) {
  console.log(e);
  console.log(a.rx);
  console.log(a.rx.baseVal.value);
  if (a.rx.baseVal.value == 100) {
    a.setAttribute('rx', "0");
  } else {
    a.setAttribute('rx', "100");
  }
  //a.classList.toggle('boxed');
});