In my Smashing Toronto talk, I'll be live coding an SVG animation from start to finish. Here's the repo that houses the base materials, and any further references for things we don't have time to cover. 🎨 💻
📺 See the completed demo here! https://codepen.io/sdras/pen/eKLeao/
- Codepen-safe versions of the GSAP Plugins
- Codepen debugger chrome extension
- Google image search, reuse with modification example
- Adobe Illustrator (this is paid, but inkscape is free)
- SVGOMG, an optimizer for SVG
- SVG Path Builder from Anthony Dugois
- Optimization techniques in my article High Performance SVGS
- Heather Migliorisi's article on Accessible SVGs
- I wrote an O'Reilly book on SVG Animations
- Chris Coyier wrote an A Book Apart book on SVG in general and it's very easy to read
- Sara Soueidan has a ton of articles on her site
- I have a Frontend Masters course on SVG Animation if video is your jam. I keep a repo of free materials up to date here.
- Val Head and I give web animation workshops.
