I've got a large map made up of hexagons in one large SVG. I've created this function in which as the user hovers over the SVG, it adds an event listener to every hexagon which in turn performs a function that compares the distance between the mouse and each hexagon, and in turn gets those within a distance of 30px and adds CSS styling to them which makes them proportionally scale down in size in regards to the mouse position.

This works well enough but it can get pretty choppy when hovering over a lot of hexagons and or increasing the distance detection. I'm an amateur when it comes to all of this so I might not be aware of much easier and probably more optimal ways of going about this.

Here's the code:

function hexagonHover() {
    for (i = 0; i < poly.length; i++) {
        poly[i].addEventListener('mouseover', function (event) {
            for (i = 0; i < poly.length; i++) {

                var pos = poly[i].getBoundingClientRect();

                let _x = Math.round(pos.left + pos.width / 2);
                let _y = Math.round(pos.top + pos.height / 2);
                
                var mouseX = Math.round(event.clientX);
                var mouseY = Math.round(event.clientY);

                var a = _x - mouseX;
                var b = _y - mouseY;

                var dist = Math.round(Math.sqrt(a * a + b * b));

                if (dist <= 30) {

                    let v = mapRange(dist, 0, 30, 1.2, 0.2);

                    poly[i].style.webkitTransform = poly[i].style.transform =
                        "scale(" + v + ")";
                    poly[i].style.webkitTransform = poly[i].style.transformOrigin =
                        "center";
                    poly[i].style.webkitTransform = poly[i].style.transformBox = "fill-box";
                    poly[i].style.transition = "transform ease 1s";
                } else {
                    poly[i].style.webkitTransform = poly[i].style.transform = "scale(1.0)";
                }
            }
        });
    }
}

Here's a codepen which demonstrates the effect albeit on a much smaller scale