Replicate a water droplet cursor effect – Blancer.com Tutorials and projects

I am trying to replicate the background magnification cursor effect you can see on this website using html, css, js. Does anyone have an idea of how I can do this? Any help would be welcome.

I have managed to replicate the motion of the bubbles but not the magnification/distortion of the background image within the circles.

<head>
    <meta charset="UTF-8"/>
    <link rel="stylesheet" href="dropplet.css">
</head>


<body>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <script src="dropplet.js"></script>
</body>

const coords = { x: 0, y: 0 };
const circles = document.querySelectorAll(".circle");

circles.forEach(function (circle) {
    circle.x = 0;
    circle.y = 0;
});

window.addEventListener("mousemove", function(e){
  coords.x = e.clientX;
  coords.y = e.clientY;
});

function animateCircles() {

    let x = coords.x;
    let y = coords.y;
    let speed = 0.8;
    // var bw = 3;
    // var w = glass.offsetWidth / 2;
    // var h = glass.offsetHeight / 2;

    circles.forEach(function (circle, index) {
        circle.style.left = x - 20 + "px";
        circle.style.top = y - 20 + "px";
        circle.x = x;
        circle.y = y;

        // circle.style.backgroundSize = (img.width * zoom) + "px " + (img.height * zoom) + "px";
        // circle.style.backgroundPosition = "-" + ((x * zoom) - w + bw) + "px -" + ((y * zoom) - h + bw) + "px";
        circle.style.scale = ((1.5 - 1) * (index - 1) / (20 - 1)) + 1;

        const nextCircle = circles[index + 1] || circles[0];

        x += (nextCircle.x - x) * speed;
        y += (nextCircle.y - y) * speed;
    
    });

    requestAnimationFrame(animateCircles);
}


animateCircles();