An SVG Hexagon

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>
```

Tagged with: ,
Posted in jQuery SVG, SVG
3 comments on “An SVG Hexagon”
1. Jay Bryant says:

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.

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;
}

2. Jason Hirst says:

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.