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