svg fiddle

<!DOCTYPE html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    <?php
        // draws a box at the coords
        // stroke given in 1/2 width
        function drawBox($x, $y, $edge, $width, $stroke)
        {
            $lastY = $y - ($width / 2);
            $negEdge = -$edge;

            return "<path d=\"M $x $y h $edge v $edge h $negEdge L $x $lastY\" stroke=\"$stroke\" stroke-width=\"$width\" fill=\"none\"/>";
        }

        function drawJig($keys, $xArr, $yArr, $stroke, $width)
        {
            $cmd = 'M';
            $svg = '<path class=\"jig\" d="';
            foreach ($keys as $place)
            {
                $x = $xArr[$place] + 10;
                $y = $yArr[$place] + 10;
                $svg .= $cmd . " $x $y ";
                $cmd = 'L';
            }
            $svg .= "\" stroke=\"$stroke\" stroke-width=\"$width\" fill=\"none\"/>";
            return $svg;
        }

        function label($x, $y, $text)
        {
            return "<g font-size=\"24\" font-family=\"sans-serif\" fill=\"white\" stroke=\"none\" text-anchor=\"start\"> <text x=\"$x\" y=\"$y\">$text</text></g>";
        }
    ?>

    <svg width="1400" height="700">
        <defs>
            <linearGradient id="pulse" x1="0%" y1="0%" x2="100%" y2="0%">
                <stop offset="0%" stop-color="gray">
                    <animate attributeName="offset" from="0%" to="100%" dur="10s" repeatCount="indefinite" />
                </stop>
                <stop offset="10%" stop-color="white">
                    <animate attributeName="offset" from="10%" to="100%" dur="10s" repeatCount="indefinite" />
                </stop>
                <stop offset="20%" stop-color="gray">
                    <animate attributeName="offset" from="10%" to="100%" dur="10s" repeatCount="indefinite" />
                </stop>
            </linearGradient>
        </defs>

        <?php
            $edge = 20;
            $longs = array();
            $lats = array();

            $keys = array(
                "Atlantis",
                "Beggard",
                "Protomorika",
                "Amorika",
                "Los Alamos",
                "Fort Roanoke",
                "Kill Devil Hills",
                "Kitty Hawk",
                "Jarvis",
                "Manteo"
            );

            foreach ($keys as $name)
            {
                $x = rand($edge, 1360);
                $y = rand($edge, 660);
                $longs[$name] = $x;
                $lats[$name] = $y;
            }
        ?>

        <g>
            <?=drawJig($keys, $longs, $lats, "url(#pulse)", 2)?>;
        </g>

        <?php
            foreach ($keys as $name)
            {
                $x = $longs[$name];
                $y = $lats[$name];
                echo (drawBox($x, $y, $edge, 2, "gray"));
                echo label($x + ($edge/2), $y + ($edge/2), $name);
            }
        ?>
    </svg>
</body>