# How to make a Heptagram with SVG ?

October 02, 2019

I’m a huge fan of the band Tool and with their latest album they used a lot of 7s in the music and in the artwork.

The artwork contained a bunch of Heptagrams which is a seven sided polygon but internally connected.

Here’s what it looks like

I wanted to see if I could draw the heptagram using svg and javascript.

## Initial approach

I thought at first I can just try to draw one edge at a time. Keeping the internal angle of 77.143deg between them. This turned out very tricky as <Line/> and <Path/> didn’t work based on angles or radians. So I looked at how to draw it on paper.

## So how do you draw one on paper?

- Get the seven vertices of a regular heptagon
- Join alternate vertices
- And that’s it you have a 7/2 heptagram

## Let’s do it with SVG now, using the same approach

### Finding the 7 vertices

- First draw a <Circle />
- Divide the circle into 7 pieces ( 360 deg divided by 7 = 51.4deg)
- Take the sine and cosine of incrementing angles(0, 51.4deg, 51.4deg * 2, 51.4deg * 3…) to find the x,y co-ordinates on the circle
- That’s it, getting these vertices solves most of our problems

### Joining alternate vertices

- Now that we have the vertices (x,y co-ordinates), we’ve to join them
- All we do now is take alternate vertices and draw a <Line /> between them

### Then add some animation jazz and you have a cool heptagram in SVG

TLDR; Here’s the codepen link https://codepen.io/mbmanohars/pen/vYBoxVY