is a creative exploration into the use of SVG (Scalable Vector Graphics) to produce dynamic, programmable art pieces. The art piece included in this project is designed with simple geometric shapes and colors that aim to provide a visually appealing digital experience.
Here's a basic example of the SVG art generated by this project. The SVG code and its rendered image are shown side by side for comparison.
<svg viewBox="0 0 320 320" xmlns="http://www.w3.org/2000/svg">
<rect width="320" height="320" fill="#121212"/>
<text
x="160"
y="155"
font-family="Arial, sans-serif"
font-weight="bold"
font-size="40"
text-anchor="middle"
>
<tspan x="164" dy="0" fill="#00ffff">◵◵</tspan>
<tspan x="152" dy="28" fill="#FCE74C">⊞</tspan>
<tspan x="176" dy="0" fill="#FCE74C">⊞</tspan>
<tspan x="190" dy="-35" fill="#7f766d">*</tspan>
</text>
</svg> |
|
For a more complex example, the following SVG includes multiple geometric shapes and layers. Observe how SVG elements are combined to create a composite visual effect.
<svg viewBox="0 0 320 320" xmlns="http://www.w3.org/2000/svg">
<rect width="320" height="320" fill="#ffffff"/>
<rect x="100" y="137.5" width="120" height="45" fill="#06a406"/>
<text
x="160"
y="155"
font-family="Arial"
font-weight="bold"
font-size="42"
text-anchor="middle"
>
<tspan x="155" dy="7" fill="#111111">■</tspan>
<tspan x="190" dy="0" fill="#ffffff">■</tspan>
<tspan x="180" dy="0" fill="#ffffff">■</tspan>
<tspan x="210" dy="0" fill="#111111">■</tspan>
<tspan x="135" dy="0" fill="#ffffff">■</tspan>
<tspan x="126" dy="0" fill="#ffffff">■</tspan>
<tspan x="200" dy="18" fill="#D80404">—</tspan>
<tspan x="130" dy="0" fill="#D80404">—</tspan>
<tspan x="165" dy="0" fill="#D80404">—</tspan>
<tspan x="200" dy="5" fill="#D80404">—</tspan>
<tspan x="130" dy="0" fill="#D80404">—</tspan>
<tspan x="166" dy="0" fill="#D80404">—</tspan>
</text>
</svg> |
|