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](https://publishing-project.rivendellweb.net/looking-at-animations-again-gsap/) 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](https://twitter.com/elrond25).
I look forward to hearing from you :)
## Links and resources
- Filters
- [SVG Filters 101](https://tympanus.net/codrops/2019/01/15/svg-filters-101/)
- [SVG Filter Effects: Outline Text with ](https://tympanus.net/codrops/2019/01/22/svg-filter-effects-outline-text-with-femorphology/)
- [SVG Filter Effects: Poster Image Effect with ](https://tympanus.net/codrops/2019/01/29/svg-filter-effects-poster-image-effect-with-fecomponenttransfer/)
- [SVG Filter Effects: Duotone Images with ](https://tympanus.net/codrops/2019/02/05/svg-filter-effects-duotone-images-with-fecomponenttransfer/)
- [SVG Filter Effects: Conforming Text to Surface Texture with ](https://tympanus.net/codrops/2019/02/12/svg-filter-effects-conforming-text-to-surface-texture-with-fedisplacementmap/)
- [SVG Filter Effects: Duotone Images with ](https://tympanus.net/codrops/2019/02/05/svg-filter-effects-duotone-images-with-fecomponenttransfer/)
- [Finessing \`feColorMatrix\`](https://alistapart.com/article/finessing-fecolormatrix)
- [CSS Duotone Generator](https://cssduotone.com/)
- Clipping and masks
- [Clippy](http://bennettfeely.com/clippy/)
- [CSS Masking](https://www.html5rocks.com/en/tutorials/masking/adobe/) (uses SVG to generate the mask)
- Compositing
- [Compositing Digital Images](https://keithp.com/~keithp/porterduff/p253-porter.pdf), T. Porter and T. Duff. SIGGRAPH '84 Conference Proceedings, Association for Computing Machinery, Volume 18, Number 3, July 1984.
- Animations
- [Interactive Data Visualization: Animating the viewBox](https://css-tricks.com/interactive-data-visualization-animating-viewbox/)
- [GSAP + SVG for Power Users: Motion Along A Path](https://davidwalsh.name/gsap-svg)
- [GSAP + SVG for Power Users 2: Complex Responsive Animation](https://davidwalsh.name/gsap-svg-responsive-animation)
- [Snap SVG](https://github.com/adobe-webplatform/Snap.svg/)
- [Communicating Animation](https://alistapart.com/article/communicating-animation)
- [5 steps for mastering web animation](https://www.creativebloq.com/web-design/5-steps-mastering-web-animation-11513819)
- [Animating Clipped Elements In SVG](https://www.smashingmagazine.com/2015/12/animating-clipped-elements-svg/)
- [How I stopped worrying and learned to animate SVG](https://medium.com/@aniboaz/animate-svg-4fa7dd00e860)
- [The Illusion Of Life: An SVG Animation Case Study](https://www.smashingmagazine.com/2016/07/an-svg-animation-case-study/)
- [Creating Cel Animations With SVG](https://www.smashingmagazine.com/2015/09/creating-cel-animations-with-svg/)
- [Animated line drawing in SVG](https://jakearchibald.com/2013/animated-line-drawing-svg/)
- The Web Animations API: One Animation API to rule them all
- [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API)
- [Using the Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API)
- Books
- [Practical SVG](https://alistapart.com/article/practical-svg) — A Book Apart
- [SVG Essentials - Second Edition](http://shop.oreilly.com/product/0636920032335.do) — O'Reilly
- [Using SVG with CSS3 and HTML5](http://shop.oreilly.com/product/0636920037972.do) — O'Reilly
- [SVG Colors, Patterns & Gradients](http://shop.oreilly.com/product/0636920043065.do) — O'Reilly
- [SVG Animations](http://shop.oreilly.com/product/0636920045335.do) — O'Reilly
- Other links
- [How to Hand Code SVG](https://webdesign.tutsplus.com/tutorials/how-to-hand-code-svg--cms-30368)
- [SVG on the web — A practical Guide](https://svgontheweb.com/#javascript)
- [Using SVG](https://css-tricks.com/using-svg/)
- [Rethinking Responsive SVG](https://www.smashingmagazine.com/2014/03/rethinking-responsive-svg/)
- [The Guide To CSS Animation: Principles and Examples](https://www.smashingmagazine.com/2011/09/the-guide-to-css-animation-principles-and-examples/)
- Codepen Examples (not all examples are created with SVG but they provide good ideas and examples of how to use animations)
- [Animated SVG Mask](https://codepen.io/dennisgaebel/pen/xGMYJY)
- [Animated SVG clipPath](https://codepen.io/dennisgaebel/pen/aOXJep)
- [Folding Fan](https://codepen.io/dennisgaebel/pen/gpqWRq/)
- [SVG paper shredderf](https://codepen.io/chrisgannon/pen/bdGqBo/)
- [Simple and accessible SVG menu hamburger animation](https://codepen.io/caraya/pen/OqEyjM)
- [SVG Animated Hamburger Menu](https://codepen.io/caraya/pen/ZPRbxx)
- [Frosty Nav Toggle Effect](https://codepen.io/caraya/pen/pYKEpq)
- [Hamburger Icon With Morphing Menu](https://codepen.io/caraya/pen/NJzRyz)
- [Frosty Nav Toggle Effect](https://codepen.io/caraya/pen/pYKEpq)
- [Modern Retro — IBM THINK](https://codepen.io/ainalem/pen/WORzLN)
- [Demos and examples with Anime.js](https://codepen.io/collection/XLebem/)
