• Home
  • -
  • Animated Logos

Animated Logos

Here's a quick overview/tutorial of how I did this logo for Multi-Dimensional:

See the Pen Multi-Dimensional Games Logo All Dims by Adrian Lopez-Mobilia (@alomo) on CodePen.

Obviously, you can look at the code in the widget above, so I won't go into too much detail about that. Here's the overview of the design process:

  • We knew we wanted to use the hypercube for the logo, and
  • We knew we wanted to animate the evolution of the logo through all dimensions.

Whenever I animate something, I use GSAP -- which is a fantastic JavaScript library for animation. It supports animated SVGs really well.

We designed the final SVG -- the hypercube -- as a group of four separate cube shapes. If you look closely, you can see the different cubes. Here's a codepen with the logo if it only had one cube (click "Rerun" to see it repeat):

See the Pen Multi-Dimensional Games Logo All Dims by stephen foster (@stephenfoster) on CodePen.

Repeating this for each of the "sub-cubes" in the hypercube gives the expansion effect at the end.

We added an SVG gradient mask and an animated hue rotate just for fun.