JSFiddle - React, Tailwind, and code Playground

by Сергей Тарасевич

HTML

<script>
  (function() {
    var cx = '003066897637231240778:ffwdtg_yrkq';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:search></gcse:search>

CSS

@import url(http://fonts.googleapis.com/css?family=Podkova:400, 700);
 $primaryColor: hsl(19, 100, 50);
 body, html {
    padding: 0;
    margin: 0;
    font-family:'Podkova', serif;
}
canvas {
    position: absolute;
    top:0;
    z-index:0;
}
h1 {
    position: absolute;
    z-index: 2;
    top: 50%;
    margin-top: -50px;
    font-size: 120px;
    background-color: $primaryColor;
    color: white;
    height: 100px;
    line-height: 100px;
    text-transform: uppercase;
    padding: 25px 50px;
}

JavaScript

$(function () {
    var canvas = $('#box_canvas1');
//gfhfg
});

/*(function () {
    "use strict";

    var canvas = document.getElementById('box_canvas1');
    //var processing = new Processing(canvas, function (p) {
    var processing = function (p) {
        var scale = 30;
        var frame = 0;
        var point = [0, 0];

        window.addEventListener('resize', function () {
            p.setup();
        });

        p.setup = function () {
            p.size(window.innerWidth, window.innerHeight);
            p.colorMode(p.HSB, 360, 100, 100, 100);
        };

        p.draw = function () {
            var xCount = p.width / scale;
            var yCount = p.height / scale;
            p.noiseDetail(4.55);
            p.background(50, 0, 250);
            p.scale(scale);

            for (var x = 0; x - 1 <= p.width / scale; x++) {
                for (var y = 0; y - 1 <= p.height / scale; y++) {
                    var light = p.map(p.noise(x / 6, y / 6, frame / 200), 0, 1, 0, 100);
                    var hue = 195;

                    p.pushMatrix();
                    p.noStroke();
                    p.translate(x, y);

                    if (x % 2 === 0) {
                        p.rotate(p.radians(180));
                    }
                    if (y % 2 === 0) {
                        p.rotate(p.radians(180));
                    }

                    p.fill(hue, 100, light, 100);

                    p.triangle(-1, -0.5,
                    0, 0.5,
                    1, -0.5);

                    p.popMatrix();
                }
            }

            frame++;
        };

    };*/