зроби щоб тут були такі розміри шара, і більше нічого не міняй, все має бути як і було по функціоналу у мому коді. Початковий стан: 31.2
Найбільший розмір під час анімації: 60
Найменший розмір під час анімації: 16.8
Кінцевий стан: 31.2   <!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Анімація команд</title>
    <style>
        /* Ваш CSS код залишається без змін */
    </style>
</head>
<body>
    <div class="animation-container">
        <div class="svg-container">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 400" preserveAspectRatio="xMidYMid meet"> 
                <defs>
                    <filter id="glow">
                        <feGaussianBlur stdDeviation="2.5" result="coloredBlur"/>
                        <feMerge>
                            <feMergeNode in="coloredBlur"/>
                            <feMergeNode in="SourceGraphic"/>
                        </feMerge>
                    </filter>
                </defs>

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

                <g id="commands1" transform="translate(9, 3)"> 
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    <text class="command" x="0" y="194" fill="#FFFF7E" filter="url(#glow)"> 
                        <animate attributeName="y" from="216" to="194" dur="0.35s" begin="startButton.click + 2.8s" fill="freeze"/>
                        9. 
                    </text>
                    <text class="command" x="0" y="216" fill="#FFFF7E" filter="url(#glow)"> 
                        <animate attributeName="y" from="216" to="216" dur="0.35s" begin="startButton.click + 3.15s" fill="freeze"/>
                        10. 
                    </text>
                </g>
                
                <g id="commands2" transform="translate(180, 3)">
                    
                    
                    
                    
                    
                    
                    
                    
                    <text class="command" x="-11" y="194" fill="#00ffcc" filter="url(#glow)">
                        <animate attributeName="y" from="216" to="194" dur="0.35s" begin="startButton.click + 6.3s" fill="freeze"/>
                        19. 
                    </text>
                    <text class="command" x="-11" y="216" fill="#00ffcc" filter="url(#glow)">
                        <animate attributeName="y" from="216" to="216" dur="0.35s" begin="startButton.click + 6.65s" fill="freeze"/>
                        20. 
                    </text>
                </g>

                <g id="commands3" transform="translate(389, 3)">
                    
                    
                    
                    
                    
                    
                    
                    
                    <text class="command" x="-51" y="194" fill="#fc05fc" filter="url(#glow)">
                        <animate attributeName="y" from="216" to="194" dur="0.35s" begin="startButton.click + 9.8s" fill="freeze"/>
                        29. 
                    </text>
                    <text class="command" x="-51" y="216" fill="#fc05fc" filter="url(#glow)">
                        <animate attributeName="y" from="216" to="216" dur="0.35s" begin="startButton.click + 10.15s" fill="freeze"/>
                        30. 
                    </text>
                </g>

                <g id="commands4" transform="translate(505, 3)">
                    
                    
                    
                    
                    
                    
                    
                    
                    <text class="command" x="3" y="194" fill="#01FEFE" filter="url(#glow)">
                        <animate attributeName="y" from="216" to="194" dur="0.35s" begin="startButton.click + 13.3s" fill="freeze"/>
                        39. 
                    </text>
                    <text class="command" x="3" y="216" fill="#01FEFE" filter="url(#glow)">
                        <animate attributeName="y" from="216" to="216" dur="0.35s" begin="startButton.click + 13.65s" fill="freeze"/>
                        40. 
                    </text>
                </g>

                <g id="commands5" transform="translate(678, 3)">
                    
                    
                    
                    
                    
                    
                    
                    
                    <text class="command" x="0" y="194" fill="#FFA500" filter="url(#glow)">
                        <animate attributeName="y" from="216" to="194" dur="0.35s" begin="startButton.click + 16.8s" fill="freeze"/>
                        49. 
                    </text>
                    <text class="command" x="0" y="216" fill="#FFA500" filter="url(#glow)">
                        <animate attributeName="y" from="216" to="216" dur="0.35s" begin="startButton.click + 17.15s" fill="freeze"/>
                        50. 
                    </text>
                </g>
                
                <!-- Animated circles -->
                
                <g transform="translate(80, 0)">
                    <circle cx="0" cy="262" r="16.8" fill="#FFFF7E">
                        <animate id="circleMove3" attributename="cx" 
                            values="-10; -10; 150; 150; 320; 320; 490; 490; 661; 661" 
                            keytimes="0; 0.1886; 0.2; 0.3886; 0.4; 0.5886; 0.6; 0.7886; 0.8; 1" 
                            dur="17.5s" begin="indefinite" fill="freeze"></animate>
                        <animate id="circleSize3" attributename="r" 
                            values="16.8;60;16.8" dur="0.35s" begin="indefinite" repeatcount="50"></animate>
                        <animate id="circleColor3" attributename="fill" 
                            values="#FFFF7E; #FFFF7E; #00ffcc; #00ffcc; #ff66cc; #ff66cc; #01FEFE; #01FEFE; #FFA500; #FFA500" 
                            keytimes="0; 0.1886; 0.2; 0.3886; 0.4; 0.5886; 0.6; 0.7886; 0.8; 1" 
                            dur="17.5s" begin="indefinite" fill="freeze"></animate>
                    </circle>
                    <text class="ballText" x="0" y="262" text-anchor="middle" dominant-baseline="central" 
                        font-weight="bold" font-size="12" fill="black" font-family="Haettenschweiler">
                        <animate id="textMove3" attributeName="x" values="-10;-10;150;150;320;320;490;490;661;661" keyTimes="0;0.1818;0.196;0.3636;0.3778;0.5454;0.5596;0.7272;0.7414;1" dur="17.5s" begin="indefinite" fill="freeze" />
                        <animate id="textSize3" attributeName="font-size" values="12;36;12" dur="0.35s" begin="indefinite" repeatCount="50" fill="freeze"/> 
                        <animate id="textColor3" attributeName="fill" values="black;black;black;black;black;black;black;black;black;black" keyTimes="0;0.1818;0.196;0.3636;0.3778;0.5454;0.5596;0.7272;0.7414;1" dur="17.5s" begin="indefinite" repeatCount="1" fill="freeze"/>
                        70in10
                    </text>
                </g>

                <g class="controls" transform="translate(397.34, 319.6)"> 
                    <rect id="start-button" 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" 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" 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>

            </svg>
        </div>
    </div>

    <script>
        let timerInterval;
        let startTime;
        let animationInProgress = false;
        let startButton = document.getElementById('start-button');

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

            // Приховуємо всі команди на початку
            document.querySelectorAll('.command').forEach(cmd => cmd.style.opacity = '0'); 

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

            // Запускаємо анімацію для всіх команд
            animateCommands(); 

            // Запускаємо анімацію куль та інших елементів
            const animations = document.querySelectorAll('animate');
            animations.forEach(animation => {
                animation.beginElement();
            });

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

        function resetAnimation() {
            animationInProgress = false;
            clearInterval(timerInterval);
            document.querySelector('#timer').textContent = '00:00';
            document.querySelectorAll('.command').forEach(cmd => cmd.style.opacity = '0');

            // Скидаємо анімацію для всіх елементів
            const animations = document.querySelectorAll('animate');
            animations.forEach(animation => {
                animation.endElement(); // Зупиняємо анімацію
                animation.beginElement(); // Повертаємо елемент до початкового стану
            });
        }

        function animateCommands() {
            const commands1 = document.querySelectorAll('#commands1 .command');
            const commands2 = document.querySelectorAll('#commands2 .command');
            const commands3 = document.querySelectorAll('#commands3 .command');
            const commands4 = document.querySelectorAll('#commands4 .command');
            const commands5 = document.querySelectorAll('#commands5 .command');
            const delayBetweenCommands = 350; 

            commands1.forEach((command, index) => {
                setTimeout(() => {
                    command.style.opacity = '1';
                    if (command.querySelector('animate')) {
                        command.querySelectorAll('animate').forEach(anim => anim.beginElement());
                    }
                }, index * delayBetweenCommands + 2800);
            });

            commands2.forEach((command, index) => {
                setTimeout(() => {
                    command.style.opacity = '1';
                    if (command.querySelector('animate')) {
                        command.querySelectorAll('animate').forEach(anim => anim.beginElement());
                    }
                }, index * delayBetweenCommands + 6300);
            });

            commands3.forEach((command, index) => {
                setTimeout(() => {
                    command.style.opacity = '1';
                    if (command.querySelector('animate')) {
                        command.querySelectorAll('animate').forEach(anim => anim.beginElement());
                    }
                }, index * delayBetweenCommands + 9800);
            });

            commands4.forEach((command, index) => {
                setTimeout(() => {
                    command.style.opacity = '1';
                    if (command.querySelector('animate')) {
                        command.querySelectorAll('animate').forEach(anim => anim.beginElement());
                    }
                }, index * delayBetweenCommands + 13300);
            });

            commands5.forEach((command, index) => {
                setTimeout(() => {
                    command.style.opacity = '1';
                    if (command.querySelector('animate')) {
                        command.querySelectorAll('animate').forEach(anim => anim.beginElement());
                    }
                }, index * delayBetweenCommands + 16800);
            });
        }

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

        document.getElementById('start-button').addEventListener('click', startAnimation);
    </script>
</body>
</html>