зроби, щоб від  4500 - 5000 мілісекунд вона збільшувалася від 30 до 150 діаметра і в той час ставала червоною. і дальше вже зменшувалася і збільшвалася як і було. 5000-5500 - 30, 5500-6000 - 150 діаметра    <!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ізольована SVG-анімація (оновлена версія)</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 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>
            </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>
        `;

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

        let timerInterval;
        let startTime;
        let animationTimeouts = [];

        function startAnimation() {
            resetAnimation();

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

            // 0–5000 мс: пульсація кожну секунду між радіусами 60 і 15
            for (let i = 0; i < 5; i++) {
                // Зменшення до 15
                scheduleRadiusAnimation(60, 15, 500, i * 1000);
                // Збільшення до 60
                scheduleRadiusAnimation(15, 60, 500, i * 1000 + 500);
            }

            // На 5000 мс змінюємо колір на червоний та зменшуємо до радіуса 15
            animationTimeouts.push(setTimeout(() => {
                svg.querySelector('#bullet-animation1').setAttribute('fill', 'red');
                animateRadius(15, 500);
            }, 5000));

            // З 5500 мс до 6000 мс збільшуємо до радіуса 75 (діаметр 150)
            animationTimeouts.push(setTimeout(() => {
                animateRadius(75, 500);
            }, 5500));

            // Завершуємо анімацію на 15000 мс
            animationTimeouts.push(setTimeout(() => {
                clearInterval(timerInterval);
            }, 15000)); 
        }

        function resetAnimation() {
            clearInterval(timerInterval);
            animationTimeouts.forEach(timeout => clearTimeout(timeout));
            animationTimeouts = [];
            svg.querySelector('#timer-animation1').textContent = '00:00'; 
            svg.querySelector('#bullet-animation1').setAttribute('r', '60'); 
            svg.querySelector('#bullet-animation1').setAttribute('fill', '#90EE90'); // Скидаємо колір на салатовий
        }

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

        function animateRadius(targetRadius, duration) {
            const circle = svg.querySelector('#bullet-animation1');
            const initialRadius = parseFloat(circle.getAttribute('r'));
            const radiusDelta = targetRadius - initialRadius;
            const startTime = Date.now();

            function animate() {
                const elapsed = Date.now() - startTime;
                const progress = Math.min(elapsed / duration, 1);
                const newRadius = initialRadius + radiusDelta * progress;
                circle.setAttribute('r', newRadius);

                if (progress < 1) {
                    requestAnimationFrame(animate);
                } else {
                    circle.setAttribute('r', targetRadius);
                }
            }

            animate();
        }

        function scheduleRadiusAnimation(startRadius, endRadius, duration, delay) {
            animationTimeouts.push(setTimeout(() => {
                svg.querySelector('#bullet-animation1').setAttribute('r', startRadius);
                animateRadius(endRadius, duration);
            }, delay));
        }

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