Make Art by Coding! Create an SVG Scene for Web Animation
You will learn how to create shapes with code and manipulate their appearance, sizes, and positions.
This course was funded by a wildly successful Kickstarter.
Gain hands-on experience with coding real projects! Make vector graphics by coding in this awesome course for beginners.
Scaleable Vector Graphics (SVG) is an image format that uses vectors, in contrast to other image formats like jpg, gif, or pngs, which are raster graphics. SVG is made with math. For this reason, it can scale indefinitely! This makes it great for making logos, icons, and simple designs.
Why use SVG?
It has good support among all modern browsers, and it's an open standard.
It uses smaller file sizes compared to bitmapped files.
You can style shapes in CSS and interact with them in JavaScript! Thus you can programmatically alter shapes for use on web pages.
Enroll today to join the Mammoth community
Your Instructor
Chris Veillette has taught many Mammoth Interactive web development and coding courses. Chris specializes in working with various types of tech. He enjoys coffee, sci-fi, and films.
Course Curriculum
-
Preview01. Introduction Part 1 (8:26)
-
Preview02. Introduction Part 2 (6:50)
-
Start03. Creating Rectangle and Circles (4:25)
-
Start04. Creating Lines (3:01)
-
Start05. SVG viewBox (7:07)
-
Start06. Polygon element Part 1 (3:33)
-
Start07 Polygon Element Part 2 (2:26)
-
Start08. Polygon Element Part 3 (3:29)
-
Start09. Polygon Element Part 4 (4:33)
-
Start10. viewBox Attributes (4:57)
-
Start11. viewBox Attributes (Cont'd) (2:24)
-
Start12. Path Elements (7:10)
-
Start13 Path Elements (Cont'd) (2:55)
-
Start14 Bezier Curves Part 1 (7:01)
-
Start15. Bezier Curves Part 2 (5:11)
-
Start16. Bezier Curves Part 3 (2:44)
-
Start17. Bezier Curves Part 4 (6:03)
-
Start18. Quadratic Bezier Curves (4:01)
-
Start19. Arcs (8:57)
-
Start20. Arcs (Cont'd) (5:05)
-
Start21. SVG-edit and Illustrator (6:24)
-
Start22. Styling Inline SVG.mov (8:10)
-
Start23. SVG in IMG tag (6:42)
-
Start24. SVG in Background IMG (5:15)
-
Start25 Modifying Inline SVG (11:53)
-
Start26. SVG with Javascript (10:20)
-
Start27. Adding Trees (6:17)
-
Start28 Creating Trees
-
Start29 Creating Trees (contd) (3:25)
-
Start30 Remove Button.mov (7:04)
-
Start31 Adding Other Type of Trees (15:17)
-
Start32 Sorting Trees (8:40)
-
Start33 Sorting Trees (cont'd) (4:31)
-
Start34 Refactoring Javascript (6:09)
-
Start35 Refactoring Javascript (Cont'd) (7:03)
-
Start36 Saving as SVG (8:52)
-
Start37 Saving as SVG (Cont'd) (5:48)
-
Start38 Save as PNG (7:21)
-
Start39 Downloading Images.mov (8:04)
-
Start40 Refactoring Part 1 (5:18)
-
Start41 Refactoring Part 2 (6:15)
-
Start42 Refactoring Part 3 (3:37)
-
Start43 Main Functionality (14:12)
-
Start44 Main Functionality (Cont'd) (3:37)
-
Start45 Testing Cross Browser Compatibility (13:43)
-
Start46 Checking DOMcontentloaded (2:39)
-
Start47 Styling Part 1 (10:12)
-
Start48 Styling Part 2 (7:13)
-
Start49 Styling Part 3 (6:10)
-
Start50 Modal for PNG Part 1 (8:01)
-
Start51 Modal for PNG Part 2 (6:27)
-
Start52 Modal for PNG Part 3 (6:18)
-
Start53 More Javascript Refactoring (6:40)
-
Start54 Styling The Modal More (9:33)
-
Start55 Adding Size Reset Button (8:30)
-
Start56 Outro
-
Start($1000 value!) Source Code
-
PreviewBonus Lecture: How to get more content.