fonts/index.html at main · syswalker/fonts · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<html>
  <head>
	<style>
		* {margin: 0; padding: 0;}
		body {background: black;}
		canvas {display: block;}
	</style>
    <script>
		setTimeout(function(){
		var c = document.getElementById("c");
		var ctx = c.getContext("2d");

		c.height = window.innerHeight;
		c.width = window.innerWidth;

		var chars = "▀▖▗▘▙▚▛▜▝▞▟";
		chars = chars.split("");

		var font_size = 12;
		var columns = c.width/font_size;
		var drops = [];
		for(var x = 0; x < columns; x++)
			drops[x] = 1;

		function draw()
			{
				ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
				ctx.fillRect(0, 0, c.width, c.height);
				ctx.fillStyle = "#13a500";
				ctx.font = font_size + "px arial";
				for(var i = 0; i < drops.length; i++)
					{
						var text = chars[Math.floor(Math.random()*chars.length)];
						ctx.fillText(text, i*font_size, drops[i]*font_size);
						if(drops[i]*font_size > c.height && Math.random() > 0.975)
							drops[i] = 0;
						drops[i]++;
					}
			}
		setInterval(draw, 40);}, 150);
	</script>
  </head>
  <body>
    <canvas id="c"></canvas>
  </body>
</html>