How to make a heptagram with SVG

How to make a heptagram with SVG

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