The Nazareth Knot is an ancient drawing in found in a church in Bethlehem (duh!). It is really a nice byzantine knot that reminds us of the very similar keltic knots. Of course I wanted to recreate it. First of all, I took a photo of the original mosaic. Then I made a pen-and-paper sketch of it to get a better intuition of the workings of this knot. And finally I created an SVG image, which is what this repository is all about.
I did some calculations in Ruby and generated the SVG using ERB code. I really enjoyed playing with Ruby's array methods like map, zip, flatten, each_cons, each_slice and repeated_permutation. For developing I wrote a tiny script that renders the ERB into proper HTML, whenever the code changes using fswatch. It also displays errors on the page when something goes wrong. Happens to the best. Also I monkey-patched Ruby's Matrix class with some 2D affine transformation-foo for all the calculations. Also, I used copies of the paths and the stroke-dasharray CSS property to create the interweaved strings, as you can see on the web page.
License: CC BY-SA 4.0.
Author: Bernhard Häussner.
The Ravello Knots are based on a mosaic found in a church in Ravello, Italy. The city is one of the most beautiful towns along the Amalfi Coast, mostly for its wonderful gardens. A found the knot a long time ago while travelling to Italy. I already "harvested" this knot then, since I created a computer graphic of the original knot and later did a drawing of a slight modification to my sketchbook.
Since I wanted to continue exploring the SVG creations more I was looking for old sketches to refresh and the knot from Ravello came to my mind. I not only did a nice SVG drawing of the old sketch but took it further to create a totally new variation showing off the stroke-dasharray technique in a most spectacular way.
License: CC BY-SA 4.0.
Author: Bernhard Häussner.
Since I already build the tools, I created even more knots. Also I started
calulating the stroke-dasharrays instead of just guessing them. I used some
complex trigonometric calculations but in the end it allowed me to
algorithmically create whole knots including overlaps instead of just the paths.
You should check them out:
And for fun I created even more stuff:
