чи можеш ти обєднати тут цикли чи щось іншие у сих двох шкалах, щоб зменшити код? але функціоналіьнімсть має залишитися незміннгою?   <!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;
        }
    </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>
                <linearGradient id="colorGradient" x1="0%" y1="100%" x2="0%" y2="0%">
                    <stop offset="0%" style="stop-color:#00FF00"/>
                    <stop offset="50%" style="stop-color:#00FF00"/>
                    <stop offset="60%" style="stop-color:#FFFF00"/>
                    <stop offset="70%" style="stop-color:#FFA500"/>
                    <stop offset="80%" style="stop-color:#FF4500"/>
                    <stop offset="100%" style="stop-color:#FF0000"/>
                </linearGradient>
            </defs>

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

            <g class="controls" transform="translate(397.34, 319.6)"> 
                <rect id="start-button-animation1" x="-125" y="0" 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="25" 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="0" width="120" height="40" fill="none" rx="5" ry="5"/>
                <text id="timer-animation1" x="10" y="25" text-anchor="start" alignment-baseline="middle" fill="#01FEFE" font-size="40" font-weight="bold" pointer-events="none" dominant-baseline="middle" font-family="Haettenschweiler">00:00</text> 
            </g>

            <line x1="628.68" y1="0" x2="628.68" y2="370" stroke="red" stroke-width="3" /> 
            <line x1="628.68" y1="137" x2="0" y2="137" stroke="red" stroke-width="3"></line> 

            <!-- Текст "ЙМОВІРНІСТЬ ПОМИЛОК" -->
            <text x="635" y="21" fill="#FFFFFF" font-size="14" text-anchor="start" font-family="Arial">ЙМО-</text>
            <text x="635" y="46" fill="#FFFFFF" font-size="14" text-anchor="start" font-family="Arial">ВІРНІСТЬ</text>
            <text x="635" y="71" fill="#FFFFFF" font-size="14" text-anchor="start" font-family="Arial">ПОМИЛОК</text>

            <!-- Текст "ЗНОС ОРГА- НІЗМА" -->
            <text x="720" y="21" fill="#FFFFFF" font-size="14" text-anchor="start" font-family="Arial">ЗНОС</text>
            <text x="720" y="46" fill="#FFFFFF" font-size="14" text-anchor="start" font-family="Arial">ОРГА-</text>
            <text x="720" y="71" fill="#FFFFFF" font-size="14" text-anchor="start" font-family="Arial">НІЗМА</text>

            <!-- Горизонтальна лінія під текстами -->
            <line x1="635" y1="79" x2="800" y2="79" stroke="red" stroke-width="3" /> 

            <!-- Кольорова шкала (перша анімація) -->
            <rect x="655" y="91" width="34" height="264" fill="url(#colorGradient)" /> 
            <rect id="scale-cover" x="655" y="91" width="34" height="264" fill="#1a1a2e" /> 

            <!-- Спільна шкала значень -->
            <text x="714.34" y="355" fill="#FFFFFF" font-size="24" text-anchor="middle">0</text>
            <text x="714.34" y="330" fill="#FFFFFF" font-size="24" text-anchor="middle">10</text> 
            <text x="714.34" y="305" fill="#FFFFFF" font-size="24" text-anchor="middle">20</text>
            <text x="714.34" y="280" fill="#FFFFFF" font-size="24" text-anchor="middle">30</text>
            <text x="714.34" y="255" fill="#FFFFFF" font-size="24" text-anchor="middle">40</text>
            <text x="714.34" y="230" fill="#FFFFFF" font-size="24" text-anchor="middle">50</text>
            <text x="714.34" y="205" fill="#FFFFFF" font-size="24" text-anchor="middle">60</text>
            <text x="714.34" y="180" fill="#FFFFFF" font-size="24" text-anchor="middle">70</text>
            <text x="714.34" y="155" fill="#FFFFFF" font-size="24" text-anchor="middle">80</text>
            <text x="714.34" y="130" fill="#FFFFFF" font-size="24" text-anchor="middle">90</text>
            <text x="714.34" y="105" fill="#FFFFFF" font-size="24" text-anchor="middle">100</text>

            <!-- Лінія від 100 до верху анімації -->
            <line x1="714.34" y1="79" x2="714.34" y2="0" stroke="red" stroke-width="3" />

            <!-- Кольорова шкала (друга анімація) -->
            <rect x="741" y="91" width="34" height="264" fill="url(#colorGradient)" />
            <rect id="scale-cover-2" x="741" y="91" width="34" height="264" fill="#1a1a2e" /> 

        `;

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

            animateScale(svg.querySelector('#scale-cover')); 
            animateScale2(svg.querySelector('#scale-cover-2')); 
        }

        function resetAnimation() {
            animationInProgress = false;
            clearInterval(timerInterval);
            svg.querySelector('#timer-animation1').textContent = '00:00'; 
            svg.querySelector('#scale-cover').setAttribute('height', '264'); 
            svg.querySelector('#scale-cover').setAttribute('y', '91'); 
            svg.querySelector('#scale-cover-2').setAttribute('height', '264'); 
            svg.querySelector('#scale-cover-2').setAttribute('y', '91'); 
        }

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

        function animateScale(scaleCoverElement) { 
            const totalHeight = 264; 
            const halfHeight = totalHeight / 2;

            let startTime = Date.now();

            function step() {
                let currentTime = Date.now();
                let elapsedTime = (currentTime - startTime) / 1000; // в секундах

                if (elapsedTime <= 5) {
                    // До 5 секунд коливаємось навколо 50 з нерівномірною амплітудою
                    let oscillation = Math.sin(elapsedTime * 10) * (5 + 2 * Math.sin(elapsedTime * 2)); 
                    scaleCoverElement.setAttribute('height', halfHeight - oscillation);
                } else if (elapsedTime > 5 && elapsedTime <= 5.5) {
                    // Від 5 до 5.5 секунд швидко заповнюємо до верху
                    let progress = (elapsedTime - 5) / 0.5;
                    let height = halfHeight - progress * halfHeight;
                    scaleCoverElement.setAttribute('height', height);
                } else if (elapsedTime > 5.5 && elapsedTime <= 8) {
                    // Від 5.5 до 8 секунд тримаємо повністю заповненим
                    scaleCoverElement.setAttribute('height', '0');
                } else if (elapsedTime > 8 && elapsedTime <= 15) {
                    // Після 8 секунд повільно опускаємо до 50
                    let progress = (elapsedTime - 8) / (15 - 8);
                    let height = progress * halfHeight;
                    scaleCoverElement.setAttribute('height', height);
                } else {
                    // Анімація завершена
                    scaleCoverElement.setAttribute('height', halfHeight);
                    return;
                }

                requestAnimationFrame(step);
            }

            requestAnimationFrame(step);
        }

        function animateScale2(scaleCoverElement) { 
            const totalHeight = 264;
            const seventyPercentHeight = totalHeight * 0.3; // Висота для 70%

            let startTime = Date.now();

            function step() {
                let currentTime = Date.now();
                let elapsedTime = (currentTime - startTime) / 1000; // в секундах

                if (elapsedTime <= 5) {
                    // До 5 секунд коливаємось навколо 50 з нерівномірною амплітудою
                    let oscillation = Math.sin(elapsedTime * 10) * (5 + 2 * Math.sin(elapsedTime * 2)); 
                    scaleCoverElement.setAttribute('height', totalHeight / 2 - oscillation);
                } else if (elapsedTime > 5 && elapsedTime <= 5.5) {
                    // Від 5 до 5.5 секунд швидко заповнюємо до верху
                    let progress = (elapsedTime - 5) / 0.5;
                    let height = totalHeight / 2 - progress * totalHeight / 2;
                    scaleCoverElement.setAttribute('height', height);
                } else if (elapsedTime > 5.5 && elapsedTime <= 8) {
                    // Від 5.5 до 8 секунд тримаємо повністю заповненим
                    scaleCoverElement.setAttribute('height', '0');
                } else if (elapsedTime > 8 && elapsedTime <= 9) {
                    // Від 8 до 9 секунд швидко опускаємо до 70%
                    let progress = (elapsedTime - 8) / (9 - 8);
                    let height = progress * seventyPercentHeight;
                    scaleCoverElement.setAttribute('height', height);
                } else if (elapsedTime > 9 && elapsedTime <= 15) {
                    // Від 9 до 15 секунд плавно опускаємо до 50%
                    let progress = (elapsedTime - 9) / (15 - 9);
                    let height = seventyPercentHeight + progress * (totalHeight / 2 - seventyPercentHeight); 
                    scaleCoverElement.setAttribute('height', height);
                } else {
                    // Анімація завершена
                    scaleCoverElement.setAttribute('height', totalHeight / 2);
                    return;
                }

                requestAnimationFrame(step);
            }

            requestAnimationFrame(step);
        }

        svg.querySelector('#start-button-animation1').addEventListener('click', startAnimation); 

    })();
    </script>
</body>
</html>