JSFiddle - React, Tailwind, and code Playground

by WILLIAM CORREA

HTML

<div class="pic">
    <svg class="blur" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">
        <defs>
            <filter id="filter2">
                <feGaussianBlur stdDeviation="5" />
            </filter>
            <mask id="mask1">
                <circle cx="-50%" cy="-50%" r="40" fill="white" filter="url(#filter2)" />
            </mask>
            <mask id="mask2">
                <rect x="0" y="0" width="100%" height="100%" fill="white" />
                <circle cx="-50%" cy="-50%" r="30" fill="black" fill="black" filter="url(#filter2)" />
            </mask>
        </defs>
        <image mask="url(#mask1)" xlink:href="http://i.imgur.com/IGKVr8r.png" width="100%" height="100%" ></image>
        <image mask="url(#mask2)" xlink:href="http://i.imgur.com/IGKVr8r.png" width="100%" height="100%" filter="url(#filter2)"></image>
    </svg>
</div>

CSS

body {
    margin: 0;
}
.pic {
    text-align: center;
    position: relative;
    height: 250px;
}
.blur {
    height: 100%;
}
.overlay {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
}

JavaScript

var mask1 = $('#mask1 circle')[0];
var mask2 = $('#mask2 circle')[0];
$('.pic').mousemove(function (event) {
    event.preventDefault();
    var upX = event.clientX;
    var upY = event.clientY;
    console.log(upX, upY);
    mask1.setAttribute("cy", (upY - 5) + 'px');
    mask1.setAttribute("cx", (upX) + 'px');
    mask2.setAttribute("cy", (upY - 5) + 'px');
    mask2.setAttribute("cx", (upX) + 'px');
});