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'));
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.