I know I know, It’s super bowl Sunday. I should be baking delicious treats and getting ready to go watch the game (who’s playing again?). Instead, I’m on the precipice of a big move (new apartment, yay!) so instead I’ve decided to spend my Sunday playing with some fun CSS animations.

CSS animations are something that I’ve always understood, but it’s the kind of understanding that doesn’t necessarily make sense until you actually make it work (kinda backwards I know). Anyway, I decided to experiment with the new logo (SVG) I created to see if I could make a cool pre-loader for my website. It actually ended up being easier than I expected.

First I did a little research to find something similar to what I was looking for. I wanted to draw out the individual lines for my logo… something like this:


And, with the help of CSS Tricks and this article, I came up with this: