SVG Animation web design

Animation & SVG In Web Design

Will Leffert Web & The Internet

It has been a while since I’ve posted anything about the web, or what I’m even working on, so while we all wait for Government Hold Music to go live on digital distribution, I’ve been working on learning more about SVG and animation in web design, and wanted to share with you some of my work.

First, I started experimenting with SVG & CSS animation. This was the easiest, as I’m very familiar with CSS. What I wasn’t familiar with, however, was the lack of compatibility in most browsers, and even the disturbing rendering differences between major browsers. That first link was based on some animation I saw on Codepen by Massimo, but I added some extra bits to make things more interesting. My favorite aspect is the randomization of the colors of the polys in the SVG art, creating a slightly different visual each time.

The next biggest hassle, besides the compatibility, is with SVG itself. The whole box sizing and positioning made ZERO sense to me. Eventually, I got it “working”, but I still wasn’t quite happy. Of course, part of the issue was how I was creating my SVG art (in Illustrator CS2; I don’t use Illustrator enough to justify upgrading). I learned, finally, to just build my boxes to be the exact dimensions of my SVG art, and have good responsive scaling code saved that’ll apply to a variety of situations.

After the first test, I decided to play with an animation library. After doing some research, I felt like Velocity.js would fit the bill for what I wanted.

I opted to stick with the same art, and you can see the results here. You can also snag my code for this over at Codepen. I went with a different animation style, too, and was fairly happy with the results.

After that, it was time to move on to doing something I will actually use.

While there are rendering differences across the various browsers, it is still perfectly usable on all modern browsers, and shows the direction I’m going with my next website design. Take a look here.

That will be the new splash page for classicwfl.com; It is fully responsive, and meets the goals I’ve set for my next website design: No actual images will be used in the art. It’ll be 100% HTML/CSS/JS/SVG.

I’ve really been lacking in clever stuff over the past few years on my own website. Nothing has quite captured me like my ReLit design. That one got me some attention from Smashing Magazine, as well as features on numerous design inspiration sites. Part of it is the fact that I do website design work nearly every day, and devote my attention to my clients. As well, I’ve got so many other projects going on, I rarely ¬†have the time to just sit and screw around.

You’ll hopefully see a new website design on here within the next week. Until then, enjoy!