ось тобі два код а і із кода 2 у . код 1 . сюди перенеси тільки ту анімацію, де у першому стовпчику вона анімується і число 3 стає білим.  а решта тут залиш незмінним. нам важливо привенсти сюди той метод щоб цифра із чорної ставала білою.   це код 1.   <!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ізольована SVG-анімація (версія 1)</title> 
    <style>
        .animation-container-1 { 
            width: 100%; 
            margin: 0;
        }
        svg {
            width: 100%;
            height: auto;
        }
        .column-label {
            font-size: 14px;
            fill: white;
            text-anchor: middle;
        }
        .time-label {
            font-size: 16px;
            fill: white;
            text-anchor: middle; 
        }
    </style>
</head>
<body>
    <div id="animation-container-1" class="animation-container-1"></div> 

    <script>
    (function() {
        const containerId = 'animation-container-1'; 
        const container = document.getElementById(containerId);
        
        const svgNS = "http://www.w3.org/2000/svg";
        const svg = document.createElementNS(svgNS, "svg");
        svg.setAttribute("viewBox", "0 0 800 370");
        svg.style.width = "100%"; 
        svg.style.height = "auto"; 

        const svgContent = `
            <defs>
                <filter id="glow">
                    <feGaussianBlur stdDeviation="2.5" result="coloredBlur"/>
                    <feMerge>
                        <feMergeNode in="coloredBlur"/>
                        <feMergeNode in="SourceGraphic"/>
                    </feMerge>
                </filter>
                <!-- Налаштований градієнт з плавними переходами -->
                <linearGradient id="columnGradient" x1="0" y1="164" x2="0" y2="2" gradientUnits="userSpaceOnUse">
                    <!-- Салатовий колір -->
                    <stop offset="0%" stop-color="#7CFC00" />
                    <stop offset="30%" stop-color="#7CFC00" />
                    <!-- Плавний перехід до жовтого -->
                    <stop offset="45%" stop-color="yellow" />
                    <stop offset="55%" stop-color="yellow" />
                    <!-- Плавний перехід до червоного -->
                    <stop offset="70%" stop-color="red" />
                    <stop offset="100%" stop-color="red" />
                </linearGradient>
            </defs>

            <rect width="800" height="370" fill="#1a1a2e"/> 

            <!-- Перший стовпчик з анімацією -->
            <g id="column1">
                <!-- Заповнення з градієнтом -->
                <rect id="column1-fill" x="2" y="164" width="50" height="0" fill="url(#columnGradient)">
                </rect>
                <!-- Контур стовпчика -->
                <rect x="2" y="2" width="50" height="162" fill="none" stroke="white" stroke-width="1"/>
                <text x="27" y="180" class="column-label">1</text>
                <text x="27" y="20" class="time-label" font-size="25">3</text> 
            </g>

            <!-- Інші стовпчики -->
            <rect x="107" y="2" width="50" height="162" fill="none" stroke="white" stroke-width="1"/>
            <text x="132" y="180" class="column-label">2</text>

            <rect x="212" y="2" width="50" height="162" fill="none" stroke="white" stroke-width="1"/>
            <text x="237" y="180" class="column-label">3</text>

            <rect x="317" y="2" width="50" height="162" fill="none" stroke="white" stroke-width="1"/>
            <text x="342" y="180" class="column-label">4</text>

            <rect x="422" y="2" width="50" height="162" fill="none" stroke="white" stroke-width="1"/>
            <text x="447" y="180" class="column-label">5</text>

            <rect x="527" y="2" width="50" height="162" fill="none" stroke="white" stroke-width="1"/>
            <text x="552" y="180" class="column-label">6</text>

            <!-- Управління та елементи інтерфейсу -->
            <g class="controls" transform="translate(400, 323.6)"> 
                <g transform="translate(0, 5)">
                    <circle id="bullet-animation1-1" cx="-179" cy="-70" r="60" fill="red" /> 
                    <text x="-179" y="-70" text-anchor="middle" dominant-baseline="central" fill="black" font-size="30">2</text>
                    <circle id="bullet-animation1-2" cx="-318" cy="-70" r="80" fill="red" /> 
                    <text x="-318" y="-70" text-anchor="middle" dominant-baseline="central" fill="black" font-size="30">1</text>
                    <circle id="bullet-animation1" cx="-43" cy="-70" r="75" fill="red" /> 
                    <text x="-43" y="-70" text-anchor="middle" dominant-baseline="central" fill="black" font-size="30">3</text>
                    <circle id="bullet-animation1-4" cx="129" cy="-70" r="95" fill="red" /> 
                    <text x="129" y="-70" text-anchor="middle" dominant-baseline="central" fill="black" font-size="30">4</text>
                </g>

                <g transform="translate(-86, -22)"> 
                    <rect id="start-button-animation1" x="-125" y="26" width="250" height="40" fill="#a62020" stroke="#01FEFE" stroke-width="2" rx="5" ry="5" style="cursor: pointer;"/> 
                    <text id="start-text-animation1" x="-110" y="51" text-anchor="start" dominant-baseline="middle" alignment-baseline="middle" fill="#01FEFE" font-size="34" pointer-events="none" stroke="#01FEFE" stroke-width="2" font-family="Haettenschweiler">START</text>
                    <rect x="0" y="26" width="120" height="40" fill="none" rx="5" ry="5"/>
                    <text id="timer-animation1" x="10" y="51" text-anchor="start" alignment-baseline="middle" fill="#01FEFE" font-size="40" font-weight="bold" pointer-events="none" dominant-baseline="middle" font-family="Haettenschweiler">-05:00</text> 
                </g>
            </g>
            
            <line x1="628.68" y1="0" x2="628.68" y2="370" stroke="red" stroke-width="3" /> 
            
            <line x1="628.68" y1="167" x2="0" y2="167" stroke="#0000FF" stroke-width="3"></line> 
            <line x1="714.34" y1="79" x2="714.34" y2="0" stroke="red" stroke-width="3" />
            <line x1="628.68" y1="79" x2="800" y2="79" stroke="red" stroke-width="3" /> 

            <!-- Час на виконання -->
            <text x="78" y="110" class="time-label">Час на</text>
            <text x="78" y="130" class="time-label">вико</text>
            <text x="78" y="150" class="time-label">нання</text> 
        `;

        svg.innerHTML = svgContent; 
        container.appendChild(svg);

        let timerInterval;
        let startTime;
        let animationInProgress = false;

        function startAnimation() {
            if (animationInProgress) {
                resetAnimation();
                return;
            }
            animationInProgress = true;

            startTime = Date.now();
            clearInterval(timerInterval);
            timerInterval = setInterval(updateTimer, 10);

            // Запуск анімації заповнення стовпчика з затримкою 5 секунд
            setTimeout(animateColumn1, 5000); 

            setTimeout(() => {
                animationInProgress = false;
                clearInterval(timerInterval);
            }, 15000); 

            // Додаткові анімації, якщо потрібно
        }

        function resetAnimation() {
            animationInProgress = false;
            clearInterval(timerInterval);
            svg.querySelector('#timer-animation1').textContent = '-05:00'; 

            // Скидання заповнення стовпчика
            let column1Fill = svg.getElementById('column1-fill');
            column1Fill.setAttribute('y', '164');
            column1Fill.setAttribute('height', '0');

            // Скидання інших анімацій, якщо потрібно
        }

        function updateTimer() {
            const currentTime = Date.now();
            const elapsedTime = (currentTime - startTime) / 1000 - 5;
            
            if (elapsedTime >= 10.00) { 
                clearInterval(timerInterval);
                svg.querySelector('#timer-animation1').textContent = '10:00'; 
            } else {
                const seconds = Math.floor(elapsedTime);
                const centiseconds = Math.floor((elapsedTime - seconds) * 100);
                const formattedSeconds = seconds < 0 ? `-${Math.abs(seconds).toString().padStart(2, '0')}` : seconds.toString().padStart(2, '0');
                svg.querySelector('#timer-animation1').textContent = 
                    `${formattedSeconds}:${centiseconds.toString().padStart(2, '0')}`;
            }
        }

        function animateColumn1() {
            const duration = 3000; // 3 секунди
            const startTime = Date.now();
            const column1Fill = svg.getElementById('column1-fill');
            const totalHeight = 162;
            const startY = 164;
            const endY = 2;

            function animate() {
                const currentTime = Date.now();
                const elapsed = currentTime - startTime;
                const progress = Math.min(elapsed / duration, 1); // Значення від 0 до 1

                // Розрахунок нової висоти та позиції 'y'
                const newHeight = totalHeight * progress;
                const newY = startY - (totalHeight * progress);

                column1Fill.setAttribute('height', newHeight);
                column1Fill.setAttribute('y', newY);

                if (progress < 1) {
                    requestAnimationFrame(animate);
                }
            }

            animate();
        }

        svg.querySelector('#start-button-animation1').addEventListener('click', startAnimation); 
    })();
    </script>
