When I first started using CodePen over a year ago I came across this fun animation challenge from SitePoint. The challenge is to recreate the simple animation of a GIF using only HTML and CSS. At the time I was excited because I was learning new things about CSS animation. I tried to create a solution using CSS animations, but never created a satisfactory solution

Today I began learning how to animate SVG’s by reading An Intro to SVG Animation with SMIL. The article was specifically about solving this very challenge coincidentally, but the final product still wasn’t quite right. After reducing the number of animation steps, correcting the colors, and refining the timing I had perfected it. I now present my own refined version that is nearly identical to the original GIF animation.

See the Pen SVG SMIL Colorful Animated Loader by Ryan Kerbs (@Aryck) on CodePen.

The animated loader on the left is the SVG I created, on the right is the original GIF.

While this may seem mundanely simple to celebrate, it is a triumph for the world of web developers. I am always excited to find new ways I can spice up web design with minimal impact on page performance.