elfilem (more polished version)
elfilem (more polished version)
[image: the lemmy logo, but with elfilin's eyes, cheek blushes, ear notch, and general colouration. still retains the original whiskers, ears (size-wise), and nose.]
here's the more polished version of elfilem that i promised! it was pretty fun to work on, and i'm quite proud of the final result. instead of just roughly eyeballing everything, i leveraged the power of code (i.e. wrote an svg file by hand) and used Precise Numbers™ to dictate the position and size of things.
seems like lemmy doesn't support uploading svg files, so instead i uploaded a png version. not sure if and how i'll share the original svg -- would certainly love to! i commented the code specifically so that others could get a better understanding of what i did to draw each thing.
edit: never mind, just pasted the svg source code into a comment below
list of notable changes from the original elfilem:
- eyes are now significantly higher up than they were originally
- cheek blushes are now larger, fully visible circles
- inner orange part of ears now extends fully downward to more accurately match elfilin's appearance
- eyes now have a dark blue outline
- various colours have been changed
created with the help of the following:
- notepad++
- this tutorial, along with google and stack overflow
- the same lemmy logo from wikipedia that i used last time -- only, instead of editing the file in an image editor, i simply used it as a reference this time around.
- wikirby and its elfilin pictures, particularly the merry magoland mask
this is the most effort i've put into a drawing in a long time. but i think the result is worth it! :)
edit: the white outline was lost in the background the first time i uploaded this. after some shenanigans on my end, here's a version that includes the white outline as it's supposed to!... unless you're on kbin apparently edit 2: made the new image properly spaced instead of "cramped" (cropped to have no extra space)
You're viewing a single thread.
original svg source code:
<!-- elfilem (more polished version) created by NumericBiconditional based on the lemmy logo and elfilin from kirby main sources: lemmy logo: https://upload.wikimedia.org/wikipedia/commons/e/ea/Lemmy_Logo.svg elfilin (krtdldx mask): https://wikirby.com/wiki/File:KRtDLD_Elfilin_Mask_artwork.png i learned how to write svg code specifically for this don't expect it to be idiomatic svg code --> <!-- we'll be working with a 1024x1024 canvas, just like the original image i got from wikipedia to make life slightly easier on me, i decided to make (0, 0) the center of the canvas and have up be the positive direction we have (-512, -512) as the bottom left corner and (512, 512) as the top right corner i tried to make shapes match up with the original image, to some extent. you can't see it in the final version of the code, but i was originally making this in a modified version of the original file. i would overlay the original image on top of my version with 50% opacity whenever i wanted to compare the two images to check accuracy. --> <!-- to use a gray background instead of a transparent one, add `style="background-color: #808080;"` to the svg tag or alternatively just edit the image in your favourite image editing program --> <svg version="1.1" width="1024" height="1024" xmlns="http://www.w3.org/2000/svg"> <g transform="translate(512 512) scale(1 -1)"> <defs> <!-- there's this weird double outline thing going on, and i dealt with that by drawing everything multiple times with outlines of different colours and thickness. --> <g id="ears"> <!-- elfilem's ears - the cyan rim is also implemented as an outline --> <!-- notched ear (his right, our left) i decided to implement this in truly one of the ways of all time. start with a circle of radius 5 centered at the origin. from (0, -5) to (-3, 4) and from (3, 4) to (0, -5), use the arc of the circle. but from (-3, 4) to (3, 4), flip the arc of the circle upside down to create the ear notch. and then scale, translate, and rotate the circle into an ear. oh yeah and i intentionally chose a circle of radius 5 so that i could work with 3-4-5 right triangles and avoid headaches with the coordinate system --> <path d=" M 0 -5 A 5 5 0 0 0 -3 4 A 5 5 0 0 1 3 4 A 5 5 0 0 0 0 -5 " fill="#ffc080" vector-effect="non-scaling-stroke" transform="rotate(60 -320 136) translate(-320 136) scale(17.6 21.6)"/> <!-- normal ear (his left, our right) similar to the notched ear case but we can simply use the circle of radius 5 without doing any flippy business --> <circle cx="0" cy="0" r="5" fill="#ffc080" vector-effect="non-scaling-stroke" transform="rotate(-60 320 136) translate(320 136) scale(17.6 21.6)"/> </g> <g id="main"> <!-- the rest of elfilem --> <!-- head modelled as two semicircles, the top one slightly more "flat" than the bottom one to approximate the shape of the original lemmy head --> <path d=" M -288 0 A 288 216 0 0 0 288 0 M -288 0 A 288 280 0 0 1 288 0 " fill="#80ffff"/> <!-- eyes moved way up from the original image, and also stretched out into ovals. i think it still preserves the "lemminess" of the original image, though tried experimenting with a gradient effect for the white part, but ultimately that didn't work out --> <!-- eyes - outer blue part --> <ellipse cx="-112" cy="0" rx="32" ry="64" fill="#4080ff" stroke="#0040c0" stroke-width="16"/> <ellipse cx="112" cy="0" rx="32" ry="64" fill="#4080ff" stroke="#0040c0" stroke-width="16"/> <!-- eyes - inner white part --> <ellipse cx="-112" cy="24" rx="16" ry="32" fill="#ffffff" stroke="transparent"/> <ellipse cx="112" cy="24" rx="16" ry="32" fill="#ffffff" stroke="transparent"/> <!-- cheek blushes ~~(the most important part of a chimchila)~~ --> <circle cx="-176" cy="-128" r="32" fill="#ffc0c0" stroke="transparent"/> <circle cx="176" cy="-128" r="32" fill="#ffc0c0" stroke="transparent"/> <!-- nose --> <ellipse cx="0" cy="-248" rx="72" ry="72" fill="#ff8040"/> <!-- whiskers --> <g stroke-linecap="round"> <line x1="-240" y1="-160" x2="-336" y2="-200"/> <line x1="-176" y1="-232" x2="-224" y2="-304"/> <line x1="176" y1="-232" x2="224" y2="-304"/> <line x1="240" y1="-160" x2="336" y2="-200"/> </g> </g> </defs> <!-- putting it all together there's a specific order to do everything in it's a bit of a weird order because of what needs to be in front and what needs to be behind other stuff --> <use href="#ears" stroke="#ffffff" stroke-width="105"/> <!-- ears with white outline --> <use href="#main" stroke="#ffffff" stroke-width="56"/> <!-- everything else with white outline --> <use href="#ears" stroke="#000000" stroke-width="77"/> <!-- ears with black outline --> <use href="#ears" stroke="#80ffff" stroke-width="21"/> <!-- ear rims (cyan outline) --> <use href="#main" stroke="#000000" stroke-width="28"/> <!-- everything else with black outline --> </g> </svg>