Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Make Art by Coding! Create an SVG Scene for Web Animation
Curriculum
01. Introduction Part 1 (8:27)
02. Introduction Part 2 (6:50)
03. Creating Rectangle and Circles (4:25)
04. Creating Lines (3:01)
05. SVG viewBox (7:07)
06. Polygon element Part 1 (3:33)
07 Polygon Element Part 2 (2:26)
08. Polygon Element Part 3 (3:29)
09. Polygon Element Part 4 (4:33)
10. viewBox Attributes (4:57)
11. viewBox Attributes (Cont'd) (2:24)
12. Path Elements (7:10)
13 Path Elements (Cont'd) (2:55)
14 Bezier Curves Part 1 (7:01)
15. Bezier Curves Part 2 (5:12)
16. Bezier Curves Part 3 (2:44)
17. Bezier Curves Part 4 (6:03)
18. Quadratic Bezier Curves (4:01)
19. Arcs (8:57)
20. Arcs (Cont'd) (5:05)
21. SVG-edit and Illustrator (6:24)
22. Styling Inline SVG.mov (8:10)
23. SVG in IMG tag (6:42)
24. SVG in Background IMG (5:15)
25 Modifying Inline SVG (11:53)
26. SVG with Javascript (10:20)
27. Adding Trees (6:17)
28 Creating Trees
29 Creating Trees (contd) (3:26)
30 Remove Button.mov (7:04)
31 Adding Other Type of Trees (15:17)
32 Sorting Trees (8:40)
33 Sorting Trees (cont'd) (4:31)
34 Refactoring Javascript (6:09)
35 Refactoring Javascript (Cont'd) (7:03)
36 Saving as SVG (8:52)
37 Saving as SVG (Cont'd) (5:48)
38 Save as PNG (7:21)
39 Downloading Images.mov (8:04)
40 Refactoring Part 1 (5:18)
41 Refactoring Part 2 (6:15)
42 Refactoring Part 3 (3:37)
43 Main Functionality (14:12)
44 Main Functionality (Cont'd) (3:37)
45 Testing Cross Browser Compatibility (13:43)
46 Checking DOMcontentloaded (2:39)
47 Styling Part 1 (10:12)
48 Styling Part 2 (7:13)
49 Styling Part 3 (6:10)
50 Modal for PNG Part 1 (8:01)
51 Modal for PNG Part 2 (6:27)
52 Modal for PNG Part 3 (6:18)
53 More Javascript Refactoring (6:40)
54 Styling The Modal More (9:33)
55 Adding Size Reset Button (8:30)
56 Outro
($1000 value!) Source Code
Bonus Lecture: How to get more content.
05. SVG viewBox
Complete and Continue