Recently, I took some time to experiment with CSS animations and thought it’d be fun to apply my findings to the ISL logo, which, thanks to the incredible design team here, already provides a fun geometry and color set to work with. Take a look at what I came up with:
Building Letters from the Inside Out
I have circles in mind for this experiment. Maybe it’s a desire to balance out the logo’s sharp corners, or maybe it’s just carryover excitement from the last time I used them to find popular Instagram users. Circles are awesome. Their influence will be obvious when we start rotating the logo later on, but they’re present along the way helping to make sense of angles and edge lengths.
We can break the logo down to basic shapes and use HTML and CSS to create those shapes in the browser. By starting with the ‘S’ we’re less constrained by the other components, and after it’s complete we can build out from there.
The shaded rectangles represent areas we can easily create by defining a background color, height, and width to HTML divs. We’ll make the curved segments of the ‘S’ by extending the shaded areas into the highlighted portions and rounding one of the corners with the CSS property border-radius.
The ‘I’ is much simpler to complete. It just needs one tall shaded rectangle and a pseudo-element that we absolutely position with zero height and width, and colored borders that overflow its dimensionless self. Ya.
Our final letter, ‘L’, is more or less the same as the ‘I’, only we tack on an additional rectangle to complete the base. The base may be a bit stubby, but I like how the dimensions are working out so onward!
Cutting the Background
Now that the letters are complete, it’s time to tackle the background. We draw a dashed enclosing rectangle around the letters and measure one and a half units of margin to the background’s perimeter. That looks about right.
Next we highlight on the rectangle two corners that we’ll cut away from. These highlighted regions are conveniently positioned to make use of some of the known dimensions while we calculate how to trim so that we maintain the 1.5 units of spacing.
That’s that. Add some pink to pop, and we’ve got our logo.
Animating the Logo
The real fun begins here. Let’s consider what it would look like if we pivoted our logo around its bottom right corner.
That’s 20.625 degrees of rotation, ample range for a little animation with room left over…
Continuing the breakdown, we move on to color. We have the CMYK color model which provides four colors to start with, but we have so many degrees to play with so let’s add more. For each of the four colors, we tint towards white five times to yield the spectrum here.
Now for each of these colors, let’s create the logo’s hexagonal background filled with that color. Conceptually, we stack them all and have a deck of twenty-four logos to work with.
Let’s make each one rotate such that we get the forward tilting effect shown earlier, and let’s also have each successive background rotate just a bit further than the last one to create something of a flare. The first one will rotate 20.625 degrees, the next will rotate 1.875 degrees more, the next an additional 1.875 degrees, and so on. These rotations will be the peaks for their respective logos. Once a peak is reached, we’ll rewind the logo back to its starting point returning the cards to their original stacking.
If we froze each logo at the peak of its animation, we’d get the following figures. The first shows only the black tints, and the second shows the full set of colors.
That looks cool, but I’m not aiming to have them all move in unison. It should feel livelier if each logo, while related to the movement of its neighbors, has its own more independent motion.
Here’s the result.