<div class="container">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/721250/otsukuri.jpg" width="357" height="476" class="blurred">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/721250/otsukuri.jpg" width="357" height="476" class="masked">
</div>

.blurred {
  filter: blur(12px);
}

.masked {
  mask-image: radial-gradient(
    rgb(0, 0, 0) 0,
    rgb(0, 0, 0) 25%,
    rgba(0, 0, 0, 0.0) 30%
  );
  mask-position: calc(var(--pos-x) * 1px) calc(var(--pos-y) * 1px);
  mask-repeat: no-repeat;
}


html,
body {
  height: 100%;
}

html {
  font-family: system-ui;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  background: #0F141A;
}

.container {
  position: relative;
  width: 300px;
  height: 300px;
}

.container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.toggle {
  margin-bottom: 1rem;
}

const img = document.querySelector(".masked");
img.addEventListener("mousemove", ev => {
  const centerX = img.clientWidth / 2.0;
  const centerY = img.clientHeight / 2.0;
  const px = ev.offsetX - centerX;
  const py = ev.offsetY - centerY;
  document.documentElement.style.setProperty('--pos-x', px);
  document.documentElement.style.setProperty('--pos-y', py);
});