JSFiddle - React, Tailwind, and code Playground

by Felype Rennan

HTML

<div class="overlay">
<canvas id="splash" class="backie" width=1280 height=800>

</canvas>
<logo-box>
Loading...
</logo-box>
<powered-by>
  powered by Figlotech<sup>&reg;</sup>
</powered-by>
</div>
<img width=1280 height=720  src="http://cdn.wccftech.com/wp-content/uploads/2015/07/trialsfusionawesomelevelmaxcat.jpg" />

SCSS

.overlay {
  transition: 1500ms ease-out;
  opacity: 0.99;
  &.dead {
    opacity: 0;
  }
  position: fixed;
  width: 100vw;
  height: 100vh;
}

.backie {
  position: fixed;
  opacity: .97;
  background: #f9f9f9;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

logo-box {
  top: 40vh;
  bottom: 40vh;
  left: 30vw;
  right: 30vw;
  font-size: 6vh;
  line-height: 20vh;
  text-align: center;
  display: block;
  font-family: "Verdana", sans-serif;
  position: absolute;
  opacity: 0.5;
  user-select: none;
  sup {
    font-size: 0.4em;
  }
}

powered-by {
  font-family: "Gill Sans", sans-serif;
  z-index: 4;
  position: fixed;
  display: block;
  padding: 0;
  right: 10px;
  bottom: 10px;
  opacity: 0.5;
  transition: 1500ms ease-out;
  &.dead {
    opacity: 0;
  }
}

JavaScript

var canvas = document.getElementById('splash');
var isLoaded = false;
setTimeout(function() {
	// Simular Loading
	isLoaded = true;
}, 12000);

function resizeCanvas() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
}
resizeCanvas();

        
if (canvas.getContext) {
  var ctx = canvas.getContext('2d');
  var rot = 0;
  var intv = setInterval(function() {
    var x = $("#splash").width()/2;
    var y = $("#splash").height()/2;
    for(var i = 0; i < 4; i++) {
    	ctx.save();
    	var sz = 2+Math.random()*10;
      
      if(Math.random() * 100 > 50) {
      	ctx.strokeStyle = ctx.fillStyle = "rgba(15,169,169, 0.4)";
      } else {
      	ctx.strokeStyle = ctx.fillStyle = "rgba(0,0,0, 0.2)";
      }
      
      // x -= 60;
      // x += Math.random()*120;
      // y -= 60;
      // y += Math.random()*120;
      
      var dx = Math.random() * $("#splash").width();
      var dy = Math.random() * $("#splash").height();
      // x = dx-80;
      // x += Math.random()*160;
      // y = dy-80;
      // y += Math.random()*160;
      // ctx.beginPath();
      // ctx.moveTo(x, y);
      if(Math.random()*100 > 99) {
      	rot = Math.random()*90;
      }
      if(Math.random()*100 > 99) {
      	rot = 0;
      }
      ctx.translate(dx-10, dy-10);
      ctx.rotate((rot % 90) * Math.PI/180);
      if(Math.random()*100 > 95) {
        // ctx.lineTo(dx, dy);
        ctx.fillRect(0,0, 20, 20);
      } else {
      	ctx.strokeRect(0, 0, 20, 20);
      }
      ctx.stroke();
      
      ctx.restore();
    }
		
    ctx.fillStyle = "rgba(253,253,253, 0.05)";
    if(Math.random() * 100 > 30) {
    	ctx.fillStyle = "rgba(253,253,253, 0.15)";
    }
    ctx.fillRect (0, 0, $('#splash').width(), $('#splash').height());
    
  	if(isLoaded) {
			$(".overlay").addClass("dead");
      setTimeout(function(){
      	clearInterval(intv);
        $(".overlay").remove();
      }, 1500);
    }
  }, 60);
} else {
	$(".backie").addClass("dead");
}