Introduction to SVG and Canvas

SVG Labs

1. Getting Started
2. HTML Template for testing SVG
3. Basic shapes
   1. SVG Circle
   2. SVG Line
   3. SVG Rectangle
   4. SVG Ellipse
   5. SVG Polygon - used to create hexagons, octagons and stars
4. SVG Polyline
5. SVG Paths
6. SVG Text
7. SVG Text Effects
8. SVG Gradients
9. SVG Gallery of Fun Example

https://www.w3schools.com/graphics/svg_intro.asp

Canvas

Canvas is the HTML element that holds a drawing region on a web page using JavaScript. We can use a canvas program to do animations, write games. Before you dive into these labs you will need to know both some SVG and JavaScript to modify the demos.