Home

A hexagon texture. For free!

jwatte's picture
October 9, 2011 - 20:20 — jwatte

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

Comments

November 26, 2011 - 11:18 — Anonymous

Edges

Hi Jon,

Nice to find your blog by following some twitter accounts.
You are Jon as in the OpenDE guru Jon Watte, right?

Anyways... About the hexagon:
I think you should do it in svg instead.

Not sure if it is a safari thing, but on my iPad, the corners of the hexagons do not line up in your example use.

Take care,

Bram