Nixie Tubes inspired by Steins;Gate. El Psy Congroo.
Best viewed in Chrome
A Pen by Kent Nguyen on CodePen.
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet"> | |
<!-- best viewed in Chrome --> | |
<div class="nixie-container"></div> |
Nixie Tubes inspired by Steins;Gate. El Psy Congroo.
Best viewed in Chrome
A Pen by Kent Nguyen on CodePen.
var MAX_DIGITS = 6; | |
setInterval(function () { | |
var html = ''; | |
var time = (new Date()).getTime() % 4500; | |
var digit, i, number; | |
if (time < 1900 && time > 700) { | |
$('.nixie-container').html(''); | |
for (i = 0; i < MAX_DIGITS; i++) { | |
number = Math.floor(Math.random() * 10); | |
digit = new Digit(number); | |
html += digit.render(); | |
} | |
$('.nixie-container').html(html); | |
// randomise brightness when shuffling | |
$('.nixie-container .digit.active').css('opacity', Math.random() - 0.2); | |
} else if (time < 700) { | |
$('.nixie-container .digit.active').css('opacity', 0.02); | |
} else { | |
// full brightness when not shuffling | |
$('.nixie-container .digit.active').css('opacity', 1); | |
} | |
}, 60); | |
function Digit(number) { | |
this.number = number || 0; | |
} | |
Digit.prototype.render = function () { | |
var html = '<span class="tube">'; | |
for (let i = 0; i < 10; i++) { | |
html += '<span class="digit ' + (i === this.number ? 'active' : '') + '">' + i + '</span>'; | |
} | |
html += '</span>'; | |
return html; | |
}; |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> |
body { | |
background: #060606; | |
margin: 20px; | |
font-family: Arial; | |
} | |
.nixie-container { | |
position: relative; | |
font-family: 'Josefin Sans'; | |
font-size: 10em; | |
text-align: center; | |
letter-spacing: 0.1em; | |
.tube { | |
position: relative; | |
display: inline-block; | |
text-align: center; | |
width: 150px; | |
height: 240px; | |
margin: 6px; | |
border-top: 2px solid rgba(240, 200, 200, 0.12); | |
border-left: 2px solid rgba(240, 200, 200, 0.1); | |
border-right: 2px solid rgba(240, 200, 200, 0.1); | |
border-bottom: 12px solid rgba(30, 30, 30, 1); | |
border-radius: 60px 60px 8px 8px; | |
background-color: rgba(255, 110, 11, 0.02); | |
box-shadow: | |
inset -6px 4px 30px 2px rgba(255, 110, 11, 0.1), | |
0 -2px 32px 0 rgba(255, 169, 22, 0.06) | |
; | |
animation-duration: 4.5s; | |
animation-name: tube-glow; | |
// tube gloss | |
&::before { | |
content: ""; | |
position: absolute; | |
top: 18px; | |
right: 14px; | |
width: 46px; | |
height: 24px; | |
border-top: 10px solid rgba(255, 255, 255, 0.05); | |
border-radius: 20px; | |
transform: rotate(43deg); | |
} | |
&::after { | |
content: ""; | |
position: absolute; | |
top: 80px; | |
right: 10px; | |
width: 10px; | |
height: 150px; | |
border-right: 2px solid rgba(255, 255, 255, 0.03); | |
border-radius: 6px; | |
} | |
// off state | |
.digit { | |
position: absolute; | |
width: 170px; | |
line-height: 1.65em; | |
left: 0; | |
text-shadow: | |
rgba(50, 50, 50, 0.05) 0 0 1px, | |
; | |
//color: rgba(12, 12, 12, 1); | |
color: transparent; | |
-webkit-text-stroke-width: 3px; | |
-webkit-text-stroke-color: rgba(40, 40, 40, 0.15); | |
// on state | |
&.active { | |
color: #ffdb9e; | |
opacity: 1; | |
text-shadow: | |
#ff4d00 0 0 112px, | |
#ffa916 0 0 48px, | |
#ef9700 0 0 24px, | |
#ef9700 0 0 16px, | |
#ef9700 0 0 4px, | |
; | |
-webkit-text-stroke-width: 3px; | |
-webkit-text-stroke-color: #ff6e00; | |
} | |
} | |
} | |
} | |
@keyframes tube-glow { | |
0% { | |
box-shadow: | |
inset -3px 4px 30px 2px rgba(255, 110, 11, 0.07), | |
0 -2px 32px 0 rgba(255, 169, 22, 0.06) | |
; | |
border-top: 2px solid rgba(240, 150, 150, 0.15); | |
border-right: 2px solid rgba(240, 150, 150, 0.15); | |
} | |
30% { | |
box-shadow: | |
inset -6px 4px 30px 2px rgba(255, 110, 11, 0.1), | |
0 -2px 32px 0 rgba(255, 169, 22, 0.06) | |
; | |
} | |
55% { | |
box-shadow: | |
inset -5px 4px 30px 2px rgba(255, 110, 11, 0.08), | |
0 -2px 32px 0 rgba(255, 169, 22, 0.06) | |
; | |
} | |
70% { | |
box-shadow: | |
inset -6px 4px 30px 2px rgba(255, 110, 11, 0.09), | |
0 -2px 32px 0 rgba(255, 169, 22, 0.06) | |
; | |
} | |
78% { | |
box-shadow: | |
inset -4px 4px 30px 2px rgba(255, 110, 11, 0.02), | |
0 -2px 32px 0 rgba(255, 169, 22, 0.06) | |
; | |
border-top: 2px solid rgba(240, 150, 150, 0.12); | |
border-right: 2px solid rgba(240, 150, 150, 0.12); | |
} | |
85% { | |
box-shadow: | |
inset -2px 4px 30px 2px rgba(255, 110, 11, 0.02), | |
0 -2px 32px 0 rgba(255, 169, 22, 0.06) | |
; | |
} | |
90% { | |
box-shadow: | |
inset 0 4px 30px 2px rgba(255, 110, 11, 0.09), | |
0 -2px 32px 0 rgba(255, 169, 22, 0.06) | |
; | |
} | |
96% { | |
box-shadow: | |
inset -1px 4px 30px 2px rgba(255, 110, 11, 0.01), | |
0 -2px 32px 0 rgba(255, 169, 22, 0.06) | |
; | |
} | |
} |