The Story of the Logo

Posted by .

We wanted the logo to be interesting, graphically involved and representative of what nth loop stood for — great design and cutting edge technology.

First try at creating a logo for nth loop, based on a möbius strip We went through a few iterations before finalizing our current logo. Our first thought was to use a Möbius strip and twist it to an n shape: we tried a few variations of this but weren’t too happy with any.

One day, Srivatsan had a flash of inspiration whilst doodling. The basic idea was to depict a section of a fan-folded paper, twisted helically, or more simply put, a section of the crepe paper streamers that decorate ceilings in parties.

Paper streamers

These streamers are twisted clockwise, but a counter-clockwise twisted streamer draws an outline that looks like a ‘n’.

Rendering the logo

A screenshot of the output of our processing script used to create the nth loop logo It was pretty easy to visualize, but tricky to implement. We fired up Processing, played-around with Helix equations, and after a few attempts created a sheet of paper, twisted through 180 degrees (something that’s probably impossible to do physically!).

Creating the fan-folds on the paper turned out to be harder than we expected since it’s not easy to visualize drawing shapes in the same way Processing does, but with some luck, we managed to crack it!

An animated version of the nth loop logo And here’s a neat little animation of our final attempt! Check out this gist if you want to re-create this!

The next step was the hard part — creating a static image to serve as the logo.

We exported the Processing sketch as a PDF with the raw shapes; imported the file into Illustrator and painstakingly coloured the individual paths, and finally tweaked the overall levels and added some layer styles in Photoshop, et voila!

Colouring & Animating the logo

Srivatsan made an interesting choice with the colours of the logo: the first and last colours only differ in the R component of RGB, ranging from 0 to 255. We realized that it would be pretty cool if we animated the colours using the CSS3 Hue-Rotation filter, as it would lead to a nice colour-step effect.

If you’re using Chrome or Safari 6, you should be able to see a very subtle transition in the colours of the logo on the top of this page. We initially used a simple CSS animation, but that lead to uncomfortably high CPU (& GPU) usage due to high frame rates and hardware acceleration. I switched to a JavaScript-based animation and settled on a frame rate of 5fps that barely bothers the CPU, even on old machines.

Note: The CSS3 Filter + Animation used around 60% CPU and 12% GPU on a Macbook Pro, whereas the JS version ended up using less than 5% CPU. This is interesting because moving forward, web designers will have to watch out for the ‘hardware footprint’ of the websites they design.


Image credit: Flickr

Comments are closed.