JSFiddle - React, Tailwind, and code Playground

by philippkuehn

HTML

<div class="wrapper">
    <div class="wrapper-inner">
        
        <div class="logo"></div>
        
    </div>
</div>

CSS

* {
    margin: 0px;
    padding: 0px;
    border: none;
    -webkit-box-sizing : border-box;
    -moz-box-sizing : border-box;
    box-sizing : border-box;
    -webkit-text-size-adjust: none;
    outline: none;
    }

html, body {
    width: 100%;
    height: 100%;  
}

body {
    background: url('http://www.philipp-kuehn.com/wp-content/themes/philippkuehn/img/bg.jpg') no-repeat center center #222;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;   
}

.wrapper {
    width: 100%;
    height: 100%;
    display: table;
}

.wrapper-inner {
    width: 100%;
    height: 100%;
    display: table-cell;
    vertical-align: middle;
}

.logo {
    width: 200px;
    height: 200px;
    margin: 0px auto;
    position: relative;
}

.logo > div {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
}

canvas {
    position: absolute;
}

/* Part 1 */

div.p1, div.p1 canvas {
    right: 0;
    top: 0;
}

@-webkit-keyframes fade1 {
    0% {
        opacity: 0;
        width: 0%;
        right: -20%;
    }
    15% {
        opacity: 1;
        width: 100%;
        right: 0%;
    }
}
@-moz-keyframes fade1 {
    0% {
        opacity: 0;
        width: 0%;
        right: -20%;
    }
    15% {
        opacity: 1;
        width: 100%;
        right: 0%;
    }
}
@keyframes fade1 {
    0% {
        opacity: 0;
        width: 0%;
        right: -20%;
    }
    15% {
        opacity: 1;
        width: 100%;
        right: 0%;
    }
}

div.p1 {
    -webkit-animation: fade1 5s infinite ease-out;
    -woz-animation: fade1 5s infinite ease-out;
    animation: fade1 5s infinite ease-out;
}

/* Part 2 */

div.p2, div.p2 canvas {
    left: 0;
    top: 0;
}

@-webkit-keyframes fade2 {
    0% {
        opacity: 0;
        height: 0%;
        top: -20%;
    }
    15% {
        opacity: 1;
        height: 100%;
        top: 0%;
    }
}
@-moz-keyframes fade2 {
    0% {
        opacity: 0;
        height: 0%;
        top:...

JavaScript

jQuery(document).ready(function($) {
    
    var $logo = $('.logo'),
        width = $logo.width();
        height = $logo.height();
    
    $('<canvas/>')
        .appendTo($logo)
        .attr('width', width)
        .attr('height', height)
        .wrap('<div class="p1" />');
    
    $('<canvas/>')
        .appendTo($logo)
        .attr('width', width)
        .attr('height', height)
        .wrap('<div class="p2" />');
    
    $('<canvas/>')
        .appendTo($logo)
        .attr('width', width)
        .attr('height', height)
        .wrap('<div class="p3" />');
    
    $('<canvas/>')
        .appendTo($logo)
        .attr('width', width)
        .attr('height', height)
        .wrap('<div class="p4" />');

    var context1 = $('.p1 canvas')[0].getContext('2d'),
        context2 = $('.p2 canvas')[0].getContext('2d'),
        context3 = $('.p3 canvas')[0].getContext('2d'),
        context4 = $('.p4 canvas')[0].getContext('2d');
    
    function w(val) {
        var percent = (100 / 84) * val;
        return (width / 100) * percent;  
    }
    
    function h(val) {
        var percent = (100 / 84) * val;
        return (height / 100) * percent; 
    }
    
    // Part 1
    context1.fillStyle = 'rgba(255, 255, 255, .4)';
    context1.beginPath();
    context1.lineTo(w(80), h(84));
    context1.lineTo(w(0), h(59));
    context1.lineTo(w(20), h(42));
    context1.closePath();
    context1.fill();
    
    // Part 2
    context2.fillStyle = 'rgba(255, 255, 255, .9)';
    context2.beginPath();
    context2.lineTo(w(0), h(25));
    context2.lineTo(w(30), h(0));
    context2.lineTo(w(30), h(34));
    context2.lineTo(w(0), h(59));
    context2.closePath();
    context2.fill();
    
    // Part 3
    context3.fillStyle = 'rgba(255, 255, 255, .6)';
    context3.beginPath();
    context3.lineTo(w(30), h(0));
    context3.lineTo(w(50), h(17));
    context3.lineTo(w(50), h(34));
    context3.lineTo(w(30), h(50));
    context3.closePath();
    context3.fill();
   ...