<article class="frame">
</article>

<p class="message">Move the mouse around…</p>

body {
  background: #000;
  width: 100vw;
  height: 100vh;
  padding: 0;
  margin: 0;
}

.frame {
  background-image: url(https://hacks.mozilla.org/files/2017/06/benko-game.png);
  background-repeat: repeat-x;
  background-position: left center;
  width: 100%;
  height: 100%;
  
  -webkit-clip-path: circle(80px);
  clip-path: circle(80px);
}

.message {
  position: absolute;
  color: #fff;
  top: 20px;
  left: 20px;
  font-family: monospace;
  font-size: 1.2em;
  background: #0006;
  padding: 1em;
}

let container = document.querySelector('.frame');
const RADIUS = 80;

document.addEventListener('mousemove', function (event) {
  let x = event.clientX;
  let y = event.clientY;
  
  let circle = `circle(${RADIUS}px at ${x}px ${y}px)`;
  container.style['-webkit-clip-path'] = circle;
  container.style['clip-path'] = circle;
});