Udemy

Platform

English

Language

Graphic Design

Category

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.55 (20 reviews)

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

Students

6 hours

Content

Apr 2018

Last Update
Regular Price

SKILLSHARE
SkillShare
Unlimited access to all SkillShare courses
EXCLUSIVE 30-DAY FREE TRIAL

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

T
Tricia1 June 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 ❤️

M
Mohammed8 March 2020

So far so good ... easy intro and no complicated concepts so far. very easy to follow and understand so far.

E
Eric2 December 2017

Pace is excellent, iterates points without being redundant. Builds on previous knowledge in a very organic way.

D
Dan18 November 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!


Related Courses

SKILLSHARE
Character 2D Animation Part 1 - Designing the Character in segments
Character 2D Animation Part 1 - Designing the Character in segments
SKILLSHARE
2D Animation: Backgrounds & Staging
2D Animation: Backgrounds & Staging
SKILLSHARE
2D ANIMATION of the Buildings in After Effects, Beginners Friendly
2D ANIMATION of the Buildings in After Effects, Beginners Friendly

1382278

Udemy ID

10/6/2017

Course created date

7/12/2020

Course Indexed date
Bot
Course Submitted by

Twitter
Telegram