We have a tall stack of technologies in use at ISL. There are GNU/Linux systems running in Amazon’s cloud plus a few languages coordinating with frameworks, platforms, and CMSs. Those communicate with database engines, web servers, memory caching systems, and more. Essentially, all that stuff works together to package a digital experience as HTML, CSS, and Javascript for consumption by you and your browser. Mmmm.
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.
The Result
With a touch of javascript, we trigger each logo’s animation and coordinate the trigger frequency with the animation durations so that the next logo is emerging past the previous one just as the previous one is peaking.
Here’s the result.
This was a CSS exercise. There are certainly improvements to be made and other technologies to consider. If you want to mess around with it, check out the codepen. Have fun!










