SVG: Conclusions (for now)
This series has barely begun to scratch the surface of what you can do with SVG. As much SVG as we've covered, We've barely scratched the surface.
There are things like the GSAP library that I deliberately did not cover because I wrote about it before and because I don't want to push yet another third party library into my codebase.
The list below shows links to tutorials and examples of things that I've either used as inspiration or would like to play with at a later time.
If you have comments, criticisms or ideas for further projects, feel free to contact me on twitter at elrond25.
I look forward to hearing from you :)
Links and resources #
Clipping and masks
- Compositing Digital Images, T. Porter and T. Duff. SIGGRAPH '84 Conference Proceedings, Association for Computing Machinery, Volume 18, Number 3, July 1984.
- Interactive Data Visualization: Animating the viewBox
- GSAP + SVG for Power Users: Motion Along A Path
- GSAP + SVG for Power Users 2: Complex Responsive Animation
- Snap SVG
- Communicating Animation
- 5 steps for mastering web animation
- Animating Clipped Elements In SVG
- How I stopped worrying and learned to animate SVG
- The Illusion Of Life: An SVG Animation Case Study
- Creating Cel Animations With SVG
- Animated line drawing in SVG
The Web Animations API: One Animation API to rule them all
Codepen Examples (not all examples are created with SVG but they provide good ideas and examples of how to use animations)