Twitter Logo Deconstructed Into Circles Using SVG

Jul 13th, 2012

I deconstructed the Twitter logo into its component circles using SVG (scalable vector graphics).

<?xml version="1.0" encoding="utf-8"?>  <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" id="jm3_twitter" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="150px" height="150px" viewBox="116.539 136.684 150 150" enable-background="new 116.539 136.684 150 150" xml:space="preserve"> <rect id="bg" fill="#FFFFFF" x="110" y="110" width="160" height="180"/> <circle id="body" fill="#27A9E1" cx="164.259" cy="186.723" r="85.256"/> <circle id="sub_bird_back" fill="#FFFFFF" cx="123.167" cy="196.479" r="62.167"/> <circle id="bottom_feather" fill="#26A9E1" cx="165.115" cy="214.938" r="30.449"/> <circle id="sub_mid_feather" fill="#FFFFFF" cx="140.652" cy="194.401" r="30.986"/> <circle id="mid_feather" fill="#27A9E1" cx="155.347" cy="194.096" r="30.291"/> <circle id="sub_top_feather" fill="#FFFFFF" cx="135.381" cy="167.788" r="30.158"/> <circle id="top_feather" fill="#27A9E1" cx="155.152" cy="174.901" r="29.486"/> <circle id="sub_wing" fill="#FFFFFF" cx="195.587" cy="105.065" r="84.839"/> <circle id="beak" fill="#27A9E1" cx="235.723" cy="156.557" r="29.717"/> <circle id="sub_beak" fill="#FFFFFF" cx="240.773" cy="121.185" r="51.717"/> <circle id="top_beak" fill="#27A9E1" cx="233.441" cy="146.433" r="29.334"/> <circle id="sub_top_beak" fill="#FFFFFF" cx="231.936" cy="112.892" r="51.63" /> <circle id="head" fill="#27A9E1" cx="219.723" cy="183.557" r="29.717"/> </svg>

Final result: smoooooth scaling!

For a scalable Twitter button for your website, check out the scalable CSS Twitter button I created:

Happy hacking.

The Technical Co-Founder

The jm3 guide to achieving technical startup success without losing your soul

Twitter Logo Deconstructed Into Circles Using SVG

Comments