Bernhard Häussner
Tags: Artikel mit dem Tag «Israel» durchstöbern

Nazareth Knot: Generate SVG drawings using ERB

11.05.2016, 11:05

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 blog post 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. If you don't know what those method do, I would reccomment to look at the documentation of the Enumerable mixin, they are really useful. 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.

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. I 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.

You can find all the code in the Git-Hub-Repository bxt/Nazareth-Knot.

Kommentare: keine
[ Seite 1 ]
© 2008-2018 by Bernhard Häussner - Impressum - Login
Kurz-Link zur Homepage: