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

Learn to create simple vector art with HTML, CSS, & JavaScript. A beginners course for web developers & digital artists.

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 JavaScript is highly helpful. To get a fast introduction, enroll in our "Kids Coding -Introduction to HTML, CSS and JavaScript" 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 JavaScript! 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 Javascript

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 Javascript

Lecture 35 Refactoring Javascript (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 Javascript 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!