I have a pixelated image of the world with grey dots (linked down below). I would like to have random dots light up one by one in a glowing green color (something like #90d103) to have a nice little animation effect.
My question is: How do I do that in the most elegant way to achieve this? My skill level so far is HTML and CSS (intermediate level) and JavaScript (beginner level) The Picture I am referencing
Neat little challenge, with a nice output!
First vectorize the png file using some vector service online.
I used https://www.vectorizer.io/images/17xotKxrTKN4Zf/world.html
Fine tune settings such that each dot is one svg shape
Would probably benefit from finding a png with higher resolution
Then add the svg to html
Write some js code which randomly selects a path element and define fill color:
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);