body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #000; } .container { position: relative; width: 200px; height: 200px; } .circle { position: absolute; width: 100%; height: 100%; border: 2px solid rgba(255, 255, 255, 0.5); border-radius: 50%; animation: expandFade 3s infinite; } #circle1 { animation-delay: 0s; } #circle2 { animation-delay: 1s; } #circle3 { animation-delay: 2s; } @keyframes expandFade { 0% { transform: scale(0); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } } document.addEventListener("DOMContentLoaded", () => { const container = document.querySelector('.container'); // Function to regenerate the circles function regenerateCircles() { container.innerHTML = ` `; } // Regenerate the circles every 3 seconds (matching the animation duration) setInterval(regenerateCircles, 3000); });