I am writing this because I could not find anything adequate in my interweb searches for how to draw a hexagon using a svg polygon
What I wanted to do was create an svg hexagon in the guise of a react component. I wanted to supply a size property and the component would magically know how to create the coordinates that are be used for the points attribute of the hexagon.
Hexagon Maths
In the figure above, the angles a
, b
, c
, d
,e
and f
are the central angles of a hexagon. The number of central angles of a polygon is always the same as the number of sides.
As you can see above all the central angles of the polygon will always form a complete circle. Hence the central angles will always add up to 360∘. Since a regular polygon has all equal sides, then the central angles of the polygon are equal.
To find the central angles of a polygon:
 First identify the number of sides
n
.  Then divide by 360∘.
The central angle of a hexagon is therefore 360 / 6 = 60∘
.
If I create coordinates at 0, 60, 120, 180, 240 and 360 and all of the same length, then the <polygon />
component will join the vertices to create a hexagon.
I can use the trigonometry functions of cos
and sin
to set a coordinate if I know the central angle of the polygon and the length of each side of the polygon. cosine
can give me the x
coordinate and sine
can give me the y
coordinate.
But wait, we can do better
But why stop at a hexagon? The same maths should apply to any equal sided polygon. If I want to render an octagon then the same maths applies, all I need to do is 360 / 8
to get the central angle. If I want a pentagon, then I just need to 360 / 5
The number of sides could be a prop to the component.
Show me the code
Armed with this knowledge I can now work out the points by just knowing the central angle and the length of a side and an optional central point
object that gives me a starting position to center the polygon
.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 

The function takes a sides
argument which is the number of sides in the polygon, for example a hexagon has 6. The size or length of each side, an optional center argument which is the x
and y
coordinates of an optional offset to move the polygon and a rotate
argument which will roate the polygon by a number of degrees, more on this laer.
Line 12  const degrees = (360 / sides) * n  rotate;
will get the central angle of the polygon which will be used to ascertain each point in the polygon.
Line 14  const radians = (Math.PI / 180) * degrees;
converts degrees into radians. Both Math.cos and Math.sin expect the number argument to be in radians and not degrees. I initially got this wrong and ended up with something very far removed from a hexagon.
The code below will work out the x
and y
coordinates of each of the six points.
1 2 3 4 

Here is a jsfiddle with a plain js version, you can just change the sides
variable to create a different polygon.
Below is the react component in it’s entirety:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 

The points are transformed into a string on line 47 which is what the polygon expects. Below is the rendered output:
1


The infamous hexagon
I decided to make a more specialised Polygon
component called Hexagon
to satisfy my original need:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 

The component takes a HexagonType
prop which is a typescript enum and on line 19, I create a turnHexagon
variable that adds an rotate value (or not) to have the hexagon rotated. This rotate
prop is passed to the Polygon
component.
This means the hexagon can be pointy:
or flat