Flickering ANSI logo

Flickering-ANSI-logo.markdown

Flickering ANSI logo

A Pen by Moses Holmström on CodePen.

License.

index.html

<div class="content">
  <div class="modal">
    <div id="logo" class="big ansi box"></div>
  </div>
</div>

script.js

var ansimations={r:[["    ","┌──┐","├─┬┘","· └─"],["    ","┌──┐","·─┬┘","  └─"],["    "," ·─┐"," ·┬┘","  └─"],["    ","  ·┐","  ┬┘","  └─"],["    ","   ·","  ┌┘","  └─"],["    ","    ","  ┌·","  └─"],["    ","    ","  · ","  └─"],["    ","    ","    ","  ·─"],["    ","    ","    ","    "],["    ","    ","    ","    "]],o:[["    ","┌──┐","│  │","└──┘"],["    ","┌─·┐","│  │","└──┘"],["    ","·  ┐","│  │","└──┘"],["    ","   ┐","   │","·──┘"],["    ","   ┐","   │","  ·┘"],["    ","   ┐","   │","   ·"],["    ","   ┐","   ·","    "],["    ","   ·","    ","    "],["    ","    ","    ","    "],["    ","    ","    ","    "]],i:[["·","┐","│","└"],["■","┐","│","└"],[" ","┐","│","└"],[" ","·","│","└"],[" "," ","·","└"],[" "," "," ","·"],[" "," "," "," "],[" "," "," "," "],[" "," "," "," "],[" "," "," "," "]],d:[["   ╖","╔══╣","║  ║","╚══╝"],["   ┐","╔══╡","║  ║","╚══╝"],["   ┐","╔══╡","║  │","╚══╛"],["   ·","╔══╡","║  │","╙──┘"],["    ","┌══·","│  │","└──┘"],["    ","┌─═ ","│  ·","└──┘"],["    ","┌── ","│   ","└─· "],["    ","┌── ","│   ","·   "],["    ","·── ","    ","    "],["    ","  · ","    ","    "]],u:[["    ","╖  ╖","║  ║","╚══╝"],["    ","╖  ┐","║  │","╚══╝"],["    ","╖  ┐","║  │","╚═─┘"],["    ","╖  ·","║  │","└──┘"],["    ","╖   ","│  ·","└──┘"],["    ","┐   ","│   ","└──·"],["    ","┐   ","│   ","└·  "],["    ","┐   ","·   ","    "],["    ","·   ","    ","    "],["    ","    ","    ","    "]]};
document.addEventListener('DOMContentLoaded', function(){
  var a = new Animation(ansimations, document.querySelector("#logo"));
  a.init();
  a.animate();
  a.element.classList.remove("big");
  document.addEventListener("mousedown", function(evt) {
    document.querySelector("html").classList.toggle("night");
    evt.preventDefault();
    //a.animate();
    return false;
  });
});


function Animation (ansiData, element) {
  var that = this;
  this.animations = ansiData;
  this.letters = "roidu";
  this.height = 4;
  this.element = element;
  this.speed = 15;
  this.jitter = 2;
  this.updateRate = 50;
  this.init = function () {
    that.time = 0;
  }
  this.timeToFrame = function (time) {
    var derp = (Math.cos(that.time / that.speed) / 2 + 0.5) * 10 - Math.floor(Math.random()*that.jitter) >> 0;
    var derp = Math.max(Math.min(derp, 9),0);
    //if(derp == 0) { that.stop = true; }
    return derp;
  }
  this.compose = function (time) {
    var output = "";
    for(var i = 0, imax = that.height; i < imax; i++) {
      var line = "";
      for(var l = 0, lmax = that.letters.length; l < lmax; l++) {
        line += that.getLineInLetterAtFrame(i, that.letters[l], that.timeToFrame(time));
      }
      output += line + "\n";
    }
    return output;
  }
  this.getLineInLetterAtFrame = function (line, letter, frame) {
    return that.animations[letter][frame][line];
  };
  this.animate = function () {
    that.element.innerHTML = that.compose(that.time);
    if(!that.stop) setTimeout(that.animate, that.updateRate);
    that.time++;
  };
  return this;
}

style.scss

html, body {
  margin: 0; padding: 0;
}
html {
  background: #FFF;
  color: #111;
  font-size: 16px;
  line-height: 1.15em;
  overflow-x: hidden;
}
html.night {
  background: #000;
  color: #FFF;
}
body {
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}
.content {
  align-items: stretch;
  box-sizing: border-box;
  display: flex;
  flex-flow: row nowrap;
  height: 100%;
  justify-content: space-around;
  margin: 0 auto;
  max-width: 100%;
  position: relative;
  border: 1rem solid #EEE;
}
.night .content {
  border: 1rem solid #08060A;
}
.modal {
  align-items: center;
  display: flex;
  flex-flow: column wrap;
  justify-content: space-around;
}
.box {
  display: inline-block;
  min-height: 4rem;
  position: relative;
  
  max-width: 100%;
  min-width: 9rem;
  padding: 0 1rem;
}
.ansi {
  border-radius: 0.3em;
  box-sizing: border-box;
  color: rgba(53, 182, 201,1);
  cursor: default;
  font-family: "Consolas", monospace;
  font-size: 8vmin;
  letter-spacing: 0;
  line-height: 9.3333vmin;
  text-align: left;
  transition: color 2.5s ease-out, font-size 2.5s ease-out, letter-spacing 2.5s ease-out, line-height 2.5s ease-in;
  white-space: pre;
}
.night .ansi {
  color: #FFF;
  background-color: rgb(53,182,201);
}
.ansi.big {
  color: rgba(53, 182, 201,0);
  font-size: 30vw;
  letter-spacing: -0.5em;
  line-height: 0;
}
.night .ansi.big {
  color: #FFF;
}