</body>
</html>                                                             Код 2.<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <title>Ізольована SVG-анімація</title> 
    <style>
        .animation-container-1 { 
            width: 100%; 
            margin: 0;
        }
        svg {
            width: 100%;
            height: auto;
        }
        .column-label {
            font-size: 50px; /* Розмір шрифту 50 */
            text-anchor: middle;
        }
        .white-text {
            fill: white;
        }
        .time-label {
            fill: black;
            text-anchor: middle; 
            font-weight: bold;
            font-size: 50px; /* Розмір шрифту 50 */
        }
        .blue-text {
            fill: blue;
        }
        .bright-blue-text {
            fill: #00BFFF; /* Яскравий блакитний колір */
        }
        .hidden {
            visibility: hidden;
        }
        #start-button-animation1 {
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="animation-container-1" class="animation-container-1">
        <svg id="my-svg" viewBox="0 0 800 370" xmlns="http://www.w3.org/2000/svg">
            <defs>
                <filter id="glow">
                    <feGaussianBlur stdDeviation="2.5" result="coloredBlur"/>
                    <feMerge>
                        <feMergeNode in="coloredBlur"/>
                        <feMergeNode in="SourceGraphic"/>
                    </feMerge>
                </filter>
                <!-- Налаштований градієнт з плавними переходами -->
                <linearGradient id="columnGradient" x1="0" y1="164" x2="0" y2="2" gradientUnits="userSpaceOnUse">
                    <stop offset="0%" stop-color="#7CFC00" />
                    <stop offset="30%" stop-color="#7CFC00" />
                    <stop offset="45%" stop-color="yellow" />
                    <stop offset="55%" stop-color="yellow" />
                    <stop offset="70%" stop-color="red" />
                    <stop offset="100%" stop-color="red" />
                </linearGradient>
            </defs>

            <!-- Фоновий прямокутник -->
            <rect width="800" height="370" fill="#1a1a2e"/> 

            <!-- Перший стовпчик з анімацією заповнення -->
            <g id="column1">
                <!-- Заповнення з градієнтом -->
                <rect id="column1-fill" x="2" y="164" width="50" height="0" fill="url(#columnGradient)"></rect>
                <!-- Контур стовпчика -->
                <rect x="2" y="2" width="50" height="162" fill="none" stroke="white" stroke-width="1"/>
                <!-- Цифра "3" чорного кольору -->
                <text id="column1-text" x="27" y="80" class="column-label">3</text>
                <!-- Цифра "4", яка з'явиться пізніше -->
                <text id="column1-text-4" x="27" y="130" class="column-label bright-blue-text hidden">4</text>
                <text x="27" y="180" class="column-label white-text">1</text>
            </g>

            <!-- Другий стовпчик -->
            <g id="column2">
                <rect x="107" y="2" width="50" height="162" fill="none" stroke="white" stroke-width="1"/>
                <!-- Цифра "3" чорного кольору -->
                <text id="column2-text" x="132" y="80" class="column-label">3</text>
                <!-- Цифра "4", яка з'явиться пізніше -->
                <text id="column2-text-4" x="132" y="130" class="column-label bright-blue-text hidden">4</text>
                <text x="132" y="180" class="column-label white-text">2</text>
            </g>

            <!-- Третій стовпчик -->
            <g id="column3">
                <rect x="212" y="2" width="50" height="162" fill="none" stroke="white" stroke-width="1"/>
                <!-- Ваші попередні елементи -->
                <text x="237" y="180" class="column-label" fill="black">3</text>
                <text x="237" y="200" class="column-label white-text">4</text>
            </g>

            <!-- Інші стовпчики -->
            <!-- ... решта коду стовпчиків ... -->

            <!-- Управління та елементи інтерфейсу -->
            <!-- ... ваш код управління ... -->
            <g class="controls" transform="translate(400, 323.6)"> 
                <!-- Ваші круглі кнопки -->
                <!-- ... -->

                <g transform="translate(-86, -22)"> 
                    <!-- Кнопка "START" з ID -->
                    <g id="start-button-animation1">
                        <rect x="-125" y="26" width="250" height="40" fill="#a62020" stroke="#01FEFE" stroke-width="2" rx="5" ry="5"/> 
                        <text x="-110" y="51" text-anchor="start" dominant-baseline="middle" fill="#01FEFE" font-size="34" stroke="#01FEFE" stroke-width="2" font-family="Haettenschweiler">START</text>
                    </g>
                    <!-- Таймер -->
                    <rect x="0" y="26" width="120" height="40" fill="none" rx="5" ry="5"/>
                    <text id="timer-animation1" x="10" y="51" text-anchor="start" alignment-baseline="middle" fill="#01FEFE" font-size="40" font-weight="bold" dominant-baseline="middle" font-family="Haettenschweiler">-05:00</text> 
                </g>
            </g>
        </svg>
    </div> 

    <script>
    (function() {
        // Отримуємо SVG-елемент
        const svg = document.getElementById('my-svg');
        let timerInterval;
        let startTime;
        let animationInProgress = false;

        function startAnimation() {
            if (animationInProgress) {
                resetAnimation();
                return;
            }
            animationInProgress = true;

            startTime = Date.now();
            clearInterval(timerInterval);
            timerInterval = setInterval(updateTimer, 10);

            // Запуск анімації заповнення стовпчика 1 з затримкою 5 секунд
            setTimeout(animateColumn1, 5000); 

            // Зміна кольору "3" у стовпчику 1 на білий та поява "4" через 8 секунд
            setTimeout(function() {
                const column1Text = svg.getElementById('column1-text');
                if (column1Text) {
                    column1Text.classList.add('white-text');
                }

                const column1Text4 = svg.getElementById('column1-text-4');
                if (column1Text4) {
                    column1Text4.classList.remove('hidden');
                }
            }, 8000);

            // Зміна кольору "3" у стовпчику 2 на білий та поява "4" через 8 секунд
            setTimeout(function() {
                const column2Text = svg.getElementById('column2-text');
                if (column2Text) {
                    column2Text.classList.add('white-text');
                }

                const column2Text4 = svg.getElementById('column2-text-4');
                if (column2Text4) {
                    column2Text4.classList.remove('hidden');
                }
            }, 8000);

            // Додаткові анімації, якщо потрібно
        }

        function resetAnimation() {
            animationInProgress = false;
            clearInterval(timerInterval);
            svg.getElementById('timer-animation1').textContent = '-05:00'; 

            // Скидання заповнення стовпчика 1
            let column1Fill = svg.getElementById('column1-fill');
            if (column1Fill) {
                column1Fill.setAttribute('y', '164');
                column1Fill.setAttribute('height', '0');
            }

            // Скидання кольору "3" у стовпчику 1 на чорний
            const column1Text = svg.getElementById('column1-text');
            if (column1Text) {
                column1Text.classList.remove('white-text');
            }

            // Приховуємо "4" у стовпчику 1
            const column1Text4 = svg.getElementById('column1-text-4');
            if (column1Text4) {
                column1Text4.classList.add('hidden');
            }

            // Скидання кольору "3" у стовпчику 2 на чорний
            const column2Text = svg.getElementById('column2-text');
            if (column2Text) {
                column2Text.classList.remove('white-text');
            }

            // Приховуємо "4" у стовпчику 2
            const column2Text4 = svg.getElementById('column2-text-4');
            if (column2Text4) {
                column2Text4.classList.add('hidden');
            }

            // Скидання інших анімацій, якщо потрібно
        }

        function updateTimer() {
            const currentTime = Date.now();
            const elapsedTime = (currentTime - startTime) / 1000 - 5;
            
            if (elapsedTime >= 10.00) { 
                clearInterval(timerInterval);
                svg.getElementById('timer-animation1').textContent = '10:00'; 
            } else {
                const seconds = Math.floor(elapsedTime);
                const centiseconds = Math.floor((elapsedTime - seconds) * 100);
                const formattedSeconds = seconds < 0 ? `-${Math.abs(seconds).toString().padStart(2, '0')}` : seconds.toString().padStart(2, '0');
                svg.getElementById('timer-animation1').textContent = 
                    `${formattedSeconds}:${centiseconds.toString().padStart(2, '0')}`;
            }
        }

        function animateColumn1() {
            const duration = 3000; // 3 секунди
            const startTimeAnimation = Date.now();
            const column1Fill = svg.getElementById('column1-fill');
            const totalHeight = 162;
            const startY = 164;

            function animate() {
                const currentTime = Date.now();
                const elapsed = currentTime - startTimeAnimation;
                const progress = Math.min(elapsed / duration, 1); // Значення від 0 до 1

                // Розрахунок нової висоти та позиції 'y'
                const newHeight = totalHeight * progress;
                const newY = startY - newHeight;

                column1Fill.setAttribute('height', newHeight);
                column1Fill.setAttribute('y', newY);

                if (progress < 1) {
                    requestAnimationFrame(animate);
                }
            }

            animate();
        }

        // Додаємо обробник події для кнопки "START"
        svg.getElementById('start-button-animation1').addEventListener('click', startAnimation); 
    })();
    </script>
</body>
</html>