<svg width="500" height="400">
  <defs>
    <radialGradient id="grad">
      <stop offset="50%" stop-color="#fff" />
      <stop offset="100%" stop-color="#000" />
    </radialGradient>
    
    <mask id="mask" x="0" y="0" width="100%" height="100%">
      <rect width="100%" height="100%" fill="#000"/>
      <circle id="cursor" r="200" fill="url(#grad)" />
    </mask>
  </defs>
  
  <image xlink:href="https://images.unsplash.com/photo-1490650034439-fd184c3c86a5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80" x="0" y="0" height="100%" width="100%" preserveAspectRatio="xMidYMid slice"/>
  <image xlink:href="https://habrastorage.org/webt/c5/cg/_t/c5cg_tt1kkwhe9_94cfxkucowei.jpeg" x="0" y="0" height="100%" width="100%" preserveAspectRatio="xMidYMid slice" mask="url(#mask)" />
</svg>

const svg = document.querySelector('svg');
const cursor = document.getElementById('cursor');

svg.addEventListener('mousemove', (e) => {
  const svgRect = svg.getBoundingClientRect();
  const x = e.clientX - svgRect.left;
  const y = e.clientY - svgRect.top;
  
  cursor.setAttribute('cx', x);
  cursor.setAttribute('cy', y);
});