アニメーションするSVGファビコンのダイナミックな世界

window.addEventListener("load", (event) => {
    let intervalId = null;

    // Start the interval when the page is first loaded
    startInterval();

    // Listen for visibilitychange and pagehide events
    document.addEventListener('visibilitychange', handleVisibilityChange);
    window.addEventListener('pagehide', handlePageHide);

    const emojis = ['👋', '💼', '💻','🔧','📊','📱', '👨‍💻','🚀','💡', '📈','📝','💡','📢'];
    const icon = document.getElementById('icon');
    let currentIndex = 0;
    const text = "I"
    let message;
    let faviconText;

    function setFavicon(item) {
        // Update the icon element with the new message
        icon.href = `data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200"><text id="t1" x="50%" y=".9em" fill="hsl(36, 100%, 50%)" font-size="180" font-family="system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'" text-anchor="middle">${item}</text>
</svg>`;

    }

    function startInterval() {
        clearInterval(intervalId);
        intervalId = setInterval(() => {
            // Get the current message and shift it two characters to the left
            if(currentIndex == 0) {
                message = text;
            }

            // If we've reached the end of the message, show a random emoji
            if (message.length < 1) {
                const emoji = emojis[Math.floor(Math.random() * emojis.length)];
                message = emoji;
                currentIndex = 0;
                faviconText = emoji
            } else {
                currentIndex += 2;
                faviconText = message.substr(0, 2);
            }

            setFavicon(faviconText);
            message = message.substr(2);
        }, 1500);
    }

    function stopInterval() {
        setFavicon(emojis[Math.floor(Math.random() * emojis.length)]);
        clearInterval(intervalId);
        intervalId = null;
    }

    function handleVisibilityChange() {
    if (document.hidden) {
        // Page is hidden, stop the interval after x seconds
        setTimeout(() => {
            stopInterval();
        }, 60000);

    } else {
        // Page is visible, start the interval
        startInterval();
    }
    }

    function handlePageHide() {
        // Page is being unloaded, stop the interval
        setTimeout(() => {
            stopInterval();
        }, 60000);
    }
});