SVG Logos
Posted: 10 May 2022, 14:17
Hi, today i was playing around with svg in html and for that i choose to use the logo of espeasy.
While i was doing it i was asking myself what the four stripes and the dot actually mean?
I am happy to share my work with you. (When you want so embed them e.g. in css there are svg to css converter online) Here the code:
I also did a logo with text because i wanted something nice to put as a sticker on devices:
And than i got sentimental and carried away because of the colors
So here the retro stuff:
While i was doing it i was asking myself what the four stripes and the dot actually mean?
I am happy to share my work with you. (When you want so embed them e.g. in css there are svg to css converter online) Here the code:
Code: Select all
--------color on dark:
<svg width="44" height="44">
<rect x="0" y="0" rx="6" ry="6" width="44" height="44" style="fill:#3c3c3b" transform="rotate(0 14 20)"/>
<g transform="rotate(45 26 23)">
<rect x="4" y="15" rx="2" ry="2" width="4" height="20" style="fill:#25a843" />
<rect x="12" y="7.5" rx="2" ry="2" width="4" height="35" style="fill:#ffd103"/>
<rect x="20" y="0" rx="2" ry="2" width="4" height="50" style="fill:#f28d22" />
<rect x="28" y="7.5" rx="2" ry="2" width="4" height="35" style="fill:#e9493e"/>
<circle cx="41" cy="25" r="5" fill="white" />
</g>
</svg>
-------color transparent w stroke
<svg width="44" height="44">
<rect x="0" y="0" rx="6" ry="6" width="44" height="44" style="fill:none" transform="rotate(0 14 20)"/>
<g transform="rotate(45 26 23)">
<rect x="4" y="15" rx="2" ry="2" width="4" height="20" style="fill:#25a843" />
<rect x="12" y="7.5" rx="2" ry="2" width="4" height="35" style="fill:#ffd103"/>
<rect x="20" y="0" rx="2" ry="2" width="4" height="50" style="fill:#f28d22" />
<rect x="28" y="7.5" rx="2" ry="2" width="4" height="35" style="fill:#e9493e"/>
<circle cx="41" cy="25" r="5" fill="white" stroke="black" stroke-width=".1"/>
</g>
</svg>
---------blue on white:
<svg width="44" height="44">
<rect x="0" y="0" rx="6" ry="6" width="44" height="44" style="fill:white" transform="rotate(0 14 20)"/>
<g transform="rotate(45 26 23)">
<rect x="4" y="15" rx="2" ry="2" width="4" height="20" style="fill:#07D" />
<rect x="12" y="7.5" rx="2" ry="2" width="4" height="35" style="fill:#07D"/>
<rect x="20" y="0" rx="2" ry="2" width="4" height="50" style="fill:#07D" />
<rect x="28" y="7.5" rx="2" ry="2" width="4" height="35" style="fill:#07D"/>
<circle cx="41" cy="25" r="5" fill="#07D" />
</g>
</svg>
--------white on blue:
<svg width="44" height="44">
<rect x="0" y="0" rx="6" ry="6" width="44" height="44" style="fill:#07D" transform="rotate(0 14 20)"/>
<g transform="rotate(45 26 23)">
<rect x="4" y="15" rx="2" ry="2" width="4" height="20" style="fill:white" />
<rect x="12" y="7.5" rx="2" ry="2" width="4" height="35" style="fill:white"/>
<rect x="20" y="0" rx="2" ry="2" width="4" height="50" style="fill:white" />
<rect x="28" y="7.5" rx="2" ry="2" width="4" height="35" style="fill:white"/>
<circle cx="41" cy="25" r="5" fill="white" />
</g>
</svg>
---------blue on transparent:
<svg width="44" height="44">
<rect x="0" y="0" rx="6" ry="6" width="44" height="44" style="fill:none" transform="rotate(0 14 20)"/>
<g transform="rotate(45 26 23)">
<rect x="4" y="15" rx="2" ry="2" width="4" height="20" style="fill:#07D" />
<rect x="12" y="7.5" rx="2" ry="2" width="4" height="35" style="fill:#07D"/>
<rect x="20" y="0" rx="2" ry="2" width="4" height="50" style="fill:#07D" />
<rect x="28" y="7.5" rx="2" ry="2" width="4" height="35" style="fill:#07D"/>
<circle cx="41" cy="25" r="5" fill="#07D" />
</g>
</svg>
--------white on transparent:
<svg width="44" height="44">
<rect x="0" y="0" rx="6" ry="6" width="44" height="44" style="fill:none" transform="rotate(0 14 20)"/>
<g transform="rotate(45 26 23)">
<rect x="4" y="15" rx="2" ry="2" width="4" height="20" style="fill:white" />
<rect x="12" y="7.5" rx="2" ry="2" width="4" height="35" style="fill:white"/>
<rect x="20" y="0" rx="2" ry="2" width="4" height="50" style="fill:white" />
<rect x="28" y="7.5" rx="2" ry="2" width="4" height="35" style="fill:white"/>
<circle cx="41" cy="25" r="5" fill="white" />
</g>
</svg>
--------white on transparent (darkmode):
<svg width="44" height="44">
<rect x="0" y="0" rx="6" ry="6" width="44" height="44" style="fill:none" transform="rotate(0 14 20)"/>
<g transform="rotate(45 26 23)">
<rect x="4" y="15" rx="2" ry="2" width="4" height="20" style="fill:#dfdfdf" />
<rect x="12" y="7.5" rx="2" ry="2" width="4" height="35" style="fill:#dfdfdf"/>
<rect x="20" y="0" rx="2" ry="2" width="4" height="50" style="fill:#dfdfdf" />
<rect x="28" y="7.5" rx="2" ry="2" width="4" height="35" style="fill:#dfdfdf"/>
<circle cx="41" cy="25" r="5" fill="#dfdfdf" />
</g>
</svg>
And than i got sentimental and carried away because of the colors
So here the retro stuff: