I coded the Palestinian Kaffiyah Pattern with HTMLCSSSVG

I have been following the news of what is going on in Palestine for a while, and day and after day, my heart breaks a little more. Yesterday I read an article by United Nations Office for the Coordination of Humanitarian Affairs' Relief Web , that said that 20,000 Palestinians are believed to be killed by Israel's genocide on Gaza.

And I found myself obsessing over the issue especially since it is estimated that over 6400 of those that died were children. Luckily it was the weekend so I could afford to distract myself with some creative coding, and that's exactly what I did. I started to code a Palestinian Kaffiyah (traditional Palestinian scarf). I chose to code a Kaffiyah, I watched a documentary a week ago that explained how there is only one Keffiyah shop left in Palestine and who knows it might have gotten destroyed by now.

I used a picture of a Keffiyah as a reference and spent the next few hours trying to code the pattern without using any programs other my IDE, and I was mostly successful, until I reached the the Olive leaves bit. I created one Olive leaf on Adobe Illustrator and used it as a symbol within my code, and then created a pattern with it. It took a whole bunch of tinkering to get everything looking right, but eventually it worked.

I began by defining a pattern for the fishnet area (the fishnet represents Palestinian's connection to the sea):

I first defined a pattern that created squares and then rotated it by 30 degrees, I used dasharray styling to make it look like stitching. In a real Kaffiyah, there are oval like things on the edges of each diamond shape in the fishnet, I used circles instead:

<pattern id="fishnet" width="50" height="50" patternUnits="userSpaceOnUse" patternTransform="rotate(30)">
<line x1="0" y1="0" x2="0" y2="50" stroke="black" stroke-dasharray="5" stroke-width="2"/>
<line x1="0" y1="0" x2="50" y2="0" stroke="black" stroke-dasharray="5" stroke-width="2"/>
<circle cx="0" cy="0" r="6"/>
<circle cx="45" cy="0" r="6"/>
<circle cx="0" cy="50" r="6"/>
<circle cx="45" cy="50" r="6"/>


Then I created the leaves pattern, like I said I made a leaf on Adobe Illustrator first:

<pattern id="leaves" x="6" y="18.5" width="5%" height="6%" patternUnits="userSpaceOnUse">        <use xlink:href="#leaf" />      </pattern>

Finally, I created the necessary rectangles, and where I appropriate I used the patterns as a fill:

<rect width="100%" height="95%" fill="none" stroke="black" stroke-width="5"></rect>
<rect width="100%" height="70%" fill="url(#fishnet)" stroke="black" stroke-width="5"></rect>
<line x1="0" y1="75%" x2="100%" y2="75%" stroke="black" stroke-width="50" />
<rect width="100%" height="12%" y="80%" fill="url(#leaves)" stroke="black" stroke-width="5"/>

If you want to see the code in action, here is a code pen:

Thanks for reading!
Stay safe!