JSFiddle - React, Tailwind, and code Playground

by Christian Sonne

HTML

<div class="container landing">
    <a id="logo" href="http://leapcraft.dk">leapcraft</a>
    <p>We are a <em>Digital Transformation</em> company <br>working with <em>Big Data technologies</em> and the <em>Internet of Things</em>. <br>We craft beautiful experiments and deploy systems at scale.</p>
    <canvas id="c"></canvas>
</div>
<div class="container">Bar</div>

CSS

html, body {margin: 0; padding: 0;}
canvas {
    position: fixed;
    z-index: 1 !important;
    width: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
}
canvas, .container {
    height: 100vh;
    margin: 0;
    padding: 0;
}
#logo {
    display: block;
    position: relative;
    top: 10px;
    left: 15px;
    height: 46px;
    width: 200px;
    text-indent: -9999px;
    background:...

JavaScript

if (!Array.prototype.fill) {
  Array.prototype.fill = function(value) {

    // Steps 1-2.
    if (this == null) {
      throw new TypeError('this is null or not defined');
    }

    var O = Object(this);

    // Steps 3-5.
    var len = O.length >>> 0;

    // Steps 6-7.
    var start = arguments[1];
    var relativeStart = start >> 0;

    // Step 8.
    var k = relativeStart < 0 ?
      Math.max(len + relativeStart, 0) :
      Math.min(relativeStart, len);

    // Steps 9-10.
    var end = arguments[2];
    var relativeEnd = end === undefined ?
      len : end >> 0;

    // Step 11.
    var final = relativeEnd < 0 ?
      Math.max(len + relativeEnd, 0) :
      Math.min(relativeEnd, len);

    // Step 12.
    while (k < final) {
      O[k] = value;
      k++;
    }

    // Step 13.
    return O;
  };
}



function Wave(canvas, nCircles, nLines, nSteps, adaptPerformance) {
	this.canvas = canvas;
	if (this.canvas) {
		this.setDimensions(window.innerWidth, window.innerHeight);
		this.context = this.canvas.getContext("2d");
        this.context.setTransform(1, 0, 0, 1, 0, 0);
	}
    this.adaptPerformance = adaptPerformance||false;
    this.fpsMonitor = Array(120).fill(60);
	this.circles = this.generate(nCircles||4, nLines||7);
	this.nSteps = nSteps||400;
	this.draw();
}

Wave.prototype = {
    setDimensions: function(width, height) {
    	this.height = height;
        this.width = width;
    },
	generate: function(nCircles, nLines) {
		// needs to be power of two plus one, which we get because we use 0..size inclusive
		var size = 2 << nLines;
		var circles = [];
		// generate n circles
		for (var i=0; i<nCircles; i++) {
			var points = [];
			// fill each circle with random walk - try to keep it inside 0..1 to avoid cropping
            var min, max;
			min = max = points[0] = points[size] = Math.random();
			for (var j = size / 2; j >= 1; j = j / 2) {
				for (var k = j; k < size; k += 2 * j) {
					// crop at 0..1 - if this is terrible, maybe scale...