Light Bulb

.container { display: flex; justify-content: center; align-items: center; height: 100vh; } .bulb { width: 100px; height: 150px; background-color: #ddd; /* Off state - light gray */ border-radius: 50% 50% 30% 30%; /* More bulb-like shape */ border: 5px solid #333; position: relative; transition: background-color 0.5s ease, box-shadow 0.5s ease; } .bulb::after { content: ''; position: absolute; bottom: -25px; /* Base part of the bulb */ left: 50%; transform: translateX(-50%); width: 40px; height: 25px; background-color: #333; border-radius: 0 0 10px 10px; } .bulb.on { background-color: yellow; /* On state */ box-shadow: 0 0 50px yellow; } .string { width: 2px; height: 50px; background-color: #333; position: absolute; top: -50px; left: 50%; transform: translateX(-50%); cursor: pointer; transition: height 0.1s ease; /* String pull animation */ } .string.pulled { height: 40px; /* Shorten string when pulled */ } const bulb = document.querySelector('.bulb'); const string = document.querySelector('.string'); string.addEventListener('click', () => { bulb.classList.toggle('on'); string.classList.add('pulled'); // Start pull animation setTimeout(() => { string.classList.remove('pulled'); // Reset string after animation }, 100); // Match transition duration in CSS });