console
function time() {
const timestamp = new Date()
var m = leftPad(timestamp.getMinutes()).split('')
var h = leftPad(timestamp.getHours()).split('');
updateDisplay(m, h);
setTimeout(time, 250);
}
function updateDisplay(m, h) {
const h1 = document.querySelector('#h1')
const h2 = document.querySelector('#h2')
const m1 = document.querySelector('#m1')
const m2 = document.querySelector('#m2')
clearStateClasses(h1).add(`nixie--state__${h[0]}`)
clearStateClasses(h2).add(`nixie--state__${h[1]}`)
clearStateClasses(m1).add(`nixie--state__${m[0]}`)
clearStateClasses(m2).add(`nixie--state__${m[1]}`)
}
function clearStateClasses(node) {
const classList = node.classList
while (classList.length > 0) {
classList.remove(classList.item(0))
}
classList.add('nixie')
return classList
}
function digits(input) {
return leftPad(input).split('')
}
function leftPad(input) {
return `0${input}`.slice(-2)
}
time()
<div class="wrapper">
<section class="display">
<svg id="h1" class="nixie nixie--state__9" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 305.24 502.65">
<g class="nixie-jar">
<path d="M55.94,444.62V127.5c0-53.12,34.08-89.9,76.83-89.9" />
<path d="M250.77,444.62V127.5c0-53.12-34.08-89.9-76.83-89.9" />
<rect x="126.5" y="17.98" width="53.94" height="19.62" />
<rect x="40.43" y="444.62" width="224.38" height="35.96" />
</g>
<g class="nixie-fillament">
<line class="nixie-fillament__segment state__5 state__7"x1="78.46" y1="116.88" x2="153.46" y2="116.88" />
<line class="nixie-fillament__segment state__5 state__7"x1="153.46" y1="116.88" x2="228.46" y2="116.88" />
<line class="nixie-fillament__segment state__4"x1="228.46" y1="116.88" x2="228.46" y2="191.66" />
<line class="nixie-fillament__segment state__4 state__0 state__9"x1="228.46" y1="191.66" x2="228.46" y2="266.88" />
<line class="nixie-fillament__segment state__4 state__0 state__9"x1="228.46" y1="266.88" x2="228.46" y2="342.07" />
<line class="nixie-fillament__segment state__4"x1="228.46" y1="342.07" x2="228.46" y2="416.88" />
<line class="nixie-fillament__segment state__1 state__2"x1="228.46" y1="416.88" x2="153.46" y2="416.88" />
<line class="nixie-fillament__segment state__1 state__2"x1="153.46" y1="416.88" x2="78.46" y2="416.88" />
<line class="nixie-fillament__segment state__2"x1="78.46" y1="416.88" x2="78.46" y2="342.07" />
<line class="nixie-fillament__segment state__0 state__6"x1="78.46" y1="342.07" x2="78.46" y2="266.88" />
<line class="nixie-fillament__segment state__4 state__5 state__0 state__6"x1="78.46" y1="266.88" x2="78.46" y2="191.66" />
<line class="nixie-fillament__segment state__4 state__5"x1="78.46" y1="191.66" x2="78.46" y2="116.88" />
<line class="nixie-fillament__segment"x1="78.46" y1="116.88" x2="153.46" y2="191.66" />
<line class="nixie-fillament__segment"x1="78.46" y1="116.88" x2="153.46" y2="266.88" />
<line class="nixie-fillament__segment"x1="78.46" y1="116.88" x2="153.46" y2="342.07" />
<line class="nixie-fillament__segment"x1="78.46" y1="116.88" x2="153.46" y2="416.88" />
<line class="nixie-fillament__segment"x1="228.46" y1="116.88" x2="153.46" y2="191.66" />
<line class="nixie-fillament__segment "x1="78.46" y1="266.88" x2="153.46" y2="191.66" />
<line class="nixie-fillament__segment"x1="228.46" y1="266.88" x2="153.46" y2="191.66" />
<line class="nixie-fillament__segment"x1="228.46" y1="266.88" x2="153.46" y2="342.07" />
<line class="nixie-fillament__segment"x1="228.46" y1="416.88" x2="153.46" y2="342.07" />
<line class="nixie-fillament__segment"x1="78.46" y1="416.88" x2="153.46" y2="342.07" />
<line class="nixie-fillament__segment"x1="78.46" y1="266.88" x2="153.46" y2="342.07" />
<line class="nixie-fillament__segment"x1="153.6" y1="266.66" x2="228.46" y2="416.88" />
<line class="nixie-fillament__segment state__0 state__7"x1="153.33" y1="266.66" x2="78.46" y2="416.88" />
<line class="nixie-fillament__segment state__0 state__7"x1="228.46" y1="116.88" x2="153.46" y2="266.88" />
<line class="nixie-fillament__segment"x1="228.46" y1="116.88" x2="153.46" y2="342.07" />
<line class="nixie-fillament__segment"x1="228.46" y1="116.88" x2="153.46" y2="416.88" />
<line class="nixie-fillament__segment"x1="228.46" y1="191.66" x2="153.46" y2="191.66" />
<line class="nixie-fillament__segment"x1="78.46" y1="191.66" x2="153.46" y2="191.66" />
<line class="nixie-fillament__segment state__1"x1="153.46" y1="116.88" x2="153.46" y2="191.66" />
<line class="nixie-fillament__segment state__1"x1="153.46" y1="191.66" x2="153.46" y2="266.88" />
<line class="nixie-fillament__segment state__4 state__7"x1="228.46" y1="266.88" x2="153.46" y2="266.88" />
<line class="nixie-fillament__segment state__4 state__5 state__7"x1="78.46" y1="266.88" x2="153.46" y2="266.88" />
<line class="nixie-fillament__segment"x1="228.46" y1="342.07" x2="153.46" y2="342.07" />
<line class="nixie-fillament__segment state__1"x1="153.46" y1="416.88" x2="153.46" y2="342.07" />
<line class="nixie-fillament__segment"x1="78.46" y1="342.07" x2="153.46" y2="342.07" />
<path class="nixie-fillament__segment state__1 state__2 state__3 state__0 state__6 state__8 state__9" d="M153.46,116.66a75,75,0,0,0-75,75c0,.05,0,.09,0,.13" />
<path class="nixie-fillament__segment state__8 state__9" d="M78.46,191.66a75,75,0,0,0,75,75h.14" />
<path class="nixie-fillament__segment state__2 state__3 state__8 state__9" d="M153.46,266.66a75,75,0,0,0,75-75v-.13" />
<path class="nixie-fillament__segment state__2 state__3 state__0 state__6 state__8 state__9" d="M228.46,191.66a75,75,0,0,0-75-75h-.13" />
<path class="nixie-fillament__segment state__2 state__6 state__8" d="M153.46,266.66a75,75,0,0,0-75,75s0,.09,0,.13" />
<path class="nixie-fillament__segment state__3 state__0 state__5 state__6 state__8 state__9" d="M78.46,341.66a75,75,0,0,0,75,75h.14" />
<path class="nixie-fillament__segment state__3 state__5 state__0 state__6 state__8 state__9" d="M153.46,416.66a75,75,0,0,0,75-75v-.13" />
<path class="nixie-fillament__segment state__3 state__5 state__6 state__8" d="M228.46,341.66a75,75,0,0,0-75-75h-.13" />
</g>
</svg>
<svg id="h2" class="nixie nixie--state__9" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 305.24 502.65">
<g class="nixie-jar">
<path d="M55.94,444.62V127.5c0-53.12,34.08-89.9,76.83-89.9" />
<path d="M250.77,444.62V127.5c0-53.12-34.08-89.9-76.83-89.9" />
<rect x="126.5" y="17.98" width="53.94" height="19.62" />
<rect x="40.43" y="444.62" width="224.38" height="35.96" />
</g>
<g class="nixie-fillament">
<line class="nixie-fillament__segment state__5 state__7"x1="78.46" y1="116.88" x2="153.46" y2="116.88" />
<line class="nixie-fillament__segment state__5 state__7"x1="153.46" y1="116.88" x2="228.46" y2="116.88" />
<line class="nixie-fillament__segment state__4"x1="228.46" y1="116.88" x2="228.46" y2="191.66" />
<line class="nixie-fillament__segment state__4 state__0 state__9"x1="228.46" y1="191.66" x2="228.46" y2="266.88" />
<line class="nixie-fillament__segment state__4 state__0 state__9"x1="228.46" y1="266.88" x2="228.46" y2="342.07" />
<line class="nixie-fillament__segment state__4"x1="228.46" y1="342.07" x2="228.46" y2="416.88" />
<line class="nixie-fillament__segment state__1 state__2"x1="228.46" y1="416.88" x2="153.46" y2="416.88" />
<line class="nixie-fillament__segment state__1 state__2"x1="153.46" y1="416.88" x2="78.46" y2="416.88" />
<line class="nixie-fillament__segment state__2"x1="78.46" y1="416.88" x2="78.46" y2="342.07" />
<line class="nixie-fillament__segment state__0 state__6"x1="78.46" y1="342.07" x2="78.46" y2="266.88" />
<line class="nixie-fillament__segment state__4 state__5 state__0 state__6"x1="78.46" y1="266.88" x2="78.46" y2="191.66" />
<line class="nixie-fillament__segment state__4 state__5"x1="78.46" y1="191.66" x2="78.46" y2="116.88" />
<line class="nixie-fillament__segment"x1="78.46" y1="116.88" x2="153.46" y2="191.66" />
<line class="nixie-fillament__segment"x1="78.46" y1="116.88" x2="153.46" y2="266.88" />
<line class="nixie-fillament__segment"x1="78.46" y1="116.88" x2="153.46" y2="342.07" />
<line class="nixie-fillament__segment"x1="78.46" y1="116.88" x2="153.46" y2="416.88" />
<line class="nixie-fillament__segment"x1="228.46" y1="116.88" x2="153.46" y2="191.66" />
<line class="nixie-fillament__segment "x1="78.46" y1="266.88" x2="153.46" y2="191.66" />
<line class="nixie-fillament__segment"x1="228.46" y1="266.88" x2="153.46" y2="191.66" />
<line class="nixie-fillament__segment"x1="228.46" y1="266.88" x2="153.46" y2="342.07" />
<line class="nixie-fillament__segment"x1="228.46" y1="416.88" x2="153.46" y2="342.07" />
<line class="nixie-fillament__segment"x1="78.46" y1="416.88" x2="153.46" y2="342.07" />
<line class="nixie-fillament__segment"x1="78.46" y1="266.88" x2="153.46" y2="342.07" />
<line class="nixie-fillament__segment"x1="153.6" y1="266.66" x2="228.46" y2="416.88" />
<line class="nixie-fillament__segment state__0 state__7"x1="153.33" y1="266.66" x2="78.46" y2="416.88" />
<line class="nixie-fillament__segment state__0 state__7"x1="228.46" y1="116.88" x2="153.46" y2="266.88" />
<line class="nixie-fillament__segment"x1="228.46" y1="116.88" x2="153.46" y2="342.07" />
<line class="nixie-fillament__segment"x1="228.46" y1="116.88" x2="153.46" y2="416.88" />
<line class="nixie-fillament__segment"x1="228.46" y1="191.66" x2="153.46" y2="191.66" />
<line class="nixie-fillament__segment"x1="78.46" y1="191.66" x2="153.46" y2="191.66" />
<line class="nixie-fillament__segment state__1"x1="153.46" y1="116.88" x2="153.46" y2="191.66" />
<line class="nixie-fillament__segment state__1"x1="153.46" y1="191.66" x2="153.46" y2="266.88" />
<line class="nixie-fillament__segment state__4 state__7"x1="228.46" y1="266.88" x2="153.46" y2="266.88" />
<line class="nixie-fillament__segment state__4 state__5 state__7"x1="78.46" y1="266.88" x2="153.46" y2="266.88" />
<line class="nixie-fillament__segment"x1="228.46" y1="342.07" x2="153.46" y2="342.07" />
<line class="nixie-fillament__segment state__1"x1="153.46" y1="416.88" x2="153.46" y2="342.07" />
<line class="nixie-fillament__segment"x1="78.46" y1="342.07" x2="153.46" y2="342.07" />
<line class="nixie-fillament__segment state__1"x1="153.46" y1="266.88" x2="153.46" y2="342.07" />
<path class="nixie-fillament__segment state__1 state__2 state__3 state__0 state__6 state__8 state__9" d="M153.46,116.66a75,75,0,0,0-75,75c0,.05,0,.09,0,.13" />
<path class="nixie-fillament__segment state__8 state__9" d="M78.46,191.66a75,75,0,0,0,75,75h.14" />
<path class="nixie-fillament__segment state__2 state__3 state__8 state__9" d="M153.46,266.66a75,75,0,0,0,75-75v-.13" />
<path class="nixie-fillament__segment state__2 state__3 state__0 state__6 state__8 state__9" d="M228.46,191.66a75,75,0,0,0-75-75h-.13" />
<path class="nixie-fillament__segment state__2 state__6 state__8" d="M153.46,266.66a75,75,0,0,0-75,75s0,.09,0,.13" />
<path class="nixie-fillament__segment state__3 state__0 state__5 state__6 state__8 state__9" d="M78.46,341.66a75,75,0,0,0,75,75h.14" />
<path class="nixie-fillament__segment state__3 state__5 state__0 state__6 state__8 state__9" d="M153.46,416.66a75,75,0,0,0,75-75v-.13" />
<path class="nixie-fillament__segment state__3 state__5 state__6 state__8" d="M228.46,341.66a75,75,0,0,0-75-75h-.13" />
</g>
</svg>
<div class="gap"></div>
<svg id="m1" class="nixie nixie--state__9" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 305.24 502.65">
<g class="nixie-jar">
<path d="M55.94,444.62V127.5c0-53.12,34.08-89.9,76.83-89.9" />
<path d="M250.77,444.62V127.5c0-53.12-34.08-89.9-76.83-89.9" />
<rect x="126.5" y="17.98" width="53.94" height="19.62" />
<rect x="40.43" y="444.62" width="224.38" height="35.96" />
</g>
<g class="nixie-fillament">
<line class="nixie-fillament__segment state__5 state__7"x1="78.46" y1="116.88" x2="153.46" y2="116.88" />
<line class="nixie-fillament__segment state__5 state__7"x1="153.46" y1="116.88" x2="228.46" y2="116.88" />
<line class="nixie-fillament__segment state__4"x1="228.46" y1="116.88" x2="228.46" y2="191.66" />
<line class="nixie-fillament__segment state__4 state__0 state__9"x1="228.46" y1="191.66" x2="228.46" y2="266.88" />
<line class="nixie-fillament__segment state__4 state__0 state__9"x1="228.46" y1="266.88" x2="228.46" y2="342.07" />
<line class="nixie-fillament__segment state__4"x1="228.46" y1="342.07" x2="228.46" y2="416.88" />
<line class="nixie-fillament__segment state__1 state__2"x1="228.46" y1="416.88" x2="153.46" y2="416.88" />
<line class="nixie-fillament__segment state__1 state__2"x1="153.46" y1="416.88" x2="78.46" y2="416.88" />
<line class="nixie-fillament__segment state__2"x1="78.46" y1="416.88" x2="78.46" y2="342.07" />
<line class="nixie-fillament__segment state__0 state__6"x1="78.46" y1="342.07" x2="78.46" y2="266.88" />
<line class="nixie-fillament__segment state__4 state__5 state__0 state__6"x1="78.46" y1="266.88" x2="78.46" y2="191.66" />
<line class="nixie-fillament__segment state__4 state__5"x1="78.46" y1="191.66" x2="78.46" y2="116.88" />
<line class="nixie-fillament__segment"x1="78.46" y1="116.88" x2="153.46" y2="191.66" />
<line class="nixie-fillament__segment"x1="78.46" y1="116.88" x2="153.46" y2="266.88" />
<line class="nixie-fillament__segment"x1="78.46" y1="116.88" x2="153.46" y2="342.07" />
<line class="nixie-fillament__segment"x1="78.46" y1="116.88" x2="153.46" y2="416.88" />
<line class="nixie-fillament__segment"x1="228.46" y1="116.88" x2="153.46" y2="191.66" />
<line class="nixie-fillament__segment "x1="78.46" y1="266.88" x2="153.46" y2="191.66" />
<line class="nixie-fillament__segment"x1="228.46" y1="266.88" x2="153.46" y2="191.66" />
<line class="nixie-fillament__segment"x1="228.46" y1="266.88" x2="153.46" y2="342.07" />
<line class="nixie-fillament__segment"x1="228.46" y1="416.88" x2="153.46" y2="342.07" />
<line class="nixie-fillament__segment"x1="78.46" y1="416.88" x2="153.46" y2="342.07" />
<line class="nixie-fillament__segment"x1="78.46" y1="266.88" x2="153.46" y2="342.07" />
<line class="nixie-fillament__segment"x1="153.6" y1="266.66" x2="228.46" y2="416.88" />
<line class="nixie-fillament__segment state__0 state__7"x1="153.33" y1="266.66" x2="78.46" y2="416.88" />
<line class="nixie-fillament__segment state__0 state__7"x1="228.46" y1="116.88" x2="153.46" y2="266.88" />
<line class="nixie-fillament__segment"x1="228.46" y1="116.88" x2="153.46" y2="342.07" />
<line class="nixie-fillament__segment"x1="228.46" y1="116.88" x2="153.46" y2="416.88" />
<line class="nixie-fillament__segment"x1="228.46" y1="191.66" x2="153.46" y2="191.66" />
<line class="nixie-fillament__segment"x1="78.46" y1="191.66" x2="153.46" y2="191.66" />
<line class="nixie-fillament__segment state__1"x1="153.46" y1="116.88" x2="153.46" y2="191.66" />
<line class="nixie-fillament__segment state__1"x1="153.46" y1="191.66" x2="153.46" y2="266.88" />
<line class="nixie-fillament__segment state__4 state__7"x1="228.46" y1="266.88" x2="153.46" y2="266.88" />
<line class="nixie-fillament__segment state__4 state__5 state__7"x1="78.46" y1="266.88" x2="153.46" y2="266.88" />
<line class="nixie-fillament__segment"x1="228.46" y1="342.07" x2="153.46" y2="342.07" />
<line class="nixie-fillament__segment state__1"x1="153.46" y1="416.88" x2="153.46" y2="342.07" />
<line class="nixie-fillament__segment"x1="78.46" y1="342.07" x2="153.46" y2="342.07" />
<line class="nixie-fillament__segment state__1"x1="153.46" y1="266.88" x2="153.46" y2="342.07" />
<path class="nixie-fillament__segment state__1 state__2 state__3 state__0 state__6 state__8 state__9" d="M153.46,116.66a75,75,0,0,0-75,75c0,.05,0,.09,0,.13" />
<path class="nixie-fillament__segment state__8 state__9" d="M78.46,191.66a75,75,0,0,0,75,75h.14" />
<path class="nixie-fillament__segment state__2 state__3 state__8 state__9" d="M153.46,266.66a75,75,0,0,0,75-75v-.13" />
<path class="nixie-fillament__segment state__2 state__3 state__0 state__6 state__8 state__9" d="M228.46,191.66a75,75,0,0,0-75-75h-.13" />
<path class="nixie-fillament__segment state__2 state__6 state__8" d="M153.46,266.66a75,75,0,0,0-75,75s0,.09,0,.13" />
<path class="nixie-fillament__segment state__3 state__0 state__5 state__6 state__8 state__9" d="M78.46,341.66a75,75,0,0,0,75,75h.14" />
<path class="nixie-fillament__segment state__3 state__5 state__0 state__6 state__8 state__9" d="M153.46,416.66a75,75,0,0,0,75-75v-.13" />
<path class="nixie-fillament__segment state__3 state__5 state__6 state__8" d="M228.46,341.66a75,75,0,0,0-75-75h-.13" />
</g>
</svg>
<svg id="m2" class="nixie nixie--state__9" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 305.24 502.65">
<g class="nixie-jar">
<path d="M55.94,444.62V127.5c0-53.12,34.08-89.9,76.83-89.9" />
<path d="M250.77,444.62V127.5c0-53.12-34.08-89.9-76.83-89.9" />
<rect x="126.5" y="17.98" width="53.94" height="19.62" />
<rect x="40.43" y="444.62" width="224.38" height="35.96" />
</g>
<g class="nixie-fillament">
<line class="nixie-fillament__segment state__5 state__7"x1="78.46" y1="116.88" x2="153.46" y2="116.88" />
<line class="nixie-fillament__segment state__5 state__7"x1="153.46" y1="116.88" x2="228.46" y2="116.88" />
<line class="nixie-fillament__segment state__4"x1="228.46" y1="116.88" x2="228.46" y2="191.66" />
<line class="nixie-fillament__segment state__4 state__0 state__9"x1="228.46" y1="191.66" x2="228.46" y2="266.88" />
<line class="nixie-fillament__segment state__4 state__0 state__9"x1="228.46" y1="266.88" x2="228.46" y2="342.07" />
<line class="nixie-fillament__segment state__4"x1="228.46" y1="342.07" x2="228.46" y2="416.88" />
<line class="nixie-fillament__segment state__1 state__2"x1="228.46" y1="416.88" x2="153.46" y2="416.88" />
<line class="nixie-fillament__segment state__1 state__2"x1="153.46" y1="416.88" x2="78.46" y2="416.88" />
<line class="nixie-fillament__segment state__2"x1="78.46" y1="416.88" x2="78.46" y2="342.07" />
<line class="nixie-fillament__segment state__0 state__6"x1="78.46" y1="342.07" x2="78.46" y2="266.88" />
<line class="nixie-fillament__segment state__4 state__5 state__0 state__6"x1="78.46" y1="266.88" x2="78.46" y2="191.66" />
<line class="nixie-fillament__segment state__4 state__5"x1="78.46" y1="191.66" x2="78.46" y2="116.88" />
<line class="nixie-fillament__segment"x1="78.46" y1="116.88" x2="153.46" y2="191.66" />
<line class="nixie-fillament__segment"x1="78.46" y1="116.88" x2="153.46" y2="266.88" />
<line class="nixie-fillament__segment"x1="78.46" y1="116.88" x2="153.46" y2="342.07" />
<line class="nixie-fillament__segment"x1="78.46" y1="116.88" x2="153.46" y2="416.88" />
<line class="nixie-fillament__segment"x1="228.46" y1="116.88" x2="153.46" y2="191.66" />
<line class="nixie-fillament__segment "x1="78.46" y1="266.88" x2="153.46" y2="191.66" />
<line class="nixie-fillament__segment"x1="228.46" y1="266.88" x2="153.46" y2="191.66" />
<line class="nixie-fillament__segment"x1="228.46" y1="266.88" x2="153.46" y2="342.07" />
<line class="nixie-fillament__segment"x1="228.46" y1="416.88" x2="153.46" y2="342.07" />
<line class="nixie-fillament__segment"x1="78.46" y1="416.88" x2="153.46" y2="342.07" />
<line class="nixie-fillament__segment"x1="78.46" y1="266.88" x2="153.46" y2="342.07" />
<line class="nixie-fillament__segment"x1="153.6" y1="266.66" x2="228.46" y2="416.88" />
<line class="nixie-fillament__segment state__0 state__7"x1="153.33" y1="266.66" x2="78.46" y2="416.88" />
<line class="nixie-fillament__segment state__0 state__7"x1="228.46" y1="116.88" x2="153.46" y2="266.88" />
<line class="nixie-fillament__segment"x1="228.46" y1="116.88" x2="153.46" y2="342.07" />
<line class="nixie-fillament__segment"x1="228.46" y1="116.88" x2="153.46" y2="416.88" />
<line class="nixie-fillament__segment"x1="228.46" y1="191.66" x2="153.46" y2="191.66" />
<line class="nixie-fillament__segment"x1="78.46" y1="191.66" x2="153.46" y2="191.66" />
<line class="nixie-fillament__segment state__1"x1="153.46" y1="116.88" x2="153.46" y2="191.66" />
<line class="nixie-fillament__segment state__1"x1="153.46" y1="191.66" x2="153.46" y2="266.88" />
<line class="nixie-fillament__segment state__4 state__7"x1="228.46" y1="266.88" x2="153.46" y2="266.88" />
<line class="nixie-fillament__segment state__4 state__5 state__7"x1="78.46" y1="266.88" x2="153.46" y2="266.88" />
<line class="nixie-fillament__segment"x1="228.46" y1="342.07" x2="153.46" y2="342.07" />
<line class="nixie-fillament__segment state__1"x1="153.46" y1="416.88" x2="153.46" y2="342.07" />
<line class="nixie-fillament__segment"x1="78.46" y1="342.07" x2="153.46" y2="342.07" />
<line class="nixie-fillament__segment state__1"x1="153.46" y1="266.88" x2="153.46" y2="342.07" />
<path class="nixie-fillament__segment state__1 state__2 state__3 state__0 state__6 state__8 state__9" d="M153.46,116.66a75,75,0,0,0-75,75c0,.05,0,.09,0,.13" />
<path class="nixie-fillament__segment state__8 state__9" d="M78.46,191.66a75,75,0,0,0,75,75h.14" />
<path class="nixie-fillament__segment state__2 state__3 state__8 state__9" d="M153.46,266.66a75,75,0,0,0,75-75v-.13" />
<path class="nixie-fillament__segment state__2 state__3 state__0 state__6 state__8 state__9" d="M228.46,191.66a75,75,0,0,0-75-75h-.13" />
<path class="nixie-fillament__segment state__2 state__6 state__8" d="M153.46,266.66a75,75,0,0,0-75,75s0,.09,0,.13" />
<path class="nixie-fillament__segment state__3 state__0 state__5 state__6 state__8 state__9" d="M78.46,341.66a75,75,0,0,0,75,75h.14" />
<path class="nixie-fillament__segment state__3 state__5 state__0 state__6 state__8 state__9" d="M153.46,416.66a75,75,0,0,0,75-75v-.13" />
<path class="nixie-fillament__segment state__3 state__5 state__6 state__8" d="M228.46,341.66a75,75,0,0,0-75-75h-.13" />
</g>
</svg>
</section>
<section class="base">
<svg class="board" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 595.28 101">
<rect class="cls-1" x="12" y="5" width="572" height="89.44"/>
<path class="cls-1" d="M17,12.39H51.89C75,13.13,96,22.74,120,18.31c2.4-.6,4.8-1.22,7.2-1.83a25.33,25.33,0,0,1,3.55-.71C150,14.61,168,8,187,12.39H292.4c19.8-1.11,39.45.19,59.28,1.3l4,.21c2.36.71,4.36,2.19,6.36,2.19,14,.74,28-5.92,41.83-1.62l4.08-.27,4.09-.33c16-.74,32-1.48,48.25-1.48h42.87c26.88-1.48,52.88,3.7,80.36,3.68"/>
<path class="cls-1" d="M17,16.83H51.89C72,16.83,91,23.48,112,22c5-.49,9.89-1.31,14.76-2.16a14.89,14.89,0,0,1,3.59-.34C150,21.26,169,10.91,187.66,16.63a26.87,26.87,0,0,0,4,.2H299.75c16.5.23,33.07.61,49.66.93l4.15.08C357,19.78,361,19.78,364,20.52c14,0,29-7.39,43.44-2.23l4.14,0c15.15-.15,30.26-.58,45.26-1.43h43.9c10.26,0,20.26-.74,30.26,0,18,1.48,35,4.43,52.76,3.8"/>
<path class="cls-1" d="M17,25H48.67c1,0,2.12,0,3.17,0C61,25,69,25.7,77.6,26.29c1.38.1,2.73.2,4,.26,14.43.7,28.7.46,43-.09l3.66-.15C144,30.87,159,23.48,174,22.74A33.93,33.93,0,0,1,190,24.58l4,0c21.39-.17,42.72,0,64.06.41,2.7,0,5.41,0,8-.16,12-2.06,23-1.32,34.7.07,1.82.09,3.7.09,5.59.09,13.2,0,26.45.15,39.7.29l4.12,0c2.86,1.89,6.86,4.1,10.86,4.1,16,0,31-12.56,46.7-4.18a15.85,15.85,0,0,0,4.22.37c12.29-.07,24.52-.25,36.67-.62h62.87c2.62-.17,5.24-.25,7.86-.26,1.32,0,2.63,0,3.95,0,8.73-.5,18.73,1.72,27.67,1.81,1.4.16,2.73.28,4.06.4a273.78,273.78,0,0,0,27.87,1.42"/>
<path class="cls-1" d="M17,30.87H39.06c1.28,0,2.61,0,3.93.06,14-.06,28-.06,41.72-.11,1.09.05,2.13.05,3.19.05h41.55C143,35.31,157,31.61,172,28.65c6-.74,12,1.48,17.68,2l3.83-.19c5.13-.28,10.29-.63,15.49-1.08,14.88-.64,29.75,1.54,44.72,1.6,2.14,0,4.28,0,6.33-.18,16.95-5.11,33.95-.68,52,.06h37.32a23.78,23.78,0,0,0,14.59,3c15-.74,30-10.35,46.26-3H511.77c1.21,0,2.41,0,3.51.08,14.72-.08,28.72-.08,43.83,1.53l3.69.24c6.15.37,12.32.69,18.52.82"/>
<path class="cls-1" d="M17,33.83H37.47c1.18,0,2.42,0,3.63.09,16.9,1.39,33.9-1.57,51-.09h37.59A53.44,53.44,0,0,0,151,36.05c13-2.22,24-5.18,36.57-2.63a20,20,0,0,0,3.79,0q5.79-.39,11.64-1c16.62-1.29,33.25.81,50,1.35a61.7,61.7,0,0,0,6.84-.07c14.19-2.76,28.19-4.24,41.71-.76a39.23,39.23,0,0,0,6.67,1H347a9.54,9.54,0,0,1,3.85.54A22.08,22.08,0,0,0,365,37.52c16-3,31-12.56,45.9-3.69H511.75c16.25.74,32.25-1.48,47.89,1.27,1.46.23,2.82.31,4.18.4,5.46.32,11,.55,16.57.55"/>
<path class="cls-1" d="M17,41.22H34c19,3,39-3,58-.06,1,.06,2.1.06,3.15.06h30.57c1.35.09,2.71.16,4.06.22s2.7.12,4,.17C147,44.18,159,41.22,172,39.74c3.33,0,6.22-.33,9.24-.14.76,0,1.52.13,2.3.25,11.46,1.37,22.46-.85,33-.41,1.17,0,2.28,0,3.4.05,3.35,0,6.7.11,10.07.25,8.33,0,16.67,1,25.09,1.37a31,31,0,0,0,4-.16c16.9-3.43,33.9-2.69,50.64.19,1.92.08,4.14.08,6.37.08h33.28a6.26,6.26,0,0,1,2.37.39C368,47.87,383,37.52,399,38.26c3,.74,7,.74,9.9,2.9,1.4.06,2.81.06,4.22.06h93.49a19.72,19.72,0,0,1,2.83.25c17.56,3.45,34.56-3.95,52.7.13a32.32,32.32,0,0,0,4.05.41c3.93.12,7.87.23,11.81.29"/>
<path class="cls-1" d="M17,51.57H30.91c1,0,2,0,3.13.07,19,4.36,39-4.51,58-.37a22.1,22.1,0,0,0,3.14.3h30.61c5.7.49,11.34.74,16.93.81l4.19,0c8.07.65,17.07-.83,25-1,1.24,0,2.59-.06,3.9,0,17.12.2,33.12-4.24,50.09-2.8,1.13.12,2.23.2,3.33.3,8.26.75,16.59,2.12,25.47,2.55,1.71.09,2.86.26,4.25.35a137.6,137.6,0,0,0,47,.12,52.69,52.69,0,0,1,5.67-.32H354a15.64,15.64,0,0,1,2.5.14c2.54,1.34,5.54.6,8.54,1.34,13,1.48,25-6.66,38.13-1.68a8.8,8.8,0,0,0,2.11.2h97.41a32.22,32.22,0,0,1,3.55.13c10.5,2.69,20.69.81,31-.62,2.06-.28,4.13-.58,6.2-.79,3.6-.2,8.6-.2,12.6-.2a27.91,27.91,0,0,0,5,.46,13.52,13.52,0,0,1,5.09,1h3.34l6.59,0"/>
<path class="cls-1" d="M17,56H34c3,1.47,7,.73,11,1.47C61,59,76,51.57,92.1,55.73a20,20,0,0,0,3.1.27h30.6c13.93,0,27.7,1.87,41.45.47,1.25-.13,2.5-.28,3.75-.47,19,0,38-5.17,56.55-2.38,1.4.17,2.76.24,4.1.3q11.79.53,23.72,1.62a31.4,31.4,0,0,1,4,.75C277,61.92,295,57.48,314.12,56h44.51a25.72,25.72,0,0,1,3.39.28c13,1.2,25-1.75,37.67-.32,1.11,0,2.28,0,3.46,0H504.26a20,20,0,0,1,2.67.14,58.89,58.89,0,0,0,13.79,1c2.26-.08,4.52-.25,6.77-.48,12.51-2.87,26.51-3.61,40-.66H576"/>
<path class="cls-1" d="M17,60.44H34C50,62.66,65,59,81,59.7c3,0,8-.74,11.11.58a24.12,24.12,0,0,0,3.09.16h30.58c14.13.69,28.14.37,42.11-.21,1.39-.06,2.79-.12,4.17-.06,4.94.27,10.94,1,15.94.27,15-2.22,28-3.7,42.65-2.12l4.2.11c6.3.21,12.61.61,19,1.27a59.86,59.86,0,0,1,6,.91c14.16,2.79,28.16,4.26,42.39.67a41.55,41.55,0,0,1,7-.84h55.47c1,0,2,0,3.11,0,8.21,0,16.21,0,23.87-.11.87.05,1.79.07,2.77.07H506.29a19,19,0,0,1,2.56.23,64.58,64.58,0,0,0,7.06.57c2.35.06,4.7,0,7-.1,14-2.18,28-6.61,41.77-1.4a17.24,17.24,0,0,0,3.61.7H576"/>
<path class="cls-1" d="M17,69.31H34c1.1,0,2.24,0,3.44,0C55,71.53,74,67.09,92.07,69.31h33.66c14.09.74,28,.49,41.94,0,1.39,0,2.77-.1,4.18-.06C191,70.79,210,64.87,230.17,67.79c1.38.15,2.78.2,4.17.26,5.59.24,11.19.63,16.8,1.22,1.49,0,3,0,4.48,0h4.52a241.84,241.84,0,0,0,46.29,0H419c30,0,60-2.22,91,1.48,1.36.1,2.71.18,4.15.33a42.05,42.05,0,0,0,5.53.59,18.7,18.7,0,0,0,4.43-.43C540,62.66,558,66.35,576,69.31"/>
<path class="cls-1" d="M17,78.18H135.94c11.09,0,22.09-.14,33-.29l4.1-.06C191,78.92,208,76,226.36,77.56c1.3.15,2.67.17,4,.21q6.15.15,12.34.39c2.92,0,5.84,0,8.78,0h26.79c42.59.63,85.41-2,128.5-.89q5.38.13,10.81.35C440,79.66,460,73,482,75.22c12.27,1.51,24.55,2.41,36.85,2.89,1.37,0,2.25.09,3.34.15q26.71-.12,53.92-.08"/>
<path class="cls-1" d="M17,82.61H51.15l24.31,0h70.82c9.14.24,18.31.18,27.48,0,1.32,0,2.63,0,4,0,16.26.73,31.26-2.22,47.17-.34l3.93.14,3.92.18h27.38c45.39,1.21,90.86-2.47,136.58-1.52q5.28.12,10.56.31C424,82.61,441,81.14,458,79.66c16.8-1.55,33.11-.57,49.62.92l7.08.66c20.3,5.07,41.3,4.33,61.38,1.39"/>
<path class="cls-1" d="M17,88.51C37,88.53,57,84.09,78,85.57a218.38,218.38,0,0,0,31,2.22c13.67.74,27.44.82,41.27.68,3.45,0,6.91-.08,10.39-.13,6.67-.41,13.2-.61,19.68-.69,1.3,0,2.6,0,4,0,11.7.12,22.7.12,34.67.36l3.91.06c3.44.11,6.88.25,10.31.44h8.94c48.87.74,96.87-3.7,145.87-3,2.67,0,5.33.1,8,.27s5.34.4,8,.66c10,1.29,20,2,30,.55,29.14-4.44,56.82-3.44,85.54-.27a31.49,31.49,0,0,1,6.08,1.38C541,95.92,560,91.49,576,88.53"/>
</svg>
</section>
</div>
$glow: hsla(340, 100%, 10%, .6);
$glow: hsla(28, 100%, 45%, .6);
$glow-weight: 20;
@mixin lit-segment {
stroke: $glow;
stroke-width: $glow-weight;
stroke-linecap: round;
}
.nixie {
width: 48%;
}
.nixie-fillament__segment {
fill: none;
stroke: #1d1d1b;
stroke-miterlimit: 10;
z-index: 0;
}
.nixie-jar path,
.nixie-jar rect,
.board path,
.board rect {
fill: none;
stroke: #bdbdbb;
stroke-miterlimit: 10;
}
.board {
width: 1000px;
}
.board path,
.board rect {
stroke-width: 0.5;
}
.board rect {
fill: white;
}
.base {
display: none;
margin-top: -29px;
}
@for $i from 0 through 9 {
.nixie--state__#{$i} {
& .state__#{$i} {
@include lit-segment;
}
}
}
.gap {
display: none;
}
.wrapper {
width: 100vw;
height: 100vh;
max-width: 100%;
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
}
@media (min-width: 680px) {
.nixie {
width: 18%;
}
.gap {
display: inline-block;
min-width: 60px;
}
}
@media (min-width: 1080px) {
.nixie {
width: 200px;
}
.base {
display: block;
}
.gap {
display: inline-block;
min-width: 60px;
}
}