<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Peaking Sound</title>
  <style type="text/css">
   /* Structure */
   image { display: block; }
   desk { display: table; }
   rowgroup { display: table-row-group; }
   row { display: table-row; }
   o { display: table-cell; }

   /* Colour */
   desk { background: black; }
   rowgroup[level=peak] o { color: maroon; }
   rowgroup[level=peak] o[o] { color: red; }
   rowgroup[level=high] o { color: brown; }
   rowgroup[level=high] o[o] { color: yellow; }
   rowgroup[level=normal] o { color: green; }
   rowgroup[level=normal] o[o] { color: lime; }

   /* Content */
   html { margin: 1em 1em 0 1em; padding: 0; border: 0; font: x-small sans-serif; }
   body { margin: 0; padding: 0; border: 0; }
   desk { padding: 1em; margin: 0; border-spacing: 0; }
   row, o { height: 1em; line-height: 1em; vertical-align: bottom; }
   o:before { content: '\25CF'; }
   :-moz-table-cell { padding: 0; margin: 0; border: 0; }
  </style>
  <script type="application/x-javascript"><![CDATA[

   const divisions = 50;
   var rows;

   function rowRecord(row, leds) {
     this.row = row;
     this.leds = leds;
   }

   function setLevel(n, m) {
     m = (1 - m) * rows.length;
     for (var i = 0; rows[i]; ++i) {
       var led = rows[i].leds[n];
       if (m < i) {
         led.setAttribute('o', '');
       } else {
         led.removeAttribute('o');
       }
     }
   }

   var level = 0;
   var interval;
   function part1() {
     level += 0.1;
     for (var i = 0; i < divisions; ++i) {
       setLevel(i, level + (Math.random() - 0.5) * (2 / rows.length));
     }
     if (level >= 1) {
       clearTimeout(interval);
       interval = setInterval(part2, 50);
     }
   }
   function part2() {
     for (var i = 0; i < divisions; ++i) {
       setLevel(i, Math.random() + 0.95);
     }
   }

   function init() {
     var rowList = document.getElementsByTagNameNS('', 'row');
     rows = new Array(rowList.length);
     for (var i = 0; rowList[i]; ++i) {
       var row = rowList[i];
       var leds = new Array();
       for (var j = 0; j < divisions; ++j) {
         var led = document.createElementNS('', 'o');
         row.appendChild(led);
         leds[j] = led;
       }
       rows[i] = new rowRecord(row, leds);
     }
     interval = setInterval(part1, 50);
   }
  ]]></script>
 </head>
 <body onload="init()">
  <image xmlns="">

   <desk>
    <rowgroup level="peak">
     <row/>
     <row/>
    </rowgroup>
    <rowgroup level="high">
     <row/>
     <row/>
     <row/>

    </rowgroup>
    <rowgroup level="normal">
     <row/>
     <row/>
     <row/>
     <row/>
     <row/>
     <row/>
     <row/>

    </rowgroup>
   </desk>
  </image>
 </body>
</html>