JSFiddle - React, Tailwind, and code Playground

by insin

HTML

<header class="logo">
    <canvas data-url="//assets.frontback.me/assets/logo-farewell-a9bea0211dce4f9853668db3bbab6e630df92d4d11b4fda15b6c318c5e5e4993.png" id="canvas" width="456" height="351" class="visible"></canvas>
    <canvas id="canvas2" style="display: none" width="456" height="351"></canvas>
</header>
<div>Credit to Fredd, this source was extracted from http://www.frontback.me/</div>

CSS

body {
    background: black;
    color: white;
}

JavaScript

function f1() {
    var e = r.getContext("2d"),
        t = new Float32Array(5 * d),
        i = 0,
        l = o.getImageData(0, 0, a, s),
        h = l.data,
        m = 0,
        g = 0;
    for (; s > g; g++) {
        for (var v = 0; a > v; v++) {
            if (h[4 * m + 3] > 0) {
                t[i++] = v + (a - u) / 2;
                t[i++] = g + (s - c) / 2;
                t[i++] = 0, t[i++] = 0;
                t[i++] = h[4 * m + 3];
            }
            m++;
        }
    }

    var y = {
        x: 0,
        y: 0
    },
    b = 0,
        x = 0,
        w = 0,
        k = 0;
    r.onmousemove = function (e) {
        b = e.clientX - r.parentNode.offsetLeft;
        x = e.clientY - r.parentNode.offsetTop + window.pageYOffset;
        w += b - y.x;
        k += x - y.y;
        y.x = b;
        y.y = x;
    };
    r.ontouchmove = function (e) {
        e.preventDefault();
        r.onmousemove(e.touches[0]);
    };
    e.globalCompositeOperation = "source-over";

    function C() {
        var r, i, o, l;
        e.clearRect(0, 0, a, s);
        var u = e.createImageData(a, s), 
            c = 0, 
            d = 0, 
            h = t.length;
        for (; h > d; d += 5) {
            r = t[d];
            i = t[d + 1];
            if (!(0 > r || r > a || 0 > i || i > s)) {
                o = t[d + 2];
                l = t[d + 3];
                var m = f2(r, i, b, x);
                if (f > m) {
                    o += w * (f - m) * Math.random() * 0.05;
                    l += k * (f - m) * Math.random() * 0.05;
                }
                r += o;
                i += l;
                if (!(0 > r || r > a || 0 > i || i > s)) {
                    c = 4 * ((Math.floor(i) - 1) * a + Math.floor(r));
                    u.data[c] = p;
                    u.data[c + 1] = p;
                    u.data[c + 2] = p;
                    u.data[c + 3] = t[d + 4];
                    o *= 0.5;
                    l *= 0.5;
              ...