у цьому Коді є шість стовпчиків зроби що перший стовпчик
від нуля до першої секунди а потім від
від нуля до третьої секунди
він заповнився
але має бути з градієнтом зроблено красиво
кольорами 1/3 знизу має тобто кольора має йти знизу знизу появитись зелений колір потім над ним жовтий колір а потім вверху червоний колір Ну так як стандартна шкала при якій де є показник вона хоче показати щось то при такому і переходить нерізки А має бути такий гарний градієнт
Тобто там має бути суміш червоного і жовтого А нижче суміш зеленого і жовтого поступові перехід має бути
такий замітний перехід
і це має тривати від нуля до 3 секунд за 3 секунди цей стовпчик має наповнитися і зупинитися анімації має продовжуватися до 10 секунд як тут все є тільки оце зміни і напиши повний код.

<!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;
        }
    </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 svg = document.createElementNS("http://www.w3.org/2000/svg", "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>
            </defs>

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

            <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>

            <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" /> 
        `;

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

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

            // Додайте сюди код для запуску інших анімацій, якщо потрібно
        }

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

            // Додайте сюди код для скидання інших анімацій, якщо потрібно
        }

        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')}`;
            }
        }

        svg.querySelector('#start-button-animation1').addEventListener('click', startAnimation); 
    })();
    </script>
</body>
</html>