Как реализовать прозрачность вокруг указателя?

let d = [[100,100,70], [300,100,60], [500,100,50]] 
         .map(d=>({x: d[0], y: d[1], r: d[2]})); 
let mask = circles('mask').call(upd); 
   
circles('g').style('fill','transparent') 
  .style('cursor','pointer') 
  .call(upd) 
  .call(d3.drag().on("drag", function (d) { 
    d3.select(this) 
      .attr("cx", d.x = d3.event.x) 
      .attr("cy", d.y = d3.event.y); 
    mask.call(upd)   
  })); 
 
function circles(selector) { 
  return d3.select(selector) 
           .selectAll('circle') 
           .data(d) 
           .enter() 
           .append('circle') 
} 
 
function upd(selection) { 
   selection.attr("cx", d => d.x) 
            .attr("cy", d => d.y) 
            .attr('r',  d => d.r); 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script> 
<svg viewBox="0 0 600 600"> 
<defs> 
  <filter id="blurfilter" width="110%" height="100%"> 
  	<feGaussianBlur stdDeviation="12" result="blur" /> 
  </filter> 
  <mask id="hole"> 
    <rect width="100%" height="100%" fill="#fff"/> 
  </mask> 
</defs> 
<image x="-50%" y="-50%" height="200%" width="200%" 
       xlink:href="https://i.imgur.com/cdqfoqZ.png"/> 
<image mask="url(#hole)" filter="url(#blurfilter)" 
       x="-50%" y="-50%" height="200%" width="200%" 
       xlink:href="https://i.imgur.com/cdqfoqZ.png" /> 
<g></g> 
</svg>