Kufic calligraphy has impressed me since long ago. This example is from the walls of the Gudi Khatun Mausoleum in Nakhchivan, Azerbaijan.
The text is animated in the correct order to understand how the words are ordered. The meaning of the text is
There is no God but God, and Muhammad is His prophet. May God bless him.
First, I made the SVG image from the pictures I found. The elements must be lines so they can be animated this way. That’s why kufic calligraphy is good for the example, since all the strokes have the same width.
Once the SVG was made, I rotated and scaled, and added to the HTML. Every path was assigned an id of the form id=”p14”, where the number has to go in the order we want to draw the strokes.
The function drawStroke selects the stroke and changes the stroke-dashoffset as shown in this example.