body {
  overflow: hidden; height: 100vh; --xy: 50% 50%; --r: 80vh;
  background: radial-gradient(circle at var(--xy), #0000, #000f var(--r)),
              url(https://static.tildacdn.com/tild3739-3238-4537-b032-366333646561/_1.jpg);
  background-size: cover;
  background-position: 50% 50%;

let prop = (a, b) => document.body.style.setProperty(a, b)
addEventListener('mousemove', e => prop('--xy', e.x + 'px ' + e.y + 'px'));
addEventListener('mousedown', e => prop('--r', '60vh'));
addEventListener('mouseup', e => prop('--r', '30vh'));