Untitled

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>SVG</title>
    <style>
        body        { margin: 0; }
        #content    { left: 300px; overflow: hidden; position: absolute; right: 30px; top: 30px; }
        svg         { position: absolute; right: 0; top: 0; }
        rect        { height: 20px; stroke-width: 1px; stroke: #fff; }
        .suc        { fill: #93c47d; }
        .suf        { fill: #d9d9d9; }
        .wrn        { fill: #f6b26b; }
        .stf        { fill: #ff0000; }
    </style>
</head>
<body>
    <div id="page"><div id="content"><svg></svg></div></div>

    <!-- <g transform="scale(-1,1)></g> -->

    <script>
        (function () {
            var [ height, size, half, max ] = [ 30, 20, 10, 0 ];
            var d = document.querySelector("#content");
            var s = document.querySelector("svg");
            for (var i = 0; i < 150; i += 1) {
                var h = `<g class="item" transform="translate(0,${i*height})">`;
                for (var j = 0, k = 0; j < 72; j += 1) {
                    var w, c;
                    if (j== 39) {
                        w = size;
                        c = "suf";
                    } else if (j===50 || j===51 || j===55) {
                        w = size;
                        c = "wrn";
                    } else if (j===52 || j===53 || j===56) {
                        w = half;
                        c = "stf";
                    } else {
                        c = "suc";
                        w = size;
                    }
                    h += `<rect class="${c}" x="${k}" y="1" height="${size}" width="${w}"/></rect>`;
                    k += w;
                }
                max = Math.max(max, k);
                h += "</g>";
                s.insertAdjacentHTML("beforeend", h);
            }
            s.setAttribute("width", max);
            s.setAttribute("height", i*height);
            d.style.height = `${i*height}px`;
            setInterval(function () {
                var R = document.querySelectorAll("rect");
                for (var i=0; i<R.length; i+=1) {
                    var r = R[i], x = r.getAttribute("x");
                    x -= 1;
                    if (x < -20) {
                        r.parentNode.removeChild(r);
                    } else {
                        r.setAttribute("x", r.getAttribute("x") - 1);
                    }
                }
                s.setAttribute("width", 1 + parseInt(s.getAttribute("width"), 10));
            }, 1000);
        }());
    </script>
</body>
</html>