Как при наведении на картинку(вначале ее не видно) сделать появляющийся вокруг курсора круг, который будет показывать картинку в пределах этого круга?

let $svg = document.querySelector('svg')
let $img = document.querySelector('#img')

$svg.addEventListener('mouseenter', () => {
  window.addEventListener('mousemove', mouseMoveHandler)
})

$img.addEventListener('mouseout', () => {
  window.removeEventListener('mousemove', mouseMoveHandler, false)
  $img.style.clipPath = ''
})

function mouseMoveHandler(e) {
  $img.style.clipPath = 'circle(100px at '+e.pageX+'px '+e.pageY+'px)'
}

#img {
  clip-path: circle(0 at 0 0);
}

<svg width="500" height="322">
  <image id="img" width="500" height="322" href="https://images.unsplash.com/photo-1497633762265-9d179a990aa6?w=500"></image>
</svg>