- tl;dr
- Starting point: The logo as SVG
- The goal: A logo derived from rules
- Creating a rough SVG version
- Converting to clojure dali
- Refactoring to parameters and calculated values
- Half-way through towards first principles
- A closing rant: SVG sucks
tl;dr
We show the first steps towards reducing a logo to first principles, step-by-step. You can find the code examples in the algorithmic-metamorphant-logo github repo tag first-blog-article
.
Starting point: The logo as SVG
We start with our awesome metamorphant logo and put it on a grid with exactly 10 subdivisions.
Yes, you have seen it right. In its current form, the logo is not even 100% quadratic. Let’s not let this bother us - for now.
We will need this gridded logo as a starting point to manually create a simplified SVG.
The goal: A logo derived from rules
The current logo is a complex assembly of paths with precise vertex positions. This representation is far too complex and inflexible for playful use, e.g. animation.
From first sight you can recognize, that the logo is built from some simple building blocks and patterns. For example, all corners use the same arc. All lines have the same width. All dots are circular and have the same radius.
Designer Kazi Mohammed Erfan demonstrated in his 25 creative logos study how simple principles like the golden ratio yield beautiful and appealing logos. Our goal will be the opposite: We already have a great logo. We want to reverse-engineer its underlying principles. In the end, only a very limited number of parameters should enter the equation of generating the logo.
Creating a rough SVG version
As a first step, we want to create a manual SVG description of the logo. Precision does not matter. This exercise is about choosing and leveraging the right features of SVG to reveal the hidden structure in the logo.
For simplicity’s sake we choose a 1000x1000 coordinate system. This makes for an easy translation from the logo grid created above.
We start by translating the building blocks into SVG elements:
- The dots will be derived from the same named circle
#bubble
- All lines will be proper SVG paths
- The dots at the end of lines will be named markers
- The arcs on the lines will be represented using SVG path arc sections instead of curves
The result is a SVG picture that is structurally equivalent with our logo:
We are intentionally a bit sloppy here, so you can spot the difference between pseudo logo draft and real logo.
Converting to clojure dali
In order to generate this SVG from first principles, we need a more powerful language than plain SVG. We choose Clojure for that purpose, as it is simple, concise and powerful. Instead of creating the SVG directly using e.g. org.clojure/data.xml or clojure.xml we want a library in the spirit of hiccup, but for SVG. The closest we have found is dali.
First we will just be reproducing the SVG above faithfully from clojure code in hiccup-style syntax.
Let us create the SVG:
Surprise! It looks as before.
Refactoring to parameters and calculated values
As next step we take the existing design and by pure refactoring reduce it to the simple set of inputs:
- radius of the dots
- width of the lines
- position of the eye (x, y)
- position of the inner dot starting the outline (x, y)
- arc radius of the corners
- position of the inner dot starting the ear (y only, as x is same as the other inner dot)
- position of the bottom middle dot ending the ear line (x only)
We end up with something like:
Except the switch to userSpaceOnUse
absolute marker units, this was a pure refactoring. The result still looks the same:
What did we gain by this little exercise? A whole lot of flexibility! For example, we can play around with different values without having to adjust anything else.
E.g. putting in different values for dot radius:
or putting in different values for corner arc radius:
Half-way through towards first principles
During our journey in this article we created a first variant of an algorithmic metamorphant logo. Of course, we are not there, yet. There are still far too many input parameters. I envision
- deriving the line padding from the canvas size and line-width
- deriving the eye position and the inner dot positions from some proportion rules, potentially involving the golden ratio
- deriving the bottom middle dot position by some rule of proportion between the positions of the lower vertical line and the eye
- …
Once we have that, we can start to fine-tune our logo, maybe even optimise it beyond its current version. We will be able to animate it using pure SVG+CSS+SMIL tricks.
We will keep you updated.
A closing rant: SVG sucks
Modern browser natively supporting an open vector graphics format like SVG is a big step forward. However, while playing around with this little algorithmic graphics exercise I had to face once more just how insufficient SVG is. It is just a poor graphics language, when compared to other languages like PostScript. It also lacks established higher-level DSL tooling. Everyone having used either of PSTricks (my favorite), PGF/TikZ or Asymptote will agree.
Maybe for the future I will have to watch out for inspiration in other vector scripting DSL libraries like paper.js, PyX, Elm GraphicsSVG, Elm Collage or Quil. In the worst case I will have to create something like a SVGtricks library myself.
Post header background image by Evgeni Tcherkasski from Pixabay.