Tengo un mapa grande hecho de hexágonos en un SVG grande. Creé esta función en la que, cuando el usuario se desplaza sobre el SVG, agrega un detector de eventos a cada hexágono que, a su vez, realiza una función que compara la distancia entre el mouse y cada hexágono y, a su vez, los obtiene dentro de una distancia de 30px y les agrega estilo CSS, lo que hace que se reduzcan proporcionalmente en tamaño con respecto a la posición del mouse.

Esto funciona lo suficientemente bien, pero puede volverse bastante entrecortado al pasar el mouse sobre muchos hexágonos o al aumentar la detección de distancia. Soy un aficionado en lo que respecta a todo esto, por lo que es posible que no conozca formas mucho más fáciles y probablemente más óptimas de hacerlo.

Aquí está el código:

 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)"; } } }); } }

Aquí hay un codepen que demuestra el efecto, aunque en una escala mucho más pequeña.