Fondo SVG de polígonos que responden al ratón con JavaScript y CSS

Transformar una imagen SVG estática en un fondo interactivo que responda al ratón puede enriquecer cualquier proyecto web, desde portfolios hasta sitios corporativos. En este artículo explico paso a paso cómo convertir un fondo de polígonos generado con Haikei en un fondo reactivo que modifica colores al pasar el ratón, y cómo adaptar este patrón a soluciones profesionales desarrolladas por Q2BSTUDIO, especialistas en aplicaciones a medida y software a medida.

Preparar el SVG: genera tu patrón en Haikei, ajusta dimensiones para escritorio y móvil y exporta el SVG. Para poder manipular cada triángulo por separado necesitas que cada path tenga un identificador único, por ejemplo Vector1, Vector2, Vector3, etc. Puedes asignar IDs en Figma antes de exportar o editar el código SVG en tu proyecto. Conviene también que el elemento SVG tenga un viewBox amplio y que su contenedor ocupe toda la pantalla para que el efecto cubra el área deseada.

Inicialización de datos: al cargar la página recorre todos los polígonos y crea un array de objetos con cuatro propiedades clave por elemento: id para referenciar el elemento del DOM, color original para poder restaurarlo, el centro geométrico calculado con getBoundingClientRect en el momento de inicializar, y un valor de distancia al ratón que se actualizará cada frame. Almacenar el centro de cada polígono evita llamar a getBoundingClientRect en cada movimiento del ratón, mejorando el rendimiento.

Bucle de ratón: añade un listener para mousemove y actualiza la posición del puntero. En cada evento recorre el array de polígonos, calcula la distancia euclidiana entre el centro del polígono y la posición del ratón y guarda ese valor en la estructura. Para evitar sobrecarga, envía las actualizaciones de estilo a requestAnimationFrame o aplica throttling si la animación no requiere alta frecuencia.

Aplicar color según distancia: con la distancia calculada normaliza el valor dentro de un rango máximo y calcula una nueva luminosidad o un desplazamiento de color. Una estrategia sencilla es usar HSL y variar la componente lightness en función de la distancia, aplicando el resultado tanto al fill como al stroke del path y usando transiciones suaves. Por ejemplo, normalizar entre un mínimo y un máximo y multiplicar la luminosidad original por ese factor para obtener degradados sutiles de luz a oscuro alrededor del cursor.

Ejemplo conceptual de pasos lógicos sin código literal: inicializar array de polígonos con id color centro y distancia; al mover el ratón actualizar posición y para cada polígono calcular distancia y normalizar; según la normalización calcular nueva lightness y aplicar al estilo fill y stroke con transición. Guarda el color original para permitir volver al estado inicial cuando el ratón sale.

Variaciones creativas: además del oscurecimiento puedes invertir el efecto para aclarar polígonos cercanos, agregar un halo o glow usando filtros SVG o sombras suaves, o mezclar cambios de saturación y matiz para efectos más coloridos. Si quieres integrar este fondo en una web más sobria reduce la intensidad o el radio de influencia para que sea un acento discreto.

Optimización y buenas prácticas: calcula centros solo en inicialización o en resize, usa requestAnimationFrame para aplicar cambios de estilo, limita el número de propiedades que se actualizan y evita layout thrashing. Si trabajas con muchos elementos valora agrupar polígonos o aplicar efectos sobre capas precompuestas para reducir el coste de repintado.

Uso en proyectos profesionales: este tipo de fondo es ideal como recurso visual en páginas de producto, landing pages o cabeceras interactivas. En Q2BSTUDIO desarrollamos soluciones a medida que integran efectos visuales y rendimiento, desde aplicaciones a medida y software a medida hasta proyectos que combinan inteligencia artificial y diseño web. Si buscas añadir interactividad con enfoque empresarial podemos adaptar la técnica a tus necesidades, incorporando control de accesibilidad, rendimiento en dispositivos móviles y compatibilidad con servicios cloud.

Servicios complementarios: además del desarrollo front end personalizado podemos ayudarte con despliegue y escalado en inteligencia artificial aplicada a productos, o integrar los sistemas con arquitecturas seguras y gestionadas en servicios cloud aws y azure. También ofrecemos servicios de ciberseguridad y pentesting para proteger tus aplicaciones y datos, así como servicios de inteligencia de negocio y dashboards con power bi para explotar la información generada por usuarios y comportamientos en la interfaz.

Conclusión: convertir un SVG de Haikei en un fondo que responde al ratón es una técnica versátil y ligera si se planifica bien la estructura de datos y se optimiza el bucle de animación. Es una forma elegante de dar vida a interfaces, y en Q2BSTUDIO podemos implementarla dentro de proyectos más amplios que requieren software a medida, ia para empresas, agentes IA y soluciones cloud. Si quieres que diseñemos o integremos este tipo de fondo en tu web o aplicación contacta con nosotros y te mostraremos opciones adaptadas a tu proyecto.