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" />
</sample>
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!
