Pure CSS Marvel logo animationEach week I look through hundreds of Pens on CodePen, looking for what I feel is the best. Things I look for are creativity, innovation, simplicity, functionality, etc. Most weeks it's nearly impossible to pick just one Pen. This week, the favorite Pen happens to be a pure CSS Marvel logo animation by Gregor Adams.

The Pen

See the Pen Marvel Logo animation | pure CSS by Gregor Adams (@pixelass) on CodePen.

Why it's our favorite

As you probably know, this type of Pen has been created before. People love to recreate popular show/movie intros using only HTML and CSS. In fact, Gregor has created more than just the Marvel animation, like this Netflix intro for example. However, unlike most, this Pen is done really well, in a sense that it's almost exactly like the intro that it's based off of. That's no easy task considering the intro is pretty complex.

There are a couple things about this pen that blow my mind.

1. There is only one image used for the entire length of the animation!

2. Average page load time is under 2 seconds. (Including the added requests from CodePen)

3. There is roughly 250 lines of code including both CSS and HTML. (Granted that it uses Jade HTML & SCSS)


This is an amazing example of what can be done with just HTML and CSS. I'm sure many will agree that this is their favorite Pen of the week as well. If for whatever reason you don't like this Pen just check out Gregor's mustache and perhaps it will persuade you to think otherwise.

If you disagree or have something you'd like to say about it, let us know dropping a comment below.

Show Gregor some love!

About the Author:

@SANTINI_IO | NickSantini.com

Nick Santini is a web developer and college student from Louisville, KY. Aside from his work as a web developer, he is also the man behind SANTINI.IO, a blog dedicated to technology, web design/development, self improvement, and more.

Leave a comment

Comments and responses

  • 27 Oct 2015 21:57:52

    Great post.

  • anonymous:

    25 Nov 2015 11:54:00

    Woah! I’m really enjoying the template/theme of this website.
    It’s simple, yet effective. A lot of times it’s very hard to get that “perfect balance” between user friendliness and visual appeal.

    I must say that you’ve done a awesome job with this.
    Also, the blog loads extremely fast for me on Opera. Superb Blog!