How To Create Sacred Geometry With JavaScript

How To Create Sacred Geometry With JavaScript

Sacred geometry requires perfectly formed shapes that are perfectly positioned in relation to each other. This is very difficult to do by hand, so I thought I’d give it a go using code.

I’m going to use React, together with Konva.js to be able to draw on the HTML5 canvas element.

This is the final result..

If you’re interested in looking at the code, click here.

Some things I learned along the way

To create the seed of life, draw a circle, then draw another six circles at degree 0, 60, 120, 180, 240, 300.

To calculate the coordinate of where to draw the new circle, where you can use some trigonometry to calculate the coordinate for the center of the next circle. To use JavaScript’s Math.cos and Math.sin functions though, you need to first convert degrees to radians. The following two functions do both these tasks for you.

You can view the generated seed of life here.

The flower of life certainly looks a lot more complicated, but it is in fact created in the exact same way as the seed of life above. The only difference, is that instead of seven circles in the seed of life, the flower of life has seven seeds of life!

You can view the generated flower of life here.

For the flower of life I also added two circles around the outside of the full design to more closely match the design seen widely.

Published by


Andrew Golightly is the lead web developer here at Golightly+. He is a passionate fullstack JavaScript developer. He also runs an Empath Community.

Leave a Reply

Your email address will not be published.