Make Art By Coding Create An Svg Scene For Web Animation!

What you'll learn
Recognize why you should use SVGs for web development.
Create SVG shapes.
Embed SVG on a web page.
Make a landscape scene entirely with code!
Requirements
Basic understanding of HTML, CSS and jаvascript is highly helpful. To get a fast introduction, enroll in our "Kids Coding -Introduction to HTML, CSS and jаvascript" course.
An Internet connection to follow along in the free text editor JS Bin.
No SVG knowledge is required.
Illustrator CC or a free alternative
Description
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 jаvascript! Thus you can programmatically alter shapes for use on web pages.
Enroll today to join the Mammoth community.
Overview
Section 1: Introduction
Lecture 1 Introduction
Lecture 2 Introduction (cont'd)
Lecture 3 Creating Rectangle and Circles
Lecture 4 Creating Lines
Lecture 5 SVG viewBox
Lecture 6 Polygon Element Part 1
Lecture 7 Polygon Element Part 2
Lecture 8 Polygon Element Part 3
Lecture 9 Polygon Element Part 4
Lecture 10 viewBox Attributes
Lecture 11 viewBox Attributes (Cont'd)
Lecture 12 Path Elements
Lecture 13 Path Elements (Cont'd)
Lecture 14 Bezier Curves Part 1
Lecture 15 Bezier Curves Part 2
Lecture 16 Bezier Curves Part 3
Lecture 17 Bezier Curves Part 4
Lecture 18 Quadratic Bezier Curves
Lecture 19 Arcs
Lecture 20 Arcs (Cont'd)
Lecture 21 SVG-edit and Illustrator
Lecture 22 Styling Inline SVG
Lecture 23 SVG in IMG tag
Lecture 24 SVG in Background IMG
Lecture 25 Modifying Inline SVG
Lecture 26 SVG with jаvascript
Lecture 27 Adding Trees
Lecture 28 Creating Trees
Lecture 29 Creating Trees (Cont'd)
Lecture 30 Remove Button
Lecture 31 Adding Other Tree Types
Lecture 32 Sorting Trees
Lecture 33 Sorting Trees (Cont'd)
Lecture 34 Refactoring jаvascript
Lecture 35 Refactoring jаvascript (Cont'd)
Lecture 36 Saving as SVG
Lecture 37 Saving as SVG (Cont'd)
Lecture 38 Save as PNG
Lecture 39 Downloading Images
Lecture 40 Refactoring Part 1
Lecture 41 Refactoring Part 2
Lecture 42 Refactoring Part 3
Lecture 43 Main Functionality
Lecture 44 Main Functionality (Cont'd)
Lecture 45 Testing Cross-Browser Compatibility
Lecture 46 Checking DOMcontentload
Lecture 47 Styling Part 1
Lecture 48 Styling Part 2
Lecture 49 Styling Part 3
Lecture 50 Modal for PNG Part 1
Lecture 51 Modal for PNG Part 2
Lecture 52 Modal for PNG Part 3
Lecture 53 More jаvascript Refactoring
Lecture 54 Styling the Modal Some More
Lecture 55 Adding Size Reset Button
Lecture 56 Outro
Lecture 57 ($1000 value!) Source Code
Lecture 58 Please leave us a rating!
Lecture 59 Bonus Lecture: Get 130 courses.
Anyone who wants to make art for web pages using code!


Homepage

https://www.udemy.com/course/makesvgsforwebanimation/