Light Bulb

admin1234
Jan 31, 2026 7
Live Preview

Live Editor

<div class="light-box">

  <!-- SVG BULB -->
  <svg class="bulb" id="bulb" viewBox="0 0 64 64">
    <!-- rays -->
    <g class="rays" stroke="#fde047" stroke-width="2">
      <line x1="32" y1="2" x2="32" y2="12"/>
      <line x1="32" y1="52" x2="32" y2="62"/>
      <line x1="2" y1="32" x2="12" y2="32"/>
      <line x1="52" y1="32" x2="62" y2="32"/>
      <line x1="10" y1="10" x2="18" y2="18"/>
      <line x1="46" y1="46" x2="54" y2="54"/>
      <line x1="10" y1="54" x2="18" y2="46"/>
      <line x1="46" y1="18" x2="54" y2="10"/>
    </g>

    <!-- bulb -->
    <path
      d="M32 6
         C20 6 12 16 12 26
         C12 34 18 38 20 42
         H44
         C46 38 52 34 52 26
         C52 16 44 6 32 6Z"
      fill="#fde047"/>

    <!-- base -->
    <rect x="24" y="42" width="16" height="8" rx="2" fill="#9ca3af"/>
    <rect x="22" y="50" width="20" height="6" rx="2" fill="#6b7280"/>
  </svg>

  <!-- SWITCH -->
  <div class="switch" id="toggle">
    <div class="lever"></div>
  </div>

</div>
body{
  margin:0;
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  background:#020617;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  transition:.5s;
}

/* container */
.light-box{
  text-align:center;
}

/* bulb svg */
.bulb{
  width:120px;
  margin-bottom:20px;
  transition:.4s;
}

/* glow */
.bulb.on{
  filter:
    drop-shadow(0 0 20px #fde047)
    drop-shadow(0 0 50px #facc15);
}

/* light rays */
.rays{
  opacity:0;
  transition:.4s;
}

.bulb.on .rays{
  opacity:1;
}

/* switch */
.switch{
  width:70px;
  height:110px;
  border-radius:18px;
  background:#111827;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.1),
    0 20px 50px rgba(0,0,0,.6);
  margin:0 auto;
  position:relative;
  cursor:pointer;
}

/* lever */
.lever{
  width:26px;
  height:46px;
  background:#e5e7eb;
  border-radius:999px;
  position:absolute;
  top:14px;
  left:50%;
  transform:translateX(-50%);
  transition:.4s;
  box-shadow:inset 0 -6px 10px rgba(0,0,0,.4);
}

/* ON state */
.switch.on{
  box-shadow:
    0 0 0 2px #fde047,
    0 0 40px rgba(250,204,21,.8);
}

.switch.on .lever{
  top:50px;
}

/* room light */
body.light-on{
  background:radial-gradient(circle at center,#fef9c3,#020617);
}
const toggle = document.getElementById("toggle");
const bulb = document.getElementById("bulb");
const body = document.body;

toggle.onclick = () => {
  toggle.classList.toggle("on");
  bulb.classList.toggle("on");
  body.classList.toggle("light-on");
};
Categories

Light Bulb

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
