On Wednesday, 2 July 2014 at 08:00:59 UTC, Ola Fosheim Grøstad
wrote:
On Wednesday, 2 July 2014 at 07:44:14 UTC, w0rp wrote:
Thanks! Is there a chance you could upload the SVG somewhere I
can download it? I tried copy and pasting the XML into a file
and loading that, but I messed something up somewhere and it
came out looking very wrong.
My fault, it was late at night and I did a cut'n'paste from
emacs that retained the "\" at the line-wrapping. This should
work in your browser. You can tweak the location of the circles
using cx, cy, and stretch the "D" using scale(), and move it
using translate(). The viewBox should probably be redefined to
be tighter.
The cool thing about having it inlined is that you can animate
the colour of each element using CSS (like having the circles
fade in first).
<!DOCTYPE html>
<title>D logo test</title>
<div style="background:#800;padding:10px;">
<svg xmlns="http://www.w3.org/2000/svg"; version="1.1"
viewBox="0 0 36 25" style="fill:#fff;">
<circle cx="27.2" cy="8.7" r="5.8"/>
<circle cx="34.1" cy="2.4" r="1.9"/>
<path transform="scale(1 -1.04)translate(0 -31)" d="M
0.745,6.162 C 0.3725,6.162 0,6.534 0,6.907 L 0,29.255 C 0,29.63
0.37,30 0.745,30 L 10.057,30 C 21.6,30 26.445,24.04 26.45,17.92
26.45,11.8 21.59,6.17 10,6.16 L 0.74,6.16 z M 5.59,10.63
11.92,10.63 C 15.64,10.6 20.86,13.24 20.86,18.08 20.86,22.92
15.64,25.53 11.92,25.53 L 5.59,25.53 5.59,10.63 z"/>
</svg>
</div>
Ah, thank you. I think that looks pretty good.
I know what you're saying about drawing gradients being a bit
slow. I tried using a linear gradient in the background coming
out from the logo, so it looked a bit like light reflecting from
a Martian moon or something, but it very negatively impacted the
smoothness of scrolling through a page on every browser I tried.
Rasterising the logo to fit a gradient in like the current logo I
think is an acceptable option though. It stays at one fixed size
pretty much.
