The avatar for @ankitak
Ankita Kamble
Published
Edited
Sep 7, 2021
Insert cell
# SVG Composition Assignment
Insert cell
md`Sol LeWitt was an iconic American artist whose work helped to establish both Minimalism and Conceptual Art. Some of his most integral pieces are his Wall Drawings, in which he explored variations of applying drawn lines onto walls. I have tried doing similar images in this assignment.`
Insert cell
md`Started with **vertical** lines to undertand coding first since its my first time. I took a while to understand the codes and they looked complicated intially but after figuring them it is fun to play with the x and y axis and with the colours!`
Insert cell
html`
<svg version="1.1" x="0px" y="0px" viewBox="0 0 500 200">
<style type="text/css">
.feeling-blue{fill:#377eb8;}
.zesty-orange{fill:#ff7f00;}
.lush-green{fill:#4daf4a;}
.hot-red{fill:#e41a1c;}
.dirty-yellow{fill:#ffff33;}
.purply-purple{fill:#00008b;}
.feeling-blue{fill:#377eb8;}
.zesty-orange{fill:#ff7f00;}


</style>

<rect x="50" y="50" class="feeling-blue" width="20" height="500"/>
<rect x="70" y="50" class="zesty-orange" width="20" height="500"/>
<rect x="90" y="50" class="lush-green" width="20" height="500"/>
<rect x="110" y="50" class="hot-red" width="20" height="500"/>
<rect x="130" y="50" class="dirty-yellow" width="20" height="500"/>
<rect x="150" y="50" class="purply-purple" width="20" height="500"/>
<rect x="170" y="50" class="feeling-blue" width="20" height="500"/>
<rect x="190" y="50" class="zesty-orange" width="20" height="500"/>


<text x="50" y="45" class="label">Hey there!</text>
</svg>

Insert cell
md`Tried the same colours with **horizontal** orientation.`
Insert cell
html`
<svg version="1.1" x="0px" y="0px" viewBox="0 0 500 200">
<style type="text/css">
.feeling-blue{fill:#377eb8;}
.zesty-orange{fill:#ff7f00;}
.lush-green{fill:#4daf4a;}
.hot-red{fill:#e41a1c;}
.dirty-yellow{fill:#ffff33;}
.purply-purple{fill:#00008b;}
.feeling-blue{fill:#377eb8;}
.zesty-orange{fill:#ff7f00;}


</style>

<rect x="50" y="50" class="feeling-blue" width="500" height="15"/>
<rect x="50" y="65" class="zesty-orange" width="500" height="15"/>
<rect x="50" y="80" class="lush-green" width="500" height="15"/>
<rect x="50" y="95" class="hot-red" width="500" height="15"/>
<rect x="50" y="110" class="dirty-yellow" width="500" height="15"/>
<rect x="50" y="125" class="purply-purple" width="500" height="15"/>
<rect x="50" y="140" class="feeling-blue" width="500" height="15"/>
<rect x="50" y="155" class="zesty-orange" width="500" height="15"/>

</svg>
Insert cell
md`Merged both the *orientations* and added borders to it for seperation.
I learnt the importance of **labeling the codes** in this. Since there were multiple codes it was difficult to understand which one is for what. Labelling made it easier and organised the codes. `
Insert cell
html`
<svg version="1.1" x="0px" y="0px" viewBox="0 0 400 200">
<style type="text/css">
.feeling-blue{fill:#377eb8;}
.zesty-orange{fill:#ff7f00;}
.lush-green{fill:#4daf4a;}
.hot-red{fill:#e41a1c;}
.dirty-yellow{fill:#ffff33;}
.purply-purple{fill:#00008b;}
.feeling-blue{fill:#377eb8;}
.zesty-orange{fill:#ff7f00;}


</style>
#for 1st vertical colored set
<rect x="40" y="50" class="black" width="10" height="90"/>
<rect x="50" y="50" class="feeling-blue" width="10" height="80"/>
<rect x="60" y="50" class="zesty-orange" width="10" height="80"/>
<rect x="70" y="50" class="lush-green" width="10" height="80"/>
<rect x="80" y="50" class="hot-red" width="10" height="80"/>
<rect x="90" y="50" class="dirty-yellow" width="10" height="80"/>
<rect x="100" y="50" class="purply-purple" width="10" height="80"/>
<rect x="110" y="50" class="feeling-blue" width="10" height="80"/>
<rect x="120" y="50" class="zesty-orange" width="10" height="80"/>
<rect x="130" y="50" class="black" width="10" height="80"/>

#for top black border
<rect x="40" y="40" class="black" width="100" height="10"/>
<rect x="140" y="40" class="black" width="110" height="10"/>
#for 2nd horizontal colored set
<rect x="140" y="50" class="feeling-blue" width="100" height="10"/>
<rect x="140" y="60" class="zesty-orange" width="100" height="10"/>
<rect x="140" y="70" class="lush-green" width="100" height="10"/>
<rect x="140" y="80" class="hot-red" width="100" height="10"/>
<rect x="140" y="90" class="dirty-yellow" width="100" height="10"/>
<rect x="140" y="100" class="purply-purple" width="100" height="10"/>
<rect x="140" y="110" class="feeling-blue" width="100" height="10"/>
<rect x="140" y="120" class="zesty-orange" width="100" height="10"/>
#for black vertical line
<rect x="240" y="50" class="black" width="10" height="90"/>
#for bottom black border
<rect x="50" y="130" class="black" width="190" height="10"/>

</svg>

Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more