I found this unique SVG on the new Zurb Foundation site and decided to animate it!

I have always been a huge fan of Zurb and Foundation. The most common thing I hear is that there is “too much overhead” etc etc. I won’t get into it now, but using the SASS version of Foundation can be extremely powerful and have very little overhead. It’s all a matter of how you use it! I will be writing about this and the new Foundation 6 for Sites in upcoming articles, so stay tuned! For now since this is my first official blog post on my personal site I decided to do a quick experiment in animating an SVG.

For now let’s look at the current newly designed homepage of Foundation

foundation_current_site

As you can see there is a really well designed vector background on the site. As soon as I saw this image I knew it had to be an SVG, I took a look at the source code and there it was, this amazing SVG. My next thought was I bet I could animate it, there is a comet just waiting to burn across the screen as well as some stars that could blink. So I took a quick stab at it!

You can take a look at all of the code on Codepen
foundation

Here is another animated SVG I did of the Grunt logo Codepen
grunt-logo