sineausr931/digital-rain.css

## digital-rain.css
body {
  background-color: black !important;
}

## digital-rain.html
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="digital-rain.css">
  </head>
  <body>
    <div>
      <div style="margin:auto; width:100%; position: fixed; padding-top:0px">
        <canvas id="c"></canvas>
      </div>
      <script src="digital-rain.js"></script>
    </div>
  </body>
</html>

## digital-rain.js
var c = document.getElementById("c");
var ctx = c.getContext("2d");

//const letters = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ123456789@#$%^&*()*&^%+-/~{[|`]}";
const letters = "अआइउकखगजटडणतथदनपफबमयरलवशषसह।१२३४५६७८९あいうおきくこさしすずそたってでとなにのはばめもらりるれをん三上不与世个中为举乐买予事产京人他付代以件份会伝传伪低住体作使例依侵便俗俱党入八公六共关其兼准出分利别办加动北十华卡厳参反发取受古史司同告员味和响国在境处多大夫央如始委娱嫌宋宗定实実审宣宴家宿密察对将小尔履山工巨市帝常年并开当影律得徽念性惑意成戴房所批抗报拥持据描支收政故数星昧是時曖更有期未末机权条来東果查标核案梁检概横款正歴民水求江沢治沼泊法活流消涉渡滸物特犯生用由界異的皇益监盗相矩研确神移究立等籍精系级纪组织经结给缴罪義职股背自良获葉行被规言記語説议证诉请调谋負賊财责购费起超趣身転边违述追送通造部配酬長问际除随集非项题额高";

//var colors = ["#5AA509"] // matrix green
//var colors = ["purple"]
var colors = ["red","green","blue","yellow","orange"]
var font_size = 14;
var chance_of_redrop = 0.025;
var fade_alpha = 0.04;
var refresh_interval = 30;

var columns = 0;
var drops = [];
var last_height = 0;
var last_width = 0;

function draw() {

    var curr_height = "innerHeight" in window ? window.innerHeight : document.documentElement.offsetHeight;
    var curr_width = "innerWidth" in window ? window.innerWidth : document.documentElement.offsetWidth;

    if (curr_height != last_height || curr_width != last_width) {

        // Re-compute canvas dimensions after window is resized, or on first call.
        c.height = curr_height;
        c.width = curr_width;
        last_height = curr_height;
        last_width = curr_width;

        columns = c.width / font_size;
        drops = [];

        for (var x = 0; x < columns; x++) drops[x] = 1;
    }

    // Fade to black by applying alpha on each call.
    ctx.fillStyle = "rgba(0, 0, 0, " + fade_alpha + ")";
    ctx.fillRect(0, 0, c.width, c.height);

    // Pick next color.
    ctx.fillStyle = colors[Math.floor(Math.random() * colors.length)]
    ctx.font = font_size + "px arial";

    for (var i = 0; i < drops.length; i++) {
       if (drops[i] * font_size <= c.height) {
          var text = letters[Math.floor(Math.random() * letters.length)];
          ctx.fillText(text, i * font_size, drops[i] * font_size);
          drops[i]++;
       }
       else if (Math.random() < chance_of_redrop) {
         // After the first cascade, rain drops will begin to stagger.
         drops[i] = 0;
       }
    }
}

setInterval(draw, refresh_interval);

## index.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>GistRun</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.0.1/styles/atom-one-dark.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.0.0/highlight.min.js"></script>
</head>
<body>

<div style="padding:0.5em; margin:1em 0em">
  <iframe style="width:100%" src="digital-rain.html" title="Digital Rain"></iframe>
</div>

<iframe style="width:100%" src="https://withacola.ilikepizza.tk/" title="Pizza Rain"></iframe>

<script>
function getDaCode() {
  var xhr = new XMLHttpRequest();
  xhr.open("GET", "digital-rain.js", true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 3) {
      if (xhr.status === 200) {
        var customTheme = document.getElementById('source_code');
        customTheme.innerHTML = xhr.responseText;

        // Call this after each code block has finished loading to
        // ensure highlighting is applied.
        hljs.highlightAll();
      }
    }
  }
  xhr.send();
}
</script>
<script>getDaCode();</script>

<pre><code class="language-javascript" id="source_code"></code></pre>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<link rel="stylesheet" href="digital-rain.css">
	</head>
	<body>
	<div>
	<div style="margin:auto; width:100%; position: fixed; padding-top:0px">
	<canvas id="c"></canvas>
	</div>
	<script src="digital-rain.js"></script>
	</div>
	</body>
	</html>
	var c = document.getElementById("c");
	var ctx = c.getContext("2d");

	//const letters = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ123456789@#$%^&()&^%+-/~{[\|`]}";
	const letters = "अआइउकखगजटडणतथदनपफबमयरलवशषसह।१२३४५६७८९あいうおきくこさしすずそたってでとなにのはばめもらりるれをん三上不与世个中为举乐买予事产京人他付代以件份会伝传伪低住体作使例依侵便俗俱党入八公六共关其兼准出分利别办加动北十华卡厳参反发取受古史司同告员味和响国在境处多大夫央如始委娱嫌宋宗定实実审宣宴家宿密察对将小尔履山工巨市帝常年并开当影律得徽念性惑意成戴房所批抗报拥持据描支收政故数星昧是時曖更有期未末机权条来東果查标核案梁检概横款正歴民水求江沢治沼泊法活流消涉渡滸物特犯生用由界異的皇益监盗相矩研确神移究立等籍精系级纪组织经结给缴罪義职股背自良获葉行被规言記語説议证诉请调谋負賊财责购费起超趣身転边违述追送通造部配酬長问际除随集非项题额高";

	//var colors = ["#5AA509"] // matrix green
	//var colors = ["purple"]
	var colors = ["red","green","blue","yellow","orange"]
	var font_size = 14;
	var chance_of_redrop = 0.025;
	var fade_alpha = 0.04;
	var refresh_interval = 30;

	var columns = 0;
	var drops = [];
	var last_height = 0;
	var last_width = 0;

	function draw() {

	var curr_height = "innerHeight" in window ? window.innerHeight : document.documentElement.offsetHeight;
	var curr_width = "innerWidth" in window ? window.innerWidth : document.documentElement.offsetWidth;

	if (curr_height != last_height \|\| curr_width != last_width) {

	// Re-compute canvas dimensions after window is resized, or on first call.
	c.height = curr_height;
	c.width = curr_width;
	last_height = curr_height;
	last_width = curr_width;

	columns = c.width / font_size;
	drops = [];

	for (var x = 0; x < columns; x++) drops[x] = 1;
	}

	// Fade to black by applying alpha on each call.
	ctx.fillStyle = "rgba(0, 0, 0, " + fade_alpha + ")";
	ctx.fillRect(0, 0, c.width, c.height);

	// Pick next color.
	ctx.fillStyle = colors[Math.floor(Math.random() * colors.length)]
	ctx.font = font_size + "px arial";

	for (var i = 0; i < drops.length; i++) {
	if (drops[i] * font_size <= c.height) {
	var text = letters[Math.floor(Math.random() * letters.length)];
	ctx.fillText(text, i * font_size, drops[i] * font_size);
	drops[i]++;
	}
	else if (Math.random() < chance_of_redrop) {
	// After the first cascade, rain drops will begin to stagger.
	drops[i] = 0;
	}
	}
	}

	setInterval(draw, refresh_interval);
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>GistRun</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.0.1/styles/atom-one-dark.min.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.0.0/highlight.min.js"></script>
	</head>
	<body>

	<div style="padding:0.5em; margin:1em 0em">
	<iframe style="width:100%" src="digital-rain.html" title="Digital Rain"></iframe>
	</div>

	<iframe style="width:100%" src="https://withacola.ilikepizza.tk/" title="Pizza Rain"></iframe>

	<script>
	function getDaCode() {
	var xhr = new XMLHttpRequest();
	xhr.open("GET", "digital-rain.js", true);
	xhr.onreadystatechange = function() {
	if (xhr.readyState === 3) {
	if (xhr.status === 200) {
	var customTheme = document.getElementById('source_code');
	customTheme.innerHTML = xhr.responseText;

	// Call this after each code block has finished loading to
	// ensure highlighting is applied.
	hljs.highlightAll();
	}
	}
	}
	xhr.send();
	}
	</script>
	<script>getDaCode();</script>

	<pre><code class="language-javascript" id="source_code"></code></pre>

	</body>
	</html>