JSFiddle - React, Tailwind, and code Playground

by taylorbuley

HTML

<div id='container'>
    <div id='logo'></div>
</div>

CSS

body {
   background:#000;
}
#container {
    height:100%;
    width:100%;
}
#logo {
  background:transparent;
    margin:20px;
}
#logo > canvas {
  background:transparent;
}
#logo > canvas:nth-child(1){
    z-index:1;
    position:absolute;
}
#logo > canvas:nth-child(2){
    margin-left:17px;
    z-index:2;
    position:absolute;
}
#logo > canvas:nth-child(3){
    margin-left:34px;
    z-index:3;
    position:absolute;
}

#logo.reverse > canvas:nth-child(1){
    z-index:3;
}
#logo.reverse > canvas:nth-child(2){
    z-index:2;
}
#logo.reverse > canvas:nth-child(3){
    z-index:1;
}

JavaScript

var StormPlayer = {};

StormPlayer.logo = function(el, x, y) {
    this.height = 37;
    this.width = 17;
    this.xshift = 170;
    this.yshift = 0;
    this.zshift = 10;
    this.count = 3;
    this.rotation = 90;
    this.perspective = 0;
    this.colors = [ [ '#000', '#555' ], [ 'rgb(5, 52, 77)', 'rgb(31, 139, 194)'], ['#ddd','#fff'] ];
    this.el = el;
    this.last = new Date().getTime();
    x = ( !! x) ? x : 0, y = ( !! y) ? y : 0;
    this.tr = [x + this.width, y], this.tl = [x, y], this.br = [x + this.width, y + this.height], this.bl = [x, y + this.height];
    this.run();

};

StormPlayer.logo.prototype.draw = function() {
    var el = this.el;
    el.innerHTML = '';
    for (var counter = 0; counter < this.count; counter += 1) {
        var canvas = document.createElement('canvas');
        canvas.setAttribute('width', this.width);
        canvas.setAttribute('height', this.height);
        var ctx = canvas.getContext('2d');
        ctx.lineJoin = 'round';
        ctx.beginPath();
var lineargradient = ctx.createLinearGradient(0,0,50,50);  
        lineargradient.addColorStop(0, '#ddd');
        lineargradient.addColorStop(.1,  this.colors[counter][1]);
        lineargradient.addColorStop(.3,  this.colors[counter][1]);
        lineargradient.addColorStop(.9, this.colors[counter][0]);
        lineargradient.addColorStop(1, '#000');
        ctx.fillStyle = lineargradient;
        ctx.strokeStyle = lineargradient;

        var Actl1xoffset = 1,
            Actl1yoffset = 1;
        var Actl2xoffset = 1,
            Actl2yoffset = 1;

        var Acontrol1x = this.tl[0] + Actl1xoffset,
            Acontrol1y = this.tl[1] + Actl1yoffset,
            Acontrol2x = this.tl[0] + Actl2xoffset,
            Acontrol2y = this.tl[1] + Actl2yoffset,
            Apointx = this.bl[0],
            Apointy = this.bl[1];

        var Bctl1xoffset = -1,
            Bctl1yoffset = -1;
        var Bctl2xoffset = -1,
            Bctl2yoffset = -1;

        var Bcontrol1x =...