The WebPlatform.org logo, redone in SVG. Why? Because web platform. Also, it looks great on Retina displays, in print, and blown up in talk slides. And the text is selectable and indexable for search. And you can use the Bitter web font. And you can animate it, or add interaction, or whatever. And, well, why not?
Last active
February 9, 2016 01:39
-
-
Save mbostock/3853405 to your computer and use it in GitHub Desktop.
WebPlatform.org SVG Logo
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: gpl-3.0 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| @import url(http://fonts.googleapis.com/css?family=Bitter:700); | |
| svg { | |
| width: 960px; | |
| height: 460px; | |
| margin-top: 40px; | |
| } | |
| .orange { fill: #f89c20 } | |
| .orange-red { fill: #d02e27; } | |
| .red { fill: #e54e26; } | |
| .red-purple { fill: #7f1333; } | |
| .purple { fill: #694d9f; } | |
| .purple-cyan { fill: #263c81; } | |
| .cyan { fill: #2eb3c4; } | |
| .gray { fill: #474747; } | |
| .lightgray { fill: #a3a3a3; } | |
| </style> | |
| <svg viewBox="0 0 190 172" width="190" height="172"> | |
| <defs> | |
| <path id="line-long" d="m-15.5,0v85a15.5,15.5 0 0 0 31,0v-85a15.5,15.5 0 0 0 -31,0zm9,0a6.5,6.5 0 0,0 13,0a6.5,6.5 0 0,0 -13,0zm0,85a6.5,6.5 0 0,0 13,0a6.5,6.5 0 0,0 -13,0z" fill-rule="evenodd"></path> | |
| <path id="line-short" d="m-15.5,0v60.81118318204309a15.5,15.5 0 0 0 31,0v-60.81118318204309a15.5,15.5 0 0 0 -31,0zm9,0a6.5,6.5 0 0,0 13,0a6.5,6.5 0 0,0 -13,0zm0,60.81118318204309a6.5,6.5 0 0,0 13,0a6.5,6.5 0 0,0 -13,0z" fill-rule="evenodd"></path> | |
| <clipPath id="clip-orange-red"><use transform="translate(52,19)" xlink:href="#line-long"></use></clipPath> | |
| <clipPath id="clip-red-purple"><use transform="translate(52,104)rotate(-135)" xlink:href="#line-short"></use></clipPath> | |
| <clipPath id="clip-purple-cyan"><use transform="translate(138,19)" xlink:href="#line-long"></use></clipPath> | |
| </defs> | |
| <g transform="translate(-.5,-.5)"> | |
| <use transform="translate(52,19)" xlink:href="#line-long" class="orange"></use> | |
| <use transform="translate(52,104)rotate(-135)" xlink:href="#line-short" class="red"></use> | |
| <use transform="translate(138,19)" xlink:href="#line-long" class="cyan"></use> | |
| <use transform="translate(138,104)rotate(135)" xlink:href="#line-short" class="purple"></use> | |
| <g clip-path="url(#clip-orange-red)"><use transform="translate(52,104)rotate(-135)" xlink:href="#line-short" class="orange-red"></use></g> | |
| <g clip-path="url(#clip-red-purple)"><use transform="translate(138,104)rotate(135)" xlink:href="#line-short" class="red-purple"></use></g> | |
| <g clip-path="url(#clip-purple-cyan)"><use transform="translate(138,104)rotate(135)" xlink:href="#line-short" class="purple-cyan"></use></g> | |
| <text x="95" y="150" text-anchor="middle" font-family="Bitter" font-size="20" font-weight="bold" class="gray">WebPlatform<tspan class="lightgray">.org</tspan></text> | |
| </g> | |
| </svg> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
orange: ⟨52, 19⟩, ⟨52, 104⟩
red: ⟨52, 104⟩, ⟨95, 61⟩
purple: ⟨95, 61⟩, ⟨138, 104⟩
cyan: ⟨138, 104⟩, ⟨138, 19⟩
The longs links are 85px (in view coordinates), separated by 138 - 52 = 43px. The short links are at ±45º, and so represent vectors ⟨43px, ±43px⟩, giving a length of 43 * √2 = 60.8112…