Sid's Assorted Stuff - [Sep 23] - Daryil Clan Logo, Take 2

[Sid]

Whatever art-related stuff I do when I'm not in the mood to resume "Walking down the Unseen Path" (as right now since I had to delete half a chapter because my characters suddenly decided to drive the plot straight off a cliff)

LINKS

• An Archer's Tale (Part 1/1 since it's unlikely that I'll resume it)
• Daryil Clan Logo as SVG
• Daryil Clan Logo as SVG, Take 2

[Sid]

As mentioned in KBJ's thread, I recently looked into writing SVG by hand.

For those who don't know what SVG is, it's the acronym of "Scalable Vector Graphics", and it is just that: Vector-based images that can be scaled as you like without any loss of quality. The resolution is literally infinite, so you won't see ugly pixels no matter how far you "zoom" in. And best of all, many/most modern browsers understand at least the basics of SVG.

Now... writing SVG by hand can be an exercise in masochism since you don't have a graphical editor where you can wiggle points around with the mouse. Nuh-uh. You have to write all important coordinates into a text file. Having experience with general vector works definitely helped me getting into it. Thankfully, the actual syntax is fairly easy to comprehend, at least the basics.

My first try was the Daryil Clan logo, created by Tapewolf (and this post just barely missed his birthday since a few details delayed me more than I had expected).

The end result pleases me quite a bit, but see for yourself:
Original
SVG version, same size as original
SVG version, 300% size

Ironically, it was the gradient that puzzled me the most (at least initially). Thankfully, I managed to quasi-reproduce it after reading up a bit about how to do it. However it's the reason why this post comes a few hours later than expected.
And yes, I also have a pure-white version if you want.

[Tapewolf]

That is incredible.  You even seem to have reproduced the flaws.  For the original I was effectively using CSG subtraction of ellipses, so my version is less than accurate from Shadrok's original rendition.

And how the blazes did you do the glowy effect?

[Zedd]

Might help designing the d'Ombre clain logo still...Thats my mothers clain

[Sid]

That is incredible.  You even seem to have reproduced the flaws.  For the original I was effectively using CSG subtraction of ellipses, so my version is less than accurate from Shadrok's original rendition.

And how the blazes did you do the glowy effect?

Well, I only had the uploaded version as a template, so I aimed at reproducing it as accurately as possible. Still got a link to the original file? I could give that one a shot, too!

And the glow effect is the gradient that tripped me up:

SVG allows all shapes to have a filling color/pattern/whatever. So once I had defined a gradient (radial, white to yellow), I applied it to the shapes. Unfortunately, that led to all shapes having seperate gradients (with the center point always being the center of the shape instead of the image center).

It's possible that there are other ways, but in this case, I settled on a nice trick: A grey background rectangle, and on top of that a gradient-filled rectangle that is clipped to the exact shape of the logo (key term: "clipping path"), so the original shape definitions created a simple mask, so to speak. The nature of SVG (= being simple text files) came in handy here: I could simply move the entire shape info into a clipping path definition. </technical details>

[Tapewolf]

Well, I only had the uploaded version as a template, so I aimed at reproducing it as accurately as possible. Still got a link to the original file? I could give that one a shot, too!

Cool.  If you're happy to try it, here's the link from from his art thread:  http://i70.photobucket.com/albums/i100/shadrok1/clan.jpg

...on the right, third one down.  I removed the other bars of the fork to reduce complexity, and I'm happy enough for it to stay like that, with the basic shape from the Wiki version.  What I couldn't reproduce properly with the software and technique I was using were the curves on the external sections.

[Sid]

*squints* Didn't have any smaller references to work with, did you?
But yeah, I'll give it a whirl. The largest arcs of the main shape look pretty much the same as in the wiki version, right?

[Sid]

And here we go again.

Based on the new source, I started from scratch and created a new SVG version. It has more pointy stops (as opposed to rounder ends), and I had to take some artistic liberty with some elements. I think it was for the better, and a friend agreed, but Your Mileage May Vary.

The weird fork was included (any and all shapes can be modified/removed/moved, though), and let me just say one thing: Trying to mirror a shape along a diagonal line is NOT FUN in raw SVG. I ended up doing a translation, rotation, and scaling of a copy of the original shape, and here is a fun fact: These actions work their mojo on the coordinate system. So once you rotate a shape, that shape's x/y axes are anywhere but where you expect them to be (which apparently affects even the transformations you do right afterwards).

As usual, multiple versions simply because I can:
Roughly the size of the first SVG
Double size
Normal size, rotated slightly

The rotated version exists simply because the source is aligned the same way. I prefer the normal alignment, but I may be biased because I spent a good time staring at that version while working on it.

There are still one or two minor points where a curve has a small bump in it, but aside from fixing those (and whatever alterations Tape would prefer, such as rounded ends or replacing/changing the fork), I'm calling it a day, I think.

[Zedd]

Not everyone here can view SVG files...Might be best you show it in PNG

[Sid]

Not everyone here can view SVG files...Might be best you show it in PNG

Well, this sort of defeats the purpose of having SVG files (), but for the sake of compatibility, here are the 300% version of the first logo and the 200% version of the second one (based on Firefox screenshots):
First one
Second one

[Zedd]

Neat

[Tapewolf]

As mentioned in KBJ's thread, I recently looked into writing SVG by hand.

By hand?  Not with Inkscape or anything?  Good grief.

My first try was the Daryil Clan logo, created by Tapewolf (and this post just barely missed his birthday since a few details delayed me more than I had expected).

Heh... well, as they say, it's the thought that counts

I might point out that it's Shadrok's creation which I subsequently adopted, not mine...

The new version is a good rendition of Shadrok's original sketch.  I think I might fuse the two versions, since there are some things I prefer in the first one... and it's easier to draw without the full fork

Thanks again...

Zedd, I'd be curious what you're using that doesn't support SVG...

[Sid]

As mentioned in KBJ's thread, I recently looked into writing SVG by hand.

By hand?  Not with Inkscape or anything?  Good grief.

Well, the point of the exercise was to understand the inner workings of the format. I had been toying with the possibility of generating things like flowcharts or graphs automatically via Javascript/PHP whatever (for example as the result of data read by a bot), so it was necessary. That, plus my masochistic side

The new version is a good rendition of Shadrok's original sketch.  I think I might fuse the two versions, since there are some things I prefer in the first one... and it's easier to draw without the full fork

Well, it's easy to modify or mix the two versions since they're roughly the same size and can be manipulated with a text editor (or Inkscape, even though I like the handcoded thing better due to lack of bloat). Knock yourself out or tell me what you had in mind if you don't feel like doing it yourself.

And I guess it's Explorer that doesn't support SVG natively (although there are plugins, I think).

[Tapewolf]

Well, it's easy to modify or mix the two versions since they're roughly the same size and can be manipulated with a text editor (or Inkscape, even though I like the handcoded thing better due to lack of bloat). Knock yourself out or tell me what you had in mind if you don't feel like doing it yourself.

Nah, it's been years since I had a decent vector package and I need the practice so I'll do it myself.  Thanks for the offer, though

Anyway, as for KBJ, I never did find a proper reference for the Jyraneth clan, but the closest I can find is on her warp-aci's head:

http://i116.photobucket.com/albums/o15/Keaton_Mask/Scan-Xiaxi.jpg

...or see also the colour versions on her DA.

[Sid]

I think I once saw a version of that logo on a sketch... but not sure, and I also dunno if it's the current logo anyway. Unless something big happens, the next item in the SVG queue is the Cyra logo, using a blend of your recreation and a few comic appearances (such as 422 or 508).

But I think that will have to wait. I'm in a creative hole right now (note that recreating logos is not really "creative" in my eyes), and I wanna get out of it, so I might try to write something that I can genuinely enjoy. (Offer is still valid, though. Maintenance work is all part of the service )

[llearch n'n'daCorna]

You could work on Walking Down The Unseen Path (hint, hint) ;-]

Over to you, though. *grin*