https://github.com/sdras/livecode-svganimation

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.
https://github.com/sdras/livecode-svganimation

livecode smashingconf svg svg-animation svg-paths toronto vue

Last synced: 7 days ago
JSON representation

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.

• Host: GitHub
• URL: https://github.com/sdras/livecode-svganimation
• Owner: sdras
• License: mit
• Created: 2018-06-15T19:11:07.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-06-29T22:10:25.000Z (over 6 years ago)
• Last Synced: 2024-10-11T15:45:26.890Z (23 days ago)
• Topics: livecode, smashingconf, svg, svg-animation, svg-paths, toronto, vue
• Language: JavaScript
• Size: 6.49 MB
• Stars: 95
• Watchers: 8
• Forks: 15
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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/](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](http://codepen.io/GreenSock/pen/OPqpRJ)

- Codepen debugger [chrome extension](https://chrome.google.com/webstore/detail/codopen/agnkphdgffianchpipdbkeaclfbobaak)

- Google image search, reuse with modification [example](https://www.google.com/search?q=thing&tbm=isch&source=lnt&tbs=sur:fmc&sa=X&ved=0ahUKEwjo3bL8utbbAhUM44MKHcH2BgwQpwUIIA&biw=1289&bih=1209&dpr=1)

- Adobe Illustrator ([this is paid](https://www.adobe.com/products/illustrator.html), but [inkscape is free](https://inkscape.org/en/))

- SVGOMG, an [optimizer for SVG](https://jakearchibald.github.io/svgomg/)

- SVG Path Builder from [Anthony Dugois](https://codepen.io/anthonydugois/full/mewdyZ)

## Further reading and resources that we probably don't have time for 📓

- Optimization techniques in my article [High Performance SVGS](https://css-tricks.com/high-performance-svgs/)

- Heather Migliorisi's article on [Accessible SVGs](https://css-tricks.com/accessible-svgs/)

- I wrote an O'Reilly book on [SVG Animations](https://www.amazon.com/SVG-Animations-Implementations-Responsive-Animation-ebook/dp/B06XPVW2PP/)

- Chris Coyier wrote an [A Book Apart book](https://abookapart.com/products/practical-svg) on SVG in general and it's very easy to read

- Sara Soueidan has a ton of articles [on her site](https://www.sarasoueidan.com/blog/)

- I have a [Frontend Masters course on SVG Animation](https://frontendmasters.com/courses/svg-animation/) if video is your jam. I keep a [repo of free materials](https://github.com/sdras/svg-workshop) up to date here.

- Val Head and I give [web animation workshops](https://webanimationworkshops.com/).

# Left Shark! 👈🦈

![Left Shark](https://github.com/sdras/livecode-svganimation/raw/master/images/leftshark.gif)

## More info:

- [twitter](https://twitter.com/sarah_edo)