Random typing on old CRT

Built with blockbuilder.org

forked from nyem69's block: Random typing ...

forked from nyem69's block: Random typing 2

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v3.min.js"></script>
  <style>

body {
	background:#000;
	color: #0f0;
  padding:24px;
  font-size:120%;
}

blink, .blink {
 -webkit-animation: blink 500ms step-end infinite;
 -moz-animation: blink 500ms step-end infinite;
 -o-animation: blink 500ms step-end infinite;
 animation: blink 500ms step-end infinite;
}

@-webkit-keyframes blink {
 67% { opacity: 0 }
}

@-moz-keyframes blink {
 67% { opacity: 0 }
}

@-o-keyframes blink {
 67% { opacity: 0 }
}

@keyframes blink {
 67% { opacity: 0 }
}

@keyframes flicker {
	0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% {
		opacity: .99;
		text-shadow: -1px -1px 0 $outline, 1px -1px 0 $outline, -1px 1px 0 $outline, 1px 1px 0 $outline, 0 -2px 8px, 0 0 2px, 0 0 5px #ff7e00, 0 0 15px #ff4444, 0 0 2px #ff7e00, 0 2px 3px #000;
	}
	20%, 21.999%, 63%, 63.999%, 65%, 69.999% {
		opacity: 0.4;
		text-shadow: none;
	}
}
    
    
  </style>
</head>

var vowels = 'aeiou',
		letters = 'bcdfghjklmnprstw',
		caps = letters.toUpperCase().split(''),
		lows = letters.split(''),
		vlows = vowels.split('')
		vcaps = vowels.toUpperCase().split(''),
		punc = ',.'.split(''),
		text=[],
		r=0;

var para =[],
			ttl =0;

text.forEach(function(t)	{
		var p = {
			key: r++,
			values:[]
		};

t.forEach(function(d,i)	{
			var dur = Math.floor( d.length * 50 );

p.values.push({
				key: r++,
				values: d,
				delay: ttl + 600,
				duration: dur
			});

ttl += dur + 600;

});

para.push(p);
	});

// console.log('para', JSON.stringify(para,null,2));

var key = function(d){ return d.key };

var p = d3.select('body').selectAll('p').data(para, key);
	p.exit().remove();
	p.enter().append('p')
  	.attr('class','flicker 1s linear infinite');

s.select('tt')
		.html('')
		.transition()
			.delay(function(d,i){ return d.delay })
			.duration(function(d){ return d.duration; })
			.ease('cubic')
			.tween("html", function(d) {
			  var i = d3.interpolateRound(this.textContent.length, d.values.length);
			  return function(t) {this.textContent = d.values.slice(0, i(t)) };
			});

s.select('.blink')
		.html(' &nbsp; ')
			.transition().delay(function(d){ return d.delay })
				.style('opacity',1).duration(10)
				.transition()
					.delay(function(d){ return d.duration + d.delay })
					.duration(600)
						.style('opacity',0)
						.remove();

window.setTimeout(typewriting, ttl+1000);

}

typewriting();

</script>
</body>

https://d3js.org/d3.v3.min.js