JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<div class="msg"></div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080">
    <path d="M597,-264L733,-258L1015,-259Z" fill="#c6d2e7" stroke="#c6d2e7" stroke-width="1.51" />
    <path d="M769,1322L560,1338L1082,1340Z" fill="#7a5c8f" stroke="#7a5c8f" stroke-width="1.51" />
    <path d="M1313,1333L1082,1340L1502,1335Z" fill="#71397f" stroke="#71397f" stroke-width="1.51" />
    <path d="M1015,-259L1539,-244L1681,-246Z" fill="#bfa6d1" stroke="#bfa6d1" stroke-width="1.51" />
    <path d="M1681,-246L1772,-210L1909,-188Z" fill="#bc8ebe" stroke="#bc8ebe" stroke-width="1.51" />
    <path d="M1808,1281L1502,1335L1961,1301Z" fill="#6f1570" stroke="#6f1570" stroke-width="1.51" />
    <path d="M1961,1301L1502,1335L2076,1317Z" fill="#6d0a69" stroke="#6d0a69" stroke-width="1.51" />
    <path d="M1961,1301L2076,1317L2079,1166Z" fill="#640560" stroke="#640560" stroke-width="1.51" />
    <path d="M1956,235L2058,342L2092,195Z" fill="#8b6b9c" stroke="#8b6b9c" stroke-width="1.51" />
    <path d="M2058,342L1962,427L2097,520Z" fill="#805f96" stroke="#805f96" stroke-width="1.51" />
    <path d="M2092,195L2058,342L2097,520Z" fill="#806495" stroke="#806495" stroke-width="1.51" />
    <path d="M1681,-246L1909,-188L2100,-178Z" fill="#b788b6" stroke="#b788b6" stroke-width="1.51" />
    <path d="M1960,-89L2080,-8L2100,-178Z" fill="#a37da6" stroke="#a37da6" stroke-width="1.51" />
    <path d="M2056,824L1944,939L2103,963Z" fill="#762d7f" stroke="#762d7f" stroke-width="1.51" />
    <path d="M1961,1122L2079,1166L2103,963Z" fill="#721772" stroke="#721772" stroke-width="1.51" />
    <path d="M1944,939L1961,1122L2103,963Z" fill="#78217c" stroke="#78217c" stroke-width="1.51" />
    <path d="M2079,1166L2076,1317L2103,963Z" fill="#6d0a6a" stroke="#6d0a6a" stroke-width="1.51" />
    <path d="M1986,806L2056,824L2104,672Z" fill="#773c85" stroke="#773c85" stroke-width="1.51" />
    <path d="M2097,520L1963,542L2104,672Z" fill="#79508d" stroke="#79508d" stroke-width="1.51" />
    <path...

SCSS

@import url(https://fonts.googleapis.com/css?family=Amatic+SC);

html,body{
    width: 100%;
    min-height: 100%;
    overflow: hidden;
    padding: 0;
    margin: 0;
    background-color: #fff;
}
.msg{
    &:after{
        content: 'fractured';
        font-family: 'Amatic SC', serif;
        font-size: 20vmin;
        color: #ced3e0;
        text-align: center;
        text-shadow: 0 0 8vmin #444;
        display: block;
        position: absolute;
        top: 35vh;
        left: 0;
        right: 0;
        z-index: 99;
        mix-blend-mode: soft-light;
    }
}
svg{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    path{
      opacity: 1;
      transform: scale(1) rotate(0deg) translateY(0%) translateX(0%);
        transform-origin: bottom center;
        transition: fill 2s, stroke 2s, transform 500ms, opacity 500ms;
        box-shadow: inset 0 0 100px rgba(255, 255, 255, 0.9);
        &[data-loaded]{
          opacity: 0;
          transform: scale(0.2) rotate(-50deg) translateY(-200%) translateX(-200%);
        }
        &[data-shimmer]{
            fill: #fff;
            stroke: #fff;
        }
    }
}

JavaScript

/**
 * FRACTURE
 */

function throttle(fn, threshhold, scope) {
    // Define default if not;
    threshhold || (threshhold = 250);
    // Setup vars
    var last,
    deferTimer;
    // Main func
    return function () {
        // Applied to
        var context = scope || this;
        // Set date and store arguments
        var now = +new Date,
            args = arguments;
        if (last && now < last + threshhold) {
            // Has been run before and within threshold
            // Remove ticking instance
            clearTimeout(deferTimer);
            // Create new
            deferTimer = setTimeout(function () {
                // On fire
                // Reset time
                last = now;
                // Run function with original context and arguments
                fn.apply(context, args);
            }, threshhold);
        } else {
            // Hasn't been run or outside threshold. Fire immediately
            // Reset time
            last = now;
            // Run function with original context and arguments
            fn.apply(context, args);
        }
    };
}

(function () {
    // Init vars
    var paths = document.querySelectorAll('svg path'),
        i = paths.length - 1,
        reverse = false,
        run = true,
        mouseBoost = true,
        shimmer = true;

    if (reverse) {
        // Reverse paths array
        var rPaths = [];
        for (var n = 0; n < paths.length; n++) {
            rPaths[n] = paths[(paths.length - 1) - n];
        }
        // Overwrite paths with rPaths
        paths = rPaths;
    }

    if (run) {
        // Static interval process
        var loop = window.setInterval(function () {
            if (i >= 0) {
                // Set transform attribute
                if (paths[i].getAttribute('data-loaded')) {
                    paths[i].removeAttribute('data-loaded');
                } else {
                    paths[i].setAttribute('data-loaded', 'true');
                }
       ...