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.

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

  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.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>