<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 = 18;
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="-1000 -900 2000 1800" 

	style="width:100%; height:100%; top:0; left:0; ">

  <style type="text/css">
	line   	{stroke:red; stroke-width:2}
	text	{fill:black; font-size:200%}
  </style>

 <g id="100D">
	<!-- Weapon ranges -->

	<circle cx="-208" cy="-120" r="293" fill="none" stroke-dasharray="2,2" stroke="magenta" stroke-width="4"/>
	<circle cx="208"  cy="-120" r="293" fill="none" stroke-dasharray="2,2" stroke="magenta" stroke-width="4"/>
	<circle cx="000"  cy="240"  r="293" fill="none" stroke-dasharray="2,2" stroke="magenta" stroke-width="4"/>
	<circle cx="000"  cy="-240" r="293" fill="none" stroke-dasharray="2,2" stroke="magenta" stroke-width="4"/>
	<circle cx="000"  cy="0"    r="293" fill="none" stroke-dasharray="2,2" stroke="magenta" stroke-width="4"/>

	<circle cx="000"  cy="240"  r="78" fill="none" stroke-dasharray="2,2" stroke="maroon" stroke-width="4" />
	<circle cx="208"  cy="-120" r="78" fill="none" stroke-dasharray="2,2" stroke="maroon" stroke-width="4" />	
	<circle cx="-208" cy="-120" r="78" fill="none" stroke-dasharray="2,2" stroke="maroon" stroke-width="4" />
	<circle cx="000"  cy="-240" r="78" fill="none" stroke-dasharray="2,2" stroke="maroon" stroke-width="4" />
	<circle cx="000"  cy="000"  r="78" fill="none" stroke-dasharray="2,2" stroke="maroon" stroke-width="4" />


	<text x="-100" y="360">Laser Ranges</text>
	<text x="310" y="200">Meson Gun 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="orangered"  />
	<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="-260" text-anchor='middle'>Moon</text>
	<text x="-240" y="100" 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="0"    cy="240"  r="6" fill="black"/>

	<text x="0" y="270" text-anchor='middle'>L3</text>
	<text x="-208" y="-140" text-anchor='end'>L4</text>
	<text x="+208" y="-140" text-anchor='start'>L5</text>

	<text x="0" y="-440" text-anchor='middle'>Defences assume deep Meson sites on Earth/Moon and Monitors at the Lagrange points</text> 
	<text x="0" y="-480" text-anchor='middle'>Each hex is 100,000 miles or ten space combat hexes across</text>
  </g>
 </svg>
</div>
</body>
</html>