livecode-svganimation
livecode-svganimation copied to clipboard
sdras
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 cove...
trafficstars
SVG Animation Live Code 😬
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/
Tools that I use or mention during the course of the talk 🛠
- 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
Further reading and resources that we probably don't have time for 📓
- 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.
Left Shark! 👈🦈
sdras