https://gist.github.com/rgchris/3d94601e5f4d8193a7cff85d40fd2bb5

A further example of SVG/SMIL animation. This one gets a little complicated with keyframes for both attributes and transforms, but ultimately keeps up with its SVG/CSS equivalent.

(whale/animation by @peter)

Whale (Animated SVG Example)

Whale (Animated SVG Example). GitHub Gist: instantly share code, notes, and snippets.

Gist
@rgchris Very cool, Chris! Funny enough, the first animated icons I ever made used SMIL animations instead of CSS. It was very laborious, and when I heard that Chrome was ending SMIL support, I adopted CSS animations (that was many years ago, and not sure if they fully dropped SMIL). My biggest challenge with SMIL, aside from the few learning resources and less forgiving syntax (than CSS), was the lack of a timeline, overall speed adjustment, and other tools when orchestrating animations. It often took a day or two to animate one icon. At the time I resisted using JS, but the GreenSock animation framework has all the tools I was seeking, and more. For more complex animations, I think it's well worth the tradeoff. Anyway, it's great to see your excitement about this!