We wanted the logo to be interesting, graphically involved and representative of what nth loop stood for — great design and cutting edge technology.
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.
These streamers are twisted clockwise, but a counter-clockwise twisted streamer draws an outline that looks like a ‘n’.
Rendering the 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!
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
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.
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