[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:

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)

  • NumericBiconditional@lemmy.worldOPEnglish
    1·
    1 year ago

    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>