Sitepoint posed a challenge to recreate this gif in code. Read about SMIL in my Codepen blog: codepen.io/noahblon/blog/an-intro-to-svg-animation-with-smil
Linear vs. Paced vs. Discrete timing functions for multiple values in an animation.
An SVG animation for Canada 150th anniversary's project with the Globe and Mail. The animation was paired with a short fiction on the invention of the foghorn in foggy Atlantic Canada in the 19th century.
Read about SMIL on my Codepen blog: codepen.io/noahblon/blog/an-intro-to-svg-animation-with-smil
SVG animation with SMIL.
Shame IE/EDGE doesn't care for SMIL. I dig it. Something nice about inserting an svg and not linking it up to CSS or JS.
Expand the window to make the map larger/more readable. This is an isometric projection of a map of the cities that make up Silicon Valley. It is almost pure SVG and SMIL (there's a tiny bit of CSS to easily change colors on hover). The goal was to demonstrate how SVG, SMIL animation and isometric projection can be used together to tell a story with data. Mouseover a city and it responds by floating upward, changing color and displaying its name. An info box appears at the left displaying information about the city. As a bonus, if you quickly move your cursor back and forth over the cities you can even simulate one of our famous earthquakes. Note: the animations will not work in Internet Explorer because Microsoft doesn't support SMIL. All other major modern Web browsers work fine.
SMIL is on it's way out.
So this is probably a salute to it and to what it could have been.
UPDATE: CSS animations work in Edge.
CSS animations don't work for this in IE and neither do SMIL animations. So I'm using JS to change the value for each frame.
SVG text animated with SMIL. And me playing around with clippath and gradients.
Just added some slights SMIL animations to the SVG tree of the CSSConf 2014 website
Need to know how to enable it? Go here.