Creating an SVG logo for my projects

Potherca
Potherca
Nov 15, 2020 · 7 min read

Throughout the year, I create a lot of small proof-of-concept (POC) style projects. Usually these consist of a single file that outputs something to the browser.

As I did before, with the logo for the pipeline components project, I thought it might be a good idea to tell you about the process I went through when creating the logo all of my smaller projects now use.

Working on my latest POC, I got really annoyed about something rather silly. I kept seeing the errors in my logs for favicon not existing.

Image for post
Image for post
Crap, I made a mistake in that last code change! Oh, wait. It is just a missing icon. Nevermind.

Whenever the error popped up, I would think I had done something wrong whilst coding. But when looking closer at the error, it was just the icon missing. Again. It is only a minor distraction but when it happens often enough, it can become really annoying.

Now, I could have just created a simple favicon.ico file or used a random image in a <link> :

But there are several drawbacks to this. For the “just create a file” approach, the major drawback is having to create (or move) the file again for each new project. Another drawback, to either approach, is that the icon does not have anything to do with the project it is used for. Especially if the icon is re-used again and again, it will be impossible to distinguish between different projects.

So I set out to make a simple logo that could be used for my future POCs.

The challenges I set myself for the design were:

  1. It should be vector-based (i.e. SVG)
  2. It should look good both small (as a favicon) and large (as project logo)
  3. It should be as few bytes as possible, to save bandwidth and not interfere with load times
  4. It should be re-usable for each new project, with only a slight variation

For whatever reason, the origami paper crane appealed to me as a starting point.

Designer bird watching

Image for post
Image for post
Attribution free stock photo of an origami paper crane

So I started browsing the Noun Project for designs of paper cranes. Seeing all those images made me feel that the birds were somehow “too complete” to represent a POC.

Image for post
Image for post
origami bird by Bennett Kowald from the Noun Project

Then I came across a design created by Bennett Kowald which set me in mind of tangram.

Another piece of the puzzle

Image for post
Image for post
Image from page 21 of “War time occupations: a manual of simple constructive work suitable for home and school” (1918) by Florence Ordway Bean

In case you aren’t familiar with tangram, it is a tiling puzzle that consists of seven pieces (or “tiles”). The goal of the puzzle is to form a specific shape using all seven pieces, without any piece overlapping. Such a shape can be an abstract form, or a representation of an object, animal, or person.

There are more than five thousand different tangram problems that can be solved with only those seven pieces.

Image for post
Image for post
Some examples of shapes that represent a person

This gave me the idea to try and create a tangram version of the icon. I set to work using the online Tangram Builder on Mathigon. The tool is originally meant for kids, so it uses a rather garish color scheme, but the tool itself works really well.

The missing piece of the puzzle

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
My first, second, and third attempt to create a tangram figure representing a paper crane (colors not my choice)

It took a couple of tries to get the dimension right, but after some trial and error, I found a shape that pleased me. To have the right proportions, the final design only uses six of the seven tangram tiles. Having one piece of the puzzle missing felt somewhat fitting, as a POC is (usually) also incomplete. This facet of the design serves as a subtle emphasis on the concept of incompleteness.

With the overall design now complete, it was time to (re)create it as an SVG.

At first, I thought it might be enough to simply convert the PNG to SVG using vectorizer.io. Although the result was quite good, the underlying code felt rather verbose.

Generated SVG as created by vectorizer.io

Even after using SVGOMG to optimize the code, the SVG still seemed to contain more code than should be necessary for six simple geometric figures…

Optimized SVG as created by SVGOMG

So I typed out the SVG code myself.

Not counting white-space (which has been added for the sake of readability), the end result is a mere 276 characters (thus, 276 bytes).

Handcrafted SVG as created by the author

The final piece falls into place

Here’s some totally unrelated movie trivia for you: the American actress, Debra Winger, is most well known for her roles in “An Officer and a Gentleman” (1982), “Terms of Endearment” (1983), and “Shadowlands” (1993). For each of these movies, she was nominated for the Academy Award for Best Actress. She also had two roles in the 1982 hit movie by Steven Spielberg “E.T. the Extra-Terrestrial”. She appears as “Halloween Zombie” and as “Nurse with poodle”. Both roles, however, were unaccredited. 😳

There is a quote by her that comes to mind:

There are only seven stories in the universe. And I agree with that. But give me a great variation of those stories. ~ Debra Winger

Image for post
Image for post
Example of RYB (red-yellow-blue) by Mauricio Lucioni

At this point, my design fulfills three of the four challenges I set myself. The only thing that still needs to be done is:

4. It should be re-usable for each new project, with only a slight variation

For this, my idea was to use colors. I decided to limit the palette to only primary and secondary colors, combined with black and white.

I wanted bright colors (I might have gotten used to the kiddie color palette), but not too bright. The hue should also work on both a white and a black background. I played around with various color schemes using Coolors. It took several iterations to find what I was looking for.

The process I went through was, more or less, this:

Image for post
Image for post
Starting out with a “too bright” palette (on the far left), with various iterations, until I reached “just right” (on the far right)

With the color scheme finished, I used some magic (also know as Javascript) to create a couple of thousand variations of the design. I might write a post about that later. Anyway, with the output of the Javascript I created a web service that makes the SVG images available online:

https://favicon.potherca.workers.dev/

Now there is no longer the need to use a random, unrelated image. I can simply append the number of the POC to the web service URL and use that as a favicon:

One picture is worth a thousand birds

To give you an idea of what the images look like and how many there are, I have included an overview of all of them, in order.

Image for post
Image for post

The order of the images might seem rather random. However, to quote from Shakespeare's “The Tragedy of Hamlet, Prince of Denmark”:

Though this be madness, yet there is method in ’t.

You see, the order simply comes from sorting the images based on the underlying SVG code.

I hope you enjoyed this inside look. See you next time! 👋

Image for post
Image for post

Bootcamp

From idea to product, one pixel at a time.

Potherca

Written by

Potherca

Software Developer. Original PHPHooligan. Fix, connect, create. #PHP #JS #REST #QA #FUN Visit my LinkedIn profile for details https://linkedin.com/in/benpeachey

Bootcamp

Bootcamp

The best resources for designers starting in Design, UX, and UI. Bootcamp is a new product publication from the team behind the UX Collective (http://uxdesign.cc). To submit your story: hello@uxdesign.cc

Potherca

Written by

Potherca

Software Developer. Original PHPHooligan. Fix, connect, create. #PHP #JS #REST #QA #FUN Visit my LinkedIn profile for details https://linkedin.com/in/benpeachey

Bootcamp

Bootcamp

The best resources for designers starting in Design, UX, and UI. Bootcamp is a new product publication from the team behind the UX Collective (http://uxdesign.cc). To submit your story: hello@uxdesign.cc

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store