Kirby

257 readers

15 users here now

Poyo!

Who's Kirby?

Kirby is the unstoppable puffball with an infinite appetite.

Staring in a pretty awesome series of games produced by HAL and published by Nintendo, Kirby is known for swallowing his enemies whole and copying their abilities.

Don't let his small stature and cute demeanor fool you! Kirby spends much of his time protecting his friends, planet, and food from demonic horrors that would otherwise threaten the entire universe.

Rules

No Sexual Content
Be Friendly and Inclusive - No slurs, "edgy" humor, shock images, etc.
No Drama - You can disagree while still keeping things civil.
No Artwork Theft - Directly link to the artist either as a top-level comment, in response to the automod prompt, or in the OP, itself. Do this as soon as you post!
Message the Moderators Before Advertising - You have to get permission before posting promotional content (such as Let's Plays, Unboxing Videos, Discord Servers, Etsy, etc.), even if you aren't the creator.
Always Use "Message the Mods" to Contact Mods - Don't message individual moderators directly unless you have reason to do so.

founded 1 year ago

MODERATORS

Winged_Hussar

elfilem (more polished version) (lemmy.world)

submitted 1 year ago* (last edited 1 year ago) by NumericBiconditional to c/kirby

1 comments fedilink hide all child comments

[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 are viewing a single comment's thread
view the rest of the comments

[–] NumericBiconditional 1 points 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>