<?xml version="1.0"?>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:svg="http://www.w3.org/2000/svg" 
      >
  <head>
    <style>
      [class~="ellipse"] 
      {
        stroke: red;
        stroke-width: 2;
        fill: blue;
        fill-opacity: 0.1;
      }

      [class~="axes"] 
      {
        stroke: blue;
        stroke-width: 1;
      }   
    </style>

    <script>
      <![CDATA[
      var COLS = 4;
      var ROWS = 4;
      var RX   = 80;
      var RY   = 30;

      function init()
      {
        var canvas = document.getElementById("canvas");

        var angleStep = 360.0/(COLS*ROWS);
        var spacing = 2*Math.max(RX, RY)+10;
        for (var c = 0; c < COLS; ++c) {
          for (var r = 0; r < ROWS; ++r) {
            var ellipse = createEllipse((c+ COLS*r)*angleStep, spacing*(c+0.5), spacing*(r+0.5), RX, RY);
            canvas.appendChild(ellipse);
          }
        }
      }

      function createEllipse(phi, x, y, rx, ry)
      {
        var degPerRad = Math.PI/180.0;
        var e1x = rx*Math.cos(phi*degPerRad);
        var e1y = rx*Math.sin(phi*degPerRad);
        var e2x = ry*Math.cos((phi+90)*degPerRad);
        var e2y = ry*Math.sin((phi+90)*degPerRad);

        var axes  = document.createElementNS("http://www.w3.org/2000/svg", "path");
        axes.setAttribute("class", "axes");
        axes.setAttribute("d", "M"+x+","+y+" l"+e1x+","+e1y+"M"+x+","+y+" l"+e2x+","+e2y);
        var ellipse = document.createElementNS("http://www.w3.org/2000/svg", "path");
        ellipse.setAttribute("class", "ellipse");
        ellipse.setAttribute("d", "M" + (x+e1x) + "," + (y+e1y) +
                                  "A" + rx + "," + ry + " " + phi + " 0,1 " + (x+e2x) + "," + (y+e2y) +
                                  "A" + rx + "," + ry + " " + phi + " 1,1 " + (x+e1x) + "," + (y+e1y) +"z");

        var group = document.createElementNS("http://www.w3.org/2000/svg", "g");
        group.appendChild(axes);
        group.appendChild(ellipse);
        return group;
      }

      ]]>
    </script>
  </head>
  <body onload="init();">
    <svg:svg id="canvas" width="2000" height="2000"/>
  </body>
</html>