Do you need a quick way to generate hexagons in SVG? Include this script in your javascript, and use it to generate the path string for a hexagon. You can then use the string with your chosen SVG plugin. I’ve include an example at the bottom using jQuery SVG.

function hexagon(x,y,r) { var x1 = x; var y1 = y-r; var x2 = x+(Math.cos(Math.PI/6)*r); var y2 = y-(Math.sin(Math.PI/6)*r); var x3 = x+(Math.cos(Math.PI/6)*r); var y3 = y+(Math.sin(Math.PI/6)*r); var x4 = x; var y4 = y+r; var x5 = x-(Math.cos(Math.PI/6)*r); var y5 = y+(Math.sin(Math.PI/6)*r); var x6 = x-(Math.cos(Math.PI/6)*r); var y6 = y-(Math.sin(Math.PI/6)*r); var path = "M"+x1+" "+y1+" L"+x2+" "+y2+" L"+x3+" "+y3+" L"+x4+" "+y4+" L"+x5+" "+y5+" L"+x6+" "+y6+"z"; return path; }

The x and y co-ordinates are for the centre of the hexagon. The variable r is the radius at which the points are drawn. Here is the script in use.

<script> $('#svg_div').svg(); var svg = $('#svg_div').svg('get'); svg.path(hexagon(100,100,60),{stroke: "black", "stroke-width":5, fill: "red",}); svg.path(hexagon(212,100,60),{stroke: "black", "stroke-width":5, fill: "blue",}); svg.path(hexagon(156,197,60),{stroke: "black", "stroke-width":5, fill: "yellow",}); </script>

I thought you’d like to know that I used this code as the basis for a function that figures out the corners of hexagons. I tinkered with it a bit to avoid using the Math package and to support hexes in two different rotations. Thanks for the starter.

Here’s the code I made from your start:

function makePointsString(x, y, r, orientation) {

/*

* This function figures out the coordinates of a

* hex’s corners and passes them back as a string.

*

* We’ll start by setting up some handy constants

* to avoid the overhead of using the Math library

*

* Based on code from http://www.thelow.co.uk/?p=128

*/

var cosValue = .866 * r; // Math.cos(Math.PI / 6) = 0.8660254037844387

var sinValue = .5 * r; // Math.sin(Math.PI / 6) = 0.49999999999999994

// Figure out where the points are, depending on orientation

if (orientation === ‘pointyTop’) {

var x1 = x;

var y1 = y – r;

var x2 = x + cosValue;

var y2 = y – sinValue;

var x3 = x + cosValue;

var y3 = y + sinValue;

var x4 = x;

var y4 = y + r;

var x5 = x – cosValue;

var y5 = y + sinValue;

var x6 = x – cosValue;

var y6 = y – sinValue;

} else { // flatTop

var x1 = x – sinValue;

var y1 = y – cosValue;

var x2 = x + sinValue;

var y2 = y – cosValue;

var x3 = x + r;

var y3 = y;

var x4 = x + sinValue;

var y4 = y + cosValue;

var x5 = x – sinValue;

var y5 = y + cosValue;

var x6 = x – r;

var y6 = y;

}

// Turn the points into a string and return that string

var pointsString = x1 + ‘,’ + y1 + ‘ ‘ +

x2 + ‘,’ + y2 + ‘ ‘ +

x3 + ‘,’ + y3 + ‘ ‘ +

x4 + ‘,’ + y4 + ‘ ‘ +

x5 + ‘,’ + y5 + ‘ ‘ +

x6 + ‘,’ + y6;

return pointsString;

}

Hi Jay,

Glad it was of use! You might find the more generic polygon generator of some use.

http://www.thelow.co.uk/?p=137

Jason

Must be a Jason thing!!!!

Thanks for posting this, just stumbled on your post after spending ages to look for something similar. This works perfectly!!!!

Thanks again,

Jason.