# Render Any Polygon in a React Component

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:

1. First identify the number of sides `n`.
2. 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`.

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.

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:

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

## The infamous hexagon

I decided to make a more specialised `Polygon` component called `Hexagon` to satisfy my original need:

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