<?xml version="1.0" encoding="utf-8" standalone="no"?>
<svg onload="init(evt)" width="500" height="500" zoomAndPan="disable"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
    <script type="text/ecmascript"><![CDATA[
        var svgns = "http://www.w3.org/2000/svg";

        var width   = 6;
        var height  = 6;
        var r       = 15;
        var offset  = 30;
        var spacing = 20;
        var elems   = [];
        var midX    = (500 - ((width-1)  * spacing)) / 2;
        var midY    = (470 - ((height-1) * spacing)) / 2;
        var world;
        
        function init(e) {
            if ( window.svgDocument == null )
                svgDocument = e.target.ownerDocument;
            
            world = svgDocument.getElementById("world");
            world.setAttributeNS(
                null,
                "transform",
                "translate(" + midX + "," + midY + ")"
            );

            createElements();
        }

        function createElements() {
            for ( var y = 0; y < height; y++ ) {
                for ( var x = 0; x < width; x++ ) {
                    createElement(x, y);
                }
            }
        }

        function createElement(x, y) {
            var elem = svgDocument.createElementNS(svgns, "circle");
            var cx = x * spacing;
            var cy = y * spacing;
            var translate = "translate(" + cx + "," + cy + ")";
            
            elem.setAttributeNS(null, "cx", -offset);
            elem.setAttributeNS(null, "r", r);
            elem.setAttributeNS(null, "transform", translate);

            // store shape for later manipulation
            elems.push([elem, cx, cy]);

            // add shape to world
            world.appendChild(elem);
        }

        function update(e) {
            var length = elems.length;
            
            for ( var i = 0; i < length; i++ ) {
                var elem = elems[i];
                var dx = (e.clientX - elem[1]) - midX;
                var dy = (e.clientY - elem[2]) - midY;
                var angle = 180 * Math.atan2(dy, dx) / Math.PI;
                var rotate = "rotate(" + angle + ")";
                var translate = "translate(" + elem[1] + "," + elem[2] + ")";

                elem[0].setAttributeNS(
                    null,
                    "transform",
                    translate + " " + rotate
                );
            }
        }

        function changeColor(e) {
            var color = e.target.getAttributeNS(null, "stroke");

            world.setAttributeNS(null, "stroke", color);
            world.setAttributeNS(null, "fill", color);
        }
    ]]></script>
    <rect x="-16384" y="-16384" width="32767" height="32767"
          fill="none" pointer-events="fill" onmousemove="update(evt)"/>
    <rect x="10" y="10" width="478" height="478" rx="5" ry="5"
          fill="none" stroke="grey" stroke-width="2"/>
    <g id="world" pointer-events="none"
       stroke="rgb(192,124,158)" fill="rgb(192,124,158)" fill-opacity="0.5"/>

    <rect x="10" y="460" width="478" height="29" rx="5" ry="5"
          stroke="grey" stroke-width="2" fill="rgb(230,230,230)"/>
    <g fill-opacity="0.5" onclick="changeColor(evt)">
        <circle cx="25"  cy="475" r="10" stroke="rgb(192,124,158)" fill="rgb(192,124,158)"/>
        <circle cx="50"  cy="475" r="10" stroke="rgb(100,149,5)"   fill="rgb(100,149,5)"/>
        <circle cx="75"  cy="475" r="10" stroke="rgb(8,168,128)"   fill="rgb(8,168,128)"/>
        <circle cx="100" cy="475" r="10" stroke="rgb(240,96,18)"   fill="rgb(240,96,18)"/>
        <circle cx="125" cy="475" r="10" stroke="rgb(73,122,247)"  fill="rgb(73,122,247)"/>
        <circle cx="150" cy="475" r="10" stroke="rgb(240,203,0)"   fill="rgb(240,203,0)"/>
        <circle cx="175" cy="475" r="10" stroke="rgb(170,78,247)"  fill="rgb(170,78,247)"/>
    </g>

    <text x="485" y="485" font-size="10px" font-rendering="optimizeLegibility" fill="grey" text-anchor="end" pointer-events="none">Copyright 2004, Kevin Lindsey</text>
</svg>