Hacktoberfest 2019 Day 8

It's been a few days since I tried to contribute anything to the Hackoberfest this year, but I think I found a decent project for my last Pull Request: Super Tiny Icons.  It's a collection of logos made using Scalable Vector Graphics, with the goal of each logo being under 1 KB.

I originally was going to create the logo for Kotlin Programming Language, but then I saw this "issue" where they requested the Microsoft logo.  I'm surprised no one took it!  The latest Microsoft logo is just four squares with a solid color for each square!  With such a simple request, I forked the project and got to work!

I wanted to hand code it, because Inkscape made my shrub for Jedulz's game super huge.  It ended up being smaller to just export as a PNG.  Since I've never hand coded an SVG, I searched the internet and found this guide to hard coding an SVG.

After reading that guide, it seemed appropriate to download the the PNG of the Microsoft logo and take some point measurements of it.  I had to remove the text portion of it and leave just the four squares.  Here's my measurements of the logo (enlarged to jot down gaps):

Now I can see the three squares together are 72 px (wide) by 72 px (tall), with a gap of 4 px between the squares.  So, each square is 34 px by 34 px.  I then used the color selector on each square to tell me what was the exact hex value: the red square is #F25022, the green is #7FBA00, the blue is #00A4EF, and the orange is #FFB900.  Don't worry if the color looks different from the text I put on the picture, it's because I just used a similar but darker shade to make it show up against the white background.

I was reading the project's contribution guide.  I saw that I needed some SVG elements in the tag, they use stuff similar to HTML for hand coded SVG files.  Some of the attributes are pretty straight forward, but I was a bit confused on what was an aria-label.  An aria-label is just an alt text for an image, which you can see is just the capitalized name of the company/service that owns the logo.  I got that off of the other submitted logos.

Okay, now I just need to find a way to get the logo to fit within a rectangle with rx="50%" according to that guide.  Since the new rectangle is 512 px by 512 px, I know the center of that circle is at (256, 256).  Now, where should I start my first square and how much room will I have to draw the logo?

I figured this was a job for Pythagoras' Theorem!  Well, since we know the radius is 256 px, I made that my hypotenuse.  Since this a perfect circle, if I slice it up into eighths for the right triangle, the degrees should be 90 + 45 + 45 for a total of 180 degrees for a triangle.  Pythagoras' Theorem states A^2 + B^2 = C^2 with A and B being the two side lengths, and C is the hypotenuse.  Since our two angles have the same degree, that means A and B are equal.  The equation now becomes A^2 + A^2 = 256^2 = 2A^2.  Now we just solve for A: 2A^2 = 65536 -> A^2 = 32768 -> A = 181.019335...  That's not a very nice number, so I'm just going to use A = 181.  This means the box should be about 2A by 2A or 362 px by 362 px.  We'll need to upscale the logo since we are going from 72 px to 362 px.  Our gap was 4 px for the 72 px, so the gap is 4 px / 72 px or about 5.555...% of the original size.  This new gap is now 362 px * 5.555...% = 20.111...px.  I'm going to round to 20 px for our new gap; which will give us squares of 171 px by 171 px ( 362 px - 20 px = 342 px, then 342 px / 2 = 171 px).  Awesome, I'm glad that everything worked out to whole numbers!  Our starting point is 256 - 181 = 75 for both the x and y coordinates, or (75, 75).  That's the coordinate for the red square, the green to the right is (75 + 171 + 20 = 266, 75), the blue square below the red one is (75, 75 + 171 + 20 = 266), and the orange at the bottom right is (75 + 171 + 20 = 266, 75 + 171 + 20 = 266).

I changed the fill to black and the rx="50%" on the outer rectangle to test my SVG.  I think it looks perfect!  Time to reset the fill to white and the rx="15%", save it, and let's get that Pull Request created.  It's even only 435 bytes in size, so it fits their standards!  I had to do some edits to the README.md and an index.md file in their collection, but I managed to complete it for the new pull request.  Now, I'll just have to wait to see if they'll accept it.

Sweet!  That's four Pull Requests done!  Now I'll just have to wait for the Review Period to be over.  Hopefully, I'll be able to get my Hacktoberfest t-shirt!