fmarcia/svg.html

## svg.html
 <!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>
	<!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>