Animated Lion Logo

body { font-family: Arial, sans-serif; background-color: #ecf0f1; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; } .container { text-align: center; padding: 20px; background-color: white; border-radius: 10px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); } #lion-logo { max-width: 100%; height: auto; } document.addEventListener('DOMContentLoaded', () => { const lionLogo = document.getElementById('lion-logo'); const mane = document.getElementById('mane'); const eyes = document.querySelectorAll('circle[clip-path]'); let scale = 1; let scaleDirection = 0.005; let eyePosition = 0; let eyeDirection = 0.2; function animate() { // Pulsing mane effect scale += scaleDirection; if (scale > 1.05 || scale < 0.95) { scaleDirection *= -1; } mane.style.transform = `scale(${scale})`; // Moving eyes eyePosition += eyeDirection; if (eyePosition > 3 || eyePosition < -3) { eyeDirection *= -1; } eyes.forEach(eye => { eye.style.transform = `translateX(${eyePosition}px)`; }); requestAnimationFrame(animate); } animate(); // Interactive elements lionLogo.addEventListener('mouseenter', () => { scaleDirection *= 1.5; }); lionLogo.addEventListener('mouseleave', () => { scaleDirection = 0.005; }); lionLogo.addEventListener('click', () => { // Roar effect - quick shake lionLogo.style.transform = 'translateX(5px)'; setTimeout(() => { lionLogo.style.transform = 'translateX(-5px)'; setTimeout(() => { lionLogo.style.transform = ''; }, 50); }, 50); }); });