04 september 2015

Google logo in svg?

How Google's new logo is just 305 bytes?
By Nitin kumar

Zelf online svg code uitproberen kan via deze pagina.

<svg height="200" width="400" xmlns="http://www.w3.org/2000/svg"><circle cx="100" cy="100" fill="#4885ed" r="100"></circle><circle cx="100" cy="100" fill="#ffffff" r="70"></circle><rect fill="#ffffff" height="78" transform="rotate(-40 166,67)" width="99" x="117" y="27"></rect><rect fill="#4885ed" height="30" width="88" x="111" y="87"></rect></svg>



Hieronder mijn nieuwe logo als code:
<svg height="130" width="250" xmlns="http://www.w3.org/2000/svg"><rect fill="#db3236" height="30" width="100" x="0" y="0" /><rect fill="#db3236" height="130" width="30" x="35" y="0" /><rect fill="#4885ed" height="130" width="30" x="220" y="0" /><rect fill="#3cba54" height="80" transform="rotate(+45)" width="30" x="156" y="-156" /><rect fill="#FBBC05" height="80" transform="rotate(-45)" width="30" x="76" y="106" /><rect fill="#4885ed" height="130" width="30" x="120" y="0" /></svg>



En hier als plaatje. Daarbij zie je duidelijk dat het niet uitmaakt hoe groot of klein je het plaatje weergeeft, het blijft superstrak!


Na een avondje spelen vind ik dit best wel cool!



En dat alles dankzij deze tutorial.

Geen opmerkingen: