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.

4.20 (26 reviews)
Udemy
platform
English
language
Graphic Design
category
Make Art by Coding: Create an SVG Scene for Web Animation!
379
students
6 hours
content
Apr 2018
last update
$49.99
regular price

What you will 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!

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.

Content

Introduction

Introduction
Introduction (cont'd)
Creating Rectangle and Circles
Creating Lines
SVG viewBox
Polygon Element Part 1
Polygon Element Part 2
Polygon Element Part 3
Polygon Element Part 4
viewBox Attributes
viewBox Attributes (Cont'd)
Path Elements
Path Elements (Cont'd)
Bezier Curves Part 1
Bezier Curves Part 2
Bezier Curves Part 3
Bezier Curves Part 4
Quadratic Bezier Curves
Arcs
Arcs (Cont'd)
SVG-edit and Illustrator
Styling Inline SVG
SVG in IMG tag
SVG in Background IMG
Modifying Inline SVG
SVG with Javascript
Adding Trees
Creating Trees
Creating Trees (Cont'd)
Remove Button
Adding Other Tree Types
Sorting Trees
Sorting Trees (Cont'd)
Refactoring Javascript
Refactoring Javascript (Cont'd)
Saving as SVG
Saving as SVG (Cont'd)
Save as PNG
Downloading Images
Refactoring Part 1
Refactoring Part 2
Refactoring Part 3
Main Functionality
Main Functionality (Cont'd)
Testing Cross-Browser Compatibility
Checking DOMcontentload
Styling Part 1
Styling Part 2
Styling Part 3
Modal for PNG Part 1
Modal for PNG Part 2
Modal for PNG Part 3
More Javascript Refactoring
Styling the Modal Some More
Adding Size Reset Button
Outro
($1000 value!) Source Code
Please leave us a rating!
Bonus Lecture: Get 130 courses.

Reviews

James
September 13, 2021
SVG as text, which is what I wanted. Instruction makes a lot of sense and is a progression in a good order. Time spent on intro/outro with music every couple minutes for each video is annoying.
Tricia
June 1, 2020
From the beginning I knew this was not the course for me. I am past the 30 days but I would love to gift this course to someone. Please contact me. Southernrootscrafting@gmail.com Thank u, Tricia ❤️
Mohammed
March 8, 2020
So far so good ... easy intro and no complicated concepts so far. very easy to follow and understand so far.
Eric
December 2, 2017
Pace is excellent, iterates points without being redundant. Builds on previous knowledge in a very organic way.
Dan
November 18, 2017
Good look at basic SVG and some good hints and tips, but the majority of the course after that was devoted to a single project which didn't use the SVG after a certain point. There was no SVG animation at all! Although the instructor knows what he is doing, he kept making the mistake of calling the x and y /coordinates/ the x and y /axes/ when these are not the same thing!

Charts

Price

Make Art by Coding: Create an SVG Scene for Web Animation! - Price chart

Rating

Make Art by Coding: Create an SVG Scene for Web Animation! - Ratings chart

Enrollment distribution

Make Art by Coding: Create an SVG Scene for Web Animation! - Distribution chart
1382278
udemy ID
10/6/2017
course created date
7/12/2020
course indexed date
Bot
course submited by