<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<!-- Copyright © John B Stone -->
  <!-- Free for non-commercial use only -->

 <head>
   <title>Earth Defences</title>

  <style type="text/css">
      .hexBorder
      {
        stroke: black;
        stroke-width: 2;
        fill: none;
      }
  </style>

<script><![CDATA[ 

var svgDocument, canvas, group;
var xAxis = 32;
var yAxis = 17;
var svgns = 'http://www.w3.org/2000/svg';

function drawHex (a, b)
{
  var x = a*86-1435;
  var y = b*100 + a%2 * 50 - 950;
  var h;

  // create hex border
 

  h=svgDocument.createElementNS(svgns,'polygon');

  h.setAttributeNS(null, 'class', "hexBorder");
  h.setAttributeNS(null, 'points', "0,50 29,0 86.6,0 116.5,50 86.6,100 29,100");
  h.setAttributeNS(null, 'transform', "translate(" +x+ "," +y+ ")" );
  h.setAttributeNS(null, 'stroke-dasharray' , '1,5');
  group.appendChild(h);	// add it to this group
}

function drawHexGrid (evt)
{
  if ( window.svgDocument == null )
	svgDocument = evt.target.ownerDocument;    

  // create group item to attach elements to
  group = document.createElementNS("http://www.w3.org/2000/svg", "g");
  group.setAttributeNS(null, 'id', "hexGroup");

  // get canvas object to attach the group to
  canvas = svgDocument.getElementById("canvas");

  for (var a=0; a<xAxis; a++)
  {
    for (var b=0; b<yAxis; b++)
	drawHex(a, b);		// generate all the individual hexes
  }

  canvas.appendChild(group);	// add all the hexes to the canvas
}

]]></script>
  </head>

<body>
<div style="position:relative;">

<svg id="canvas" onload="drawHexGrid(evt)"
	xmlns="http://www.w3.org/2000/svg" version="1.1"
	viewBox="-800 -850 1700 1700" 
	style="width:100%; height:100%; top:0; left:0; ">

  <style type="text/css">
	line   	{stroke:red; stroke-width:1}
	text	{fill:black; font-size:250%}
  </style>

 <g id="100D">

	<!-- Weapon ranges -->

	<circle cx="-208" cy="-120" r="150" fill="none" stroke-dasharray="2,2" stroke="magenta" stroke-width="4" />
	<circle cx="+208" cy="-120" r="150" fill="none" stroke-dasharray="2,2" stroke="magenta" stroke-width="4" />
	<circle cx="000" cy="+240" r="150" fill="none" stroke-dasharray="2,2" stroke="magenta" stroke-width="4" />
	<circle cx="000" cy="-240" r="150" fill="none" stroke-dasharray="2,2" stroke="magenta" stroke-width="4" />
	<circle cx="000" cy="000" r="150" fill="none" stroke-dasharray="2,2" stroke="magenta" stroke-width="4"  />
	<circle cx="800" cy="026" r="150" fill="none" stroke-dasharray="2,2" stroke="magenta" stroke-width="4"  />

	<circle cx="000" cy="240" r="60" fill="none" stroke-dasharray="2,2" stroke="maroon" stroke-width="4" />
	<circle cx="-208" cy="-120" r="60" fill="none" stroke-dasharray="2,2" stroke="maroon" stroke-width="4" />	
	<circle cx="208" cy="-120" r="60" fill="none"  stroke-dasharray="2,2" stroke="maroon" stroke-width="4" />
	<circle cx="000" cy="-240" r="60" fill="none"  stroke-dasharray="2,2" stroke="maroon" stroke-width="4" />
	<circle cx="000" cy="000" r="60" fill="none"  stroke-dasharray="2,2" stroke="maroon" stroke-width="4" />
	<circle cx="800" cy="026" r="60" fill="none"  stroke-dasharray="2,2" stroke="maroon" stroke-width="4" />

	// Key

	<circle cx="-250" cy="500" r="20" fill="none" stroke-dasharray="2,2" stroke="magenta" stroke-width="4"  />
	<circle cx="-250" cy="550" r="20" fill="none"  stroke-dasharray="2,2" stroke="maroon" stroke-width="4" />

	<text x="-220" y="560">Laser Ranges</text>
	<text x="-220" y="510">Meson Gun/Particle Beam Ranges</text>

	<!-- Earth, Moon, lunar orbit and 100D -->

	<circle cx="0" cy="0" r="16"  fill="blue"  />
	<circle cx="0" cy="0" r="240" fill="none" stroke-dasharray="7,7" stroke="black" stroke-width="4" />
	<circle cx="0" cy="-240" r="8"  fill="darkorange"  />
	<circle cx="0" cy="0" r="800" fill="none" stroke-dasharray="7,7" stroke="black" stroke-width="4" />

	<text x="0" y="-20" text-anchor="middle">Earth</text>
	<text x="0" y="-250" text-anchor="middle">Moon</text>
	<text x="-240" y="130" text-anchor="end">Lunar orbit</text>
	<text x="710" y="400">100 Diameters</text>

	<!-- Lagrange points / monitors -->

	<circle cx="+208" cy="-120" r="6" fill="black"/>	
	<circle cx="-208" cy="-120" r="6" fill="black"/>
	<circle cx="000"  cy="240"  r="6" fill="black"/>

	<text x="+000" y="280" text-anchor="middle">L3</text>
	<text x="-218" y="-120" text-anchor="end">L4</text>
	<text x="+218" y="-120" text-anchor="start">L5</text>

	<circle id="jumpPoint" cx="800" cy="026" r="6" fill="red"/>
	<text id="txtJP" x="500" y="010">Barnard's Star optimal Jump point</text>

	<text x="0" y="-400" text-anchor='middle'>Each hex is 100,000 miles or ten space combat hexes across</text>
	<text x="0" y="-560" text-anchor="middle">Defences assume orbital Monitors at Earth/Moon </text>
	<text x="0" y="-500" text-anchor="middle">and Monitors at the Lagrange points and Barnard's Star jump point.</text> 

  </g>
 </svg>
</div>
</body>
</html>