JSFiddle - React, Tailwind, and code Playground

HTML

<svg width="800" height="500">
    <filter id="f1" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
    </filter>
  <mask id="mask1" x="0" y="0" width="800" height="800" >
    <g filter="url(#f1)"></g>
  </mask>
    <image xlink:href="http://placehold.it/800x500" x="0" y="0" width="800" height="500"/>
    <image xlink:href="http://placehold.it/800x500/E8117F/6C0238" x="0" y="0" width="800" height="500" style="mask: url(#mask1)"/>
</svg>

CSS

* {
    margin: 0;
    padding: 0;
}

JavaScript

var mask = document.querySelector("svg #mask1");
var g = document.querySelector("svg #mask1 g");

document.onmousemove = function(e)
{
    if(e.which == 1)
    {
        var circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
        circle.setAttribute("cx", e.x);
        circle.setAttribute("cy", e.y);
        circle.setAttribute("r", 30);
        circle.setAttribute("fill", "white");
        g.appendChild(circle);
    }
}