It Was The Chad

(of course it was)

  • Home
  • Projects
  • Blog
  • Contact

Smilin’ SMIL Animation

If you came in through the front door of this site, you’ve already met my alter-ego, Smilin’ Chad. The animation was created using a combination of SVG graphics, SMIL animation, and jQuery.
Looks like this isn’t supported here. :(
Believe it or not, I searched for how to do this type of animation but couldn’t find anything like it on the whole entire web. So, who knows, perhaps I’m the first. And being the first, I decided to name my animation style: I call it “morphimation.” :)

What I did find in my searches were SMIL animations that morph a single path/shape (best example is this Batman logo morphimation), so I adapted that idea to animate an SVG image with many paths.

While jQuery is not really necessary for a simple morphimation like the Batman logo, my version is too complex to create all the SVG and SMIL attributes by hand. For that reason, I set it up so all I have to do is export an SVG file from my vector drawing program. Then I’m using jQuery to read in that file, parse it, create the inline SVG and its animate tags, and then populating those tags with values for each frame. Easy!

I cleaned up my code a bit and put it on Github in case anyone wanted to do something similar. I was actually going to clean it up a lot more and make it easier to reuse, but….

Well, dang it, I found out only after doing all this that SMIL is going the way of the HTML “font” tag — deprecated!! Oh noes! I don’t know how I missed this while I was working on the project, but, well, crap.

It was a good learning experience nonetheless. From what I’ve read, it doesn’t sound like there’s currently an alternative way to do this kind of animation. I’ll have to look into that further.

Oh yeah — I also added a mouse hover effect just for fun. Roll-over the animation with your mouse (sorry, no fun for touch screen users) to see what happens.

© 2022 · The Chad
Return to top of page

Copyright © 2022 · Author Pro Theme on Genesis Framework · WordPress · Log in