The lamp, drawn

The key CSS

Cut from this exhibit’s stylesheet as it is served.

.x-lamp .lamp {
  position: relative; width: 200px; height: 330px; margin-bottom: 46px;
  background:
    /* the flame: an ellipse that goes from white to orange to nothing */
    radial-gradient(ellipse 13px 34px at 50% 41%, #fffbe8 0 25%, #ffd54a 45%, #ff8a1f 75%, transparent 78%),
    /* the wick */
    linear-gradient(#2b2117, #2b2117) 50% 52% / 6px 16px no-repeat,
    /* the burner collar and the brass font, as stacked ellipses and a rounded band */
    radial-gradient(ellipse 46px 12px at 50% 59%, #f3d27a, #a77a24 70%, transparent 72%),
    radial-gradient(ellipse 90px 62px at 50% 78%, #f6d987 0 20%, #c8952f 50%, #7c5512 88%, transparent 90%),
    radial-gradient(ellipse 70px 12px at 50% 97%, #a77a24 0 80%, transparent 82%);
}
/* the glass chimney: a bulb with a neck, drawn with a border and an eight-value radius */
.x-lamp .lamp::before {
  content: ""; position: absolute; left: 50%; top: 14%; width: 92px; height: 46%; translate: -50% 0;
  border: 2px solid rgb(255 255 255 / .75); border-radius: 30% 30% 46% 46% / 22% 22% 60% 60%;
  background: linear-gradient(100deg, rgb(255 255 255 / .55) 8%, transparent 22% 78%, rgb(255 255 255 / .25) 92%), rgb(200 225 240 / .18);
}
/* the glow, which flickers */
.x-lamp .lamp::after {
  content: ""; position: absolute; left: 50%; top: 41%; width: 340px; height: 340px; translate: -50% -50%; z-index: -1;
  border-radius: 50%; background: radial-gradient(circle, rgb(255 214 110 / .75), rgb(255 190 80 / .25) 40%, transparent 68%);
  animation: flicker 2.4s ease-in-out infinite alternate;
}
@keyframes flicker { 0% { opacity: .85; scale: 1; } 40% { opacity: 1; scale: 1.04; } 70% { opacity: .9; scale: .98; } 100% { opacity: 1; scale: 1.02; } }
@media (prefers-reduced-motion: reduce) { .x-lamp .lamp::after { animation: none; } }

/* off: no flame, no glow */
.x-lamp .lamp-switch:checked ~ .lamp { background-size: 0 0, 6px 16px, auto, auto, auto; }
.x-lamp .lamp-switch:checked ~ .lamp::after { opacity: 0; animation: none; }