Hex

by Chris Maloney

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"></script>
<svg id='svg' width='600' height='600'>
</svg>

JavaScript

var s = Snap('#svg');


function polygon(s, n, x, y, r, color, startAngle) {
  var a = startAngle;
  function point(a) {
  	return [x + r * Math.cos(a), y - r * Math.sin(a)];
  }
  var path = [];
  for (var i = 0; i <= n; i++) {
    a += 2 * Math.PI / n;
    path = path.concat(point(a));
  }
  s.polygon(path).attr({
    stroke: "#222222",
    strokeWidth: 2,
    fill: color,
  });
}
function hexagon(s, x, y, r, color, startAngle) {
  return polygon(s, 6, x, y, r, color, startAngle);
}

var boardSize = 5;
var start = {x: 50, y: 50};
var hexW = 600 / boardSize / 1.8;
var hexR = hexW / (2 * Math.cos(Math.PI / 6));
//var hexW = 2 * hexR * ;
var hexH = hexR * (2 * Math.sin(Math.PI / 6) + 0.5);
function hex(row, col, color) {
  var offset = col * hexW / 2;
  return hexagon(s, start.x + offset + row * hexW, start.y + col * hexH, 
    hexR, color, Math.PI/6);
}

_.range(boardSize).map(function(row) {
  _.range(boardSize).map(function(col) {
    hex(row, col, 'white');
  });
});