зроби що по цьому Коді
ця Куля що німується
анімувалися І дальше протягом 5 секунд а після цього вона має збільшитися до діаметру
160 рівно на 5 секунді діаметр 160 має стати
і більше нічого не роби поки що
але всі зміни всі рухи кнопка Старт
повністю все має залишитись таким самим як було 100% ідентично кроме цієї зміни
<!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>
                <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"/> 

            <g class="controls" transform="translate(400, 303.6)"> 
                <circle id="bullet-animation1" cx="-43" cy="-70" r="60" fill="#90EE90" /> 

                <text x="-43" y="-70" text-anchor="middle" dominant-baseline="middle" font-size="30" font-weight="bold" fill="white" font-family="sans-serif">3</text>

                <rect id="start-button-animation1" x="-125" y="16" 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="41" 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="16" width="120" height="40" fill="none" rx="5" ry="5"/>
                <text id="timer-animation1" x="10" y="41" 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>

            <animate 
                xlink:href="#bullet-animation1"
                attributeName="r"
                from="60" 
                to="15" 
                dur="500ms"
                begin="indefinite"
                fill="freeze"
                id="bullet-shrink-animation1"
            />

            <animate 
                xlink:href="#bullet-animation1"
                attributeName="r"
                from="15" 
                to="60" 
                dur="500ms"
                begin="indefinite"
                fill="freeze"
                id="bullet-grow-animation1"
            />
        `;

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

        let timerInterval;
        let startTime;
        let animationInProgress = false;
        let pulseCount1 = 0;


        function startAnimation() {
            resetAnimation();

            animationInProgress = true;
            pulseCount1 = 0;

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

            pulse1();

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

        function pulse1() {
            if (pulseCount1 < 5) {
                svg.querySelector('#bullet-shrink-animation1').beginElement();
                setTimeout(() => {
                    svg.querySelector('#bullet-grow-animation1').beginElement();
                }, 500); 
                pulseCount1++;
                setTimeout(pulse1, 1000); 
            }
        }

        function resetAnimation() {
            animationInProgress = false;
            clearInterval(timerInterval);
            svg.querySelector('#timer-animation1').textContent = '00:00'; 
            svg.querySelector('#bullet-animation1').setAttribute('r', '60'); 
            pulseCount1 = 0; 
        }

        function updateTimer() {
            const currentTime = Date.now();
            const elapsedTime = (currentTime - startTime) / 1000;
            
            if (elapsedTime >= 15) { 
                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')}`;
            }
        }

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