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