Binary Background

Binary-Background.markdown

Binary Background

Random 1's and 0's as a background - randomly changing over time. Could be used as a loader I suppose...

A Pen by mattfinch on CodePen.

License.

index.html

<p class="bin"><p>

script.js

$(document).ready(function(){
  generateBinary();
	setInterval('updateBinary()', 0);
});

function generateBinary(){
  str = "";
  for ( var i = 0; i < 3500; i++ ) {
    str = str + Math.round(Math.random());
  }
  $(".bin").html(str);
}

function updateBinary() {
  str = $(".bin").html();
  n = str.length;
  r = Math.floor(Math.random() * n + 1)
  $(".bin").html(str.substring(0, r) + Math.round(Math.random()) + str.substring(r + 1));
}

style.css

body {
  background: rgba(0,0,0,0.8);
  margin-top: 5%;
}
.bin {
  font-size:1.25em;
  width: 800px;
	height: 500px;
	border-radius: 10px;
	background: rgb(74,106,138);
	color: rgba(255,255,255,0.2);
	margin: 0 auto;
	font-family: monospace;
	word-wrap: break-word;
 	line-height: 0.8em;
	overflow: hidden;
}