This page contains all the samples, excercises, and demo code from

Building vector graphics, UIs and animations with SVG from scratch

Full AWWWARDS Course   |   GitHub Repository

SVG has a lot to offer in terms of building complex interactive graphics, animations and special effects. With a little bit of math and good understanding of the API, you will be able to fully express your creative ideas and build advanced data charts, widgets and animated scenes.

---

Table of Contents and Exercises

The source code for each excercise is available online, and for a detailed explanation, please consult the video course.

1. Welcome
   1. Setting up our app
   2. SVG Rendering Fundamentals
2. Building interactive charts in SVG
   1. Bar chart
   2. Line chart
   3. Scatter point chart
   4. Pie chart
   5. Pannable chart
3. Interactive graphics with SVG
   1. Interactive widget
4. SVG Animation
   1. CSS Animation
   2. SMIL Animation
5. SVG Optimisation
   1. The <use /> element
   2. Cleaning up SVGs exported from design tools
6. Advanced Effects in SVG
   1. Exploring SVG filter primitives
7. Using SVG with Adobe Illustrator
   1. Exporting SVG graphics from Illustrator
   2. Exporting generated SVG from Javascript to Illustrator