Want to Contribute to us or want to have 15k+ Audience read your Article ? Or Just want to make a strong Backlink?

I coded the Palestinian Kaffiyah Pattern with HTML+CSS+SVG

I’ve been following the information of what’s going on in Palestine for some time, and day and after day, my coronary heart breaks somewhat extra. Yesterday I learn an article by United Nations Workplace for the Coordination of Humanitarian Affairs’ Aid Net , that mentioned that 20,000 Palestinians are believed to be killed by Israel’s genocide on Gaza.

And I discovered myself obsessing over the difficulty particularly since it’s estimated that over 6400 of people who died have been kids. Fortunately it was the weekend so I might afford to distract myself with some artistic coding, and that is precisely what I did. I began to code a Palestinian Kaffiyah (conventional Palestinian scarf). I selected to code a Kaffiyah, I watched a documentary every week in the past that defined how there is just one Keffiyah store left in Palestine and who is aware of it might need gotten destroyed by now.

I used an image of a Keffiyah as a reference and spent the subsequent few hours making an attempt to code the sample with out utilizing any packages different my IDE, and I used to be principally profitable, till I reached the the Olive leaves bit. I created one Olive leaf on Adobe Illustrator and used it as a logo inside my code, after which created a sample with it. It took an entire bunch of tinkering to get all the pieces wanting proper, however ultimately it labored.

I started by defining a sample for the fishnet space (the fishnet represents Palestinian’s connection to the ocean):

I first outlined a sample that created squares after which rotated it by 30 levels, I used dasharray styling to make it appear to be stitching. In an actual Kaffiyah, there are oval like issues on the perimeters of every diamond form within the fishnet, I used circles as a substitute:

<sample id="fishnet" width="50" peak="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 sample, like I mentioned I made a leaf on Adobe Illustrator first:

<sample id="leaves" x="6" y="18.5" width="5%" peak="6%" patternUnits="userSpaceOnUse">
        <use xlink:href="#leaf" />
Enter fullscreen mode

Exit fullscreen mode

Lastly, I created the mandatory rectangles, and the place I acceptable I used the patterns as a fill:

<rect width="100%" peak="95%" fill="none" stroke="black" stroke-width="5"></rect>
<rect width="100%" peak="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%" peak="12%" y="80%" fill="url(#leaves)" stroke="black" stroke-width="5"/>

If you wish to see the code in motion, here’s a code pen:

Thanks for studying!
Keep secure!

Add a Comment

Your email address will not be published. Required fields are marked *

Want to Contribute to us or want to have 15k+ Audience read your Article ? Or Just want to make a strong Backlink?