localhost / lightbulb

The Impossible Lightbulb

pull the cord — you can never keep it on

READY · PULL TO TRY

Html

<!-- the filament -->
<g class="bulb__coil">
  <path d="M-761 790
    L-753 794 L-745 786…"/>
</g>

<!-- broken halves -->
<path class="coil--l"/>
<path class="coil--r"/>
<circle class="hotspot"/>

<!-- the pull cord -->
<line class="cord"/>

CSS

:root {
  --heat: 0; /* white-hot */
}
/* blackbody: amber-white */
.bulb__coil {
  stroke: hsl(
    calc(40 - heat*6),
    calc((92 - heat*72)%),
    calc((16 + heat*48)%));
  filter: drop-shadow(0 0
    calc(heat*7px) #ffd27a);
}
.bulb__bulb {
  fill: hsla(46,85%,88%,
    calc(.06 + heat*.34));
}

// it always blows out
function surge() {
  tl.to(root, {
    '--heat': 1 })       // over-drive
    .add(brownOut())     // flicker
    .call(arcFlash)      // it severs
    .call(() => {
      coil.hide();
      embers.show();     // red-black
      soot.bloom();
    });
}
cord.on('pull', surge);