A hexagon texture. For free!

jwatte's picture

Here's a PNG file of a hexagon. The hexagon itself is 256 pixels wide and 225 pixels tall. The PNG is 290 pixels wide and 290 pixels tall. You can use this to generate hex tile grids in HTML and Canvas and XNA and really any other presentation framework you want!

I place this texture into the public domain, or if your locale does not recognize public domain, under the MIT license (which includes limitation of and release of liability!)
hexagon-256-290.png
Here is some code that will draw a hexagon-based triangle in a div named 'root' on your web page:

<!doctype html>
<head>
<title>hex</title>
</head>
<body width='800px' height='600px'>
<style>
div {
  margin: 0px;
  padding: 0px;
  border: 0px;
}
div.hex {
  background-image: url('/files/hexagon-256-290.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 290px 290px;
  width: 290px;
  height: 290px;
}
</style>
<div id='root'></div>
<script language='javascript'>
function imageAt(x, y) {
  var div = document.createElement('div');
  div.className = 'hex';
  div.style.position = 'absolute';
  div.style.left = (x-128) + 'px';
  div.style.top = (y-128) + 'px';
  document.getElementById('root').appendChild(div);
}
for (var c = 0; c < 5; ++c) {
  for (var r = 0; r <= c; ++r) {
    imageAt(c * 191 + 128, r * 226 - 113 * c + 400);
  }
}
</script>
</body>

See it in action here: http://watte.net/hexagon-texture.html