Tengo una imagen pixelada del mundo con puntos grises (vinculada abajo). Me gustaría que los puntos aleatorios se iluminen uno por uno en un color verde brillante (algo así como #90d103) para tener un pequeño y agradable efecto de animación.
Mi pregunta es: ¿Cómo hago eso de la manera más elegante para lograr esto? Mi nivel de habilidad hasta ahora es HTML y CSS (nivel intermedio) y JavaScript (nivel principiante) La imagen a la que me refiero
Pequeño desafío ordenado, con un buen resultado!
Primero vectorice el archivo png usando algún servicio de vectores en línea.
Usé https://www.vectorizer.io/images/17xotKxrTKN4Zf/world.html
Ajuste la configuración de manera que cada punto sea una forma svg
Probablemente se beneficiaría de encontrar un png con mayor resolución
Luego agregue el svg a html
Escriba un código js que seleccione aleatoriamente un elemento de ruta y defina el color de relleno:
let illuminatedDots = []; function illuminateRandomDots(num = 100) { illuminatedDots.forEach(illuminatedDot => { illuminatedDot.setAttribute("fill", undefined); }); illuminatedDots = []; const allDots = document.getElementById("world-dots").querySelectorAll("path"); for (let i = 0; i < num; i++) { const randomDot = allDots[Math.floor(Math.random() * allDots.length)]; randomDot.setAttribute("fill", "#90d103"); illuminatedDots.push(randomDot); } } setInterval(illuminateRandomDots, 1000);