Using Today’s Technology to Create Islamic Patterns - SVG is the Answer!
by Ali Hazzah
Those striped arches are a Mamluk-era throwback motif.
This is how things often are in Egypt, where the past is always residually present, even if only in a seemingly insignificant architectural detail at a Red Sea resort.
Classic Islamic geometric design patterns – which can be used as ornamental motifs both outside and inside buildings such as mosques, madrassas, museums and palaces – are one of the Arab world’s many outstanding contributions to art and advanced mathematics during Islam’s golden age.
For instance, one can find in Cairo and Alexandria many important historical mosques adorned with magnificent examples of Islamic geometric patterns, an art form whose creative influence has been vast, profound, and global.
Historically, the techniques used to produce these patterns were often trade secrets, though today books by Eric Broug and a few others demonstrate how to reproduce them using only compass, paper, pencil and a straight edge.
As we round into the quarter mark of the 21st century, digital technologies such as SVG offer a contemporary means of preserving our cultural heritage as Arabs, while exploring and extending classical designs with new ideas and approaches.
But what is this SVG?
SVG stands for Scalable Vector Graphics.
It’s a lossless (meaning that no part of an image is degraded or left out during compression), Web browser-enabled computer language for persisting two-dimensional images that do not blur when enlarged on a computer or smartphone display, unlike the pixelation that mars raster formats such as .png or .jpg.
All you need to program in SVG is a text editor and a modern browser.
It’s an intuitive, XML-based technology for creating simple geometric shapes, which are the backbone of traditional Islamic art.
And thanks to the pioneering work of Broug, Jay Bonner, et. al., admirers of Islamic artwork can use SVG to build their own interpretations of classic Islamic designs.
The figure below is an example of a typical Girih tile 10/3 star pattern.
Source: 2007 Lu/Steihardt research paper, Decagonal and Quasi-Crystalline Tiling in Medieval Islamic Architecture
As I studied these four images, it occurred to me that it might be cool to build an SVG animation that cycled through the main transitions a tile would go through to arrive at this pattern.
But first, I had to do some math to figure out the vertices of the lines that divide the main dotted circle into 10 even arcs. Then I had to plot these to a tile’s 300 x 354 y-inverted coordinate grid.
Here’s a screenshot of the final design I came up with.
And here’s a link to the live demo version of this pattern.
All in all, it was pretty straightforward to code. The main hassle was creating the star effect at the end, which necessitated a bit of CSS wizardry that could have been avoided if it were possible to use a function that suspends the drawing of a path segment anywhere along its trajectory. There is an advanced feature that would enable this in the SVG 2 spec, but it never has been implemented by the browser vendors. I discuss the issue in more technical detail in my blog.
Let’s wrap things up.
SVG was developed during the dawn of the Internet for use primarily by non technical graphical artists or end-users wishing to enhance their content with eye-catching charts, logos and icons.
It is supported today more or less uniformly and stably by the three major browsers – though none have implemented the latest and greatest features, partly due to vendor politics, and partly owing to the dramatic evolution and rise in importance and expressive power of a presentation-level technology known as CSS, which is used to style HTML elements as well as SVG.
As we have just seen, Islamic patterns are indeed well-suited for SVG.
For example, Islamic patterns are usually tessellated in infinite repetitions that are meant to aesthetically please, as well as suggest the beguiling mysteries of the divine. Pattern repetition is natively supported by SVG itself, and simple to implement, without undue verbosity.
In conclusion, SVG can be a powerful pedagogical tool for progressive Arab educators wishing to empower young students with modern-day, low-cost tools to express their innate creativity, while also exposing them to coordinate geometry, trig, front-end programming, and the limitless troves of Islamic visual arts history.
Who knows?
Perhaps one day we might even see such courses being taught as part of El Gouna’s TU Berlin Urban Development Masters curriculum.
# # #
bio: Ali is a former IT/New Media executive. He grew up in Egypt and visited El Gouna for an extended period in 2018. More recently, Ali launched a blog on Islamic Design patterns. It can be found @ https://zakrafa.design/
Islamic art is often characterized by recurrent motifs, such as the use of geometrical floral or vegetal designs in a repetition known as the arabesque. The arabesque in Islamic art is often used to symbolize the transcendent, indivisible and infinite nature of God. Islamic art isn't restricted to religious work, but includes all the artistic traditions in Muslim culture. Islamic art is a modern concept created by art historians in the 19th century. if you are looking a professional art designs, then please visit ISLAMIC ART DESIGN SHOP.Modern Islamic art
ReplyDelete