let box = document.querySelector(".box");
let img1 = document.querySelector(".img1");
const t = img1.getBoundingClientRect();
let bg = img1.querySelector('image');

function moverCursor(e) {
  let x = e.pageX - t.left - (t.width / 2);
  let y = e.pageY - - (t.height / 2);`top`, `${y}px`);`left`, `${x}px`);`x`, `${-x}px`);`y`, `${-y}px`);
box.addEventListener("mousemove", moverCursor);

.box {
  width: 500px;
  height: 250px;
  border: 2px solid red;
  position: relative;
  background-image: url(;
  overflow: hidden;

.img1 {
  position: absolute;

<div class="box">
  <svg class="img1"  width="150" height="150">
      <filter id="filter">
        <feGaussianBlur stdDeviation="10" />
      <mask id="mask">
        <ellipse cx="50%" cy="50%" rx="40%" ry="40%" fill="white" filter="url(#filter)"></ellipse>
    <image href="" width="500" height="250" mask="url(#mask)"></image>

downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter