interact.js is a javascript project that I started for responding to single and multi-pointer drags and gestures. The logo for the project is this:

The static graphics were created in Inkscape and then animated manually with SMIL.

Designing in Inkscape

I started with the idea of “interact.js” written plainly with a dotted line joining the dots of the “i” and “j”. This was boring so I thought about making the line look a bit like something from an ECG. That wasn’t great either but I liked the angles in the lines I was drawing and decided that I would use the letter delta (Δ) since dragging is all about deltas.

I tried a few things including making incomplete, tessellating delta symbols with both the “a” and “c” but that really wasn’t great. Finally, I removed the dotted line and replaced only the “a” with a regular looking “Δ”. I liked this because it could easily be read as “interact.js” and the Δ was roughly in the middle.

Next, I adjusted the kerning of all the characters so that the inner triangle of the Δ was right in the middle. Pleased was I. However, I wouldn’t be satisfied until it was nicely animated.

Animating in Vim

I tidied the markup manually and moved the Δ into a <defs> element and referenced it in <use> elements then brought the regular text to the front of the drawing and made it white. The Δs inherit their fill-color from the <svg> root element whose fill-color is animated from blue to green to reddish-orange and to blue again.

<animate id="colors"
    attributeName="fill"
    values="#29e;#29e;#4e4;#4e4;#f40;#f40;#29e;#29e"
    dur="16s"
    repeatCount="indefinite"/>

One Δ remains fixed in the middle while the other three have two animations each – one to change their scale and another to fade in/out.

<use x="0" y="0" transform="translate(255.81,65.6775)" opacity="0" xlink:href="#a-delta">
     <animateTransform attributeName="transform" 
         attributeType="XML"
         type="scale" 
         values="1; 25"
         dur="10s"
         additive="sum"
         repeatCount="indefinite"/>
     <animate attributeName="opacity"
        values="1; 0"
        dur="10s"
        repeatCount="indefinite"/>
</use>

Two of the three animated Δs start at full opacity and fade out while scaling up from 1 to 25 in 10 seconds and from 0 to 15 in 7 seconds. The other fades in and then out while scaling down from 15 to 1 in 13 seconds.

The different parameters of the animations and the asymmetry of the Δ result in a hypnotic, “parallaxy” look which I’m very happy with. On the project homepage, I placed the animated logo in front of a black background so that the text can be read easily with or without the animation. The animated logo also sits proudly in the project’s README on Github with a white background.