How do i animate a picture that it has highlighting green dots?

Question

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

Thanks in advance for any guidance!

Answer 1

Neat little challenge, with a nice output!

1. First vectorize the png file using some vector service online.

2. I used https://www.vectorizer.io/images/17xotKxrTKN4Zf/world.html

3. Fine tune settings such that each dot is one svg shape

4. Would probably benefit from finding a png with higher resolution

5. Then add the svg to html

6. 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);

See demo below:

https://codepen.io/mathiash98/pen/PoJygNm