Edenspiekermann’s Kröller-Müller Museum animated logo

Edenspiekermann created a new marketing strategy, profile and brand identity for the Kröller-Müller Museum in the Netherlands. As a part of this they developed a dynamic typographic concept and logo using Kris Sowersby’s typeface ‘Karbon’ and brought it to life with the help of Cinema4D software.

Check out the project page on the Edenspiekermann site: edenspiekermann KM project page

Proof of concept

The idea here is to recreate the animated opening and closing of the logo box. Below is the original animation.

original animation

Examples

All there is to it is some markup, CSS animation with rotate3d and skew for the fake shadow.

Version 1

I'm using helvetica as I do not have ‘Karbon’. The shadow is fake as the original uses a light source in a different position than I can create with CSS and either box-shadow or the drop-shadow filter. So for the shadow I added extra markup.

At first I tried with :after to create the shadow, but I can't seem to manipulate it to the extend that it looks like the original.

hello

Version 2

For good measure here's a version transitioning through all the optional colours.

hello

Doesn't work in Safari 6 as it does not accept animation on elements created with :after pseudo selector. It would take another span element to get it to work in Safari, but it does work in Webkit's latest dev build.

Safari

hello

This version works in Safari 6 and iOS 6 by replacing the CSS :after generated content for the door with an empty span.

Letters

A test version for individual characters. Unfortunately the diagonal lines (on the A for example) are jagged.

Also on iOS 6 something is off, it looks like the blue background character is drawn twice. It is actually the text-shadow causing a vague outline.

A A A
B B B
C C C