JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<div class="graphiness"></div>

CSS

.graphiness {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #111;
    z-index: 0;
    pointer-events: 0;
}
.graphiness span {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 5%;
    border-left: 1px solid #111;
    border-right: 1px solid #111;
    background-color: #191919;
    transition: top 600ms;
    box-sizing: border-box;
}

JavaScript

/**
 * GRAPHINESS
 */
(function () {
    var graphinesses = document.getElementsByClassName('graphiness');
    var gLimit = 20;
    for (var i = 0; i < graphinesses.length; i++) {
        for (var n = 0; n < gLimit; n++) {
            var bar = document.createElement('span');
            bar.setAttribute('style', 'left: ' + (n * (100 / gLimit)) + '%;');
            graphinesses[i].appendChild(bar);
        }
    }
    var graphyRun = function () {
        var graphyBars = document.querySelectorAll('.graphiness > span');
        for (var i = 0; i < graphyBars.length; i++) {
            var h = Math.round(Math.random() * 100);
            graphyBars[i].style.top = h + '%';
        }
    }
    graphyRun();
    var graphyLoop = window.setInterval(graphyRun, 2000);
})();