This course is designed for those interested to learn how to create SVG scenes for web animation. Read more.
John Bura has been programming games since 1997 and teaching since 2002. John is the owner of the game development studio Mammoth Interactive. This company produces XBOX 360, iPhone, iPad, Android, HTML 5, ad-games and more. Mammoth Interactive recently sold a game to Nickelodeon! John has been contracted by many different companies to provide game design, audio, programming, level design and project management. To this day, John has 40 commercial games that he has contributed to. Sev
Access all courses in our library for only $9/month with All Access Pass
Get Started with All Access PassBuy Only This CourseAbout This Course
Who this course is for:
- Anyone who wants to make art for web pages using code!
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
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.
Our Promise to You
By the end of this course, you will have learned how to create an SVG scene for web animation.
10 Day Money Back Guarantee. If you are unsatisfied for any reason, simply contact us and we’ll give you a full refund. No questions asked.
Get started today and learn more about creating web animation with the use of SVG.
Course Curriculum
| Section 1 - Introduction | |||
| Introduction | 00:00:00 | ||
| Introduction (Cont’d) | 00:00:00 | ||
| Creating Rectangle And Circles | 00:00:00 | ||
| Creating Lines | 00:00:00 | ||
| SVG viewBox | 00:00:00 | ||
| Polygon Element Part 1 | 00:00:00 | ||
| Polygon Element Part 2 | 00:00:00 | ||
| Polygon Element Part 3 | 00:00:00 | ||
| Polygon Element Part 4 | 00:00:00 | ||
| ViewBox Attributes | 00:00:00 | ||
| ViewBox Attributes (Cont’d) | 00:00:00 | ||
| Path Elements | 00:00:00 | ||
| Path Elements (Cont’d) | 00:00:00 | ||
| Bezier Curves Part 1 | 00:00:00 | ||
| Bezier Curves Part 2 | 00:00:00 | ||
| Bezier Curves Part 3 | 00:00:00 | ||
| Bezier Curves Part 4 | 00:00:00 | ||
| Quadratic Bezier Curves | 00:00:00 | ||
| Arcs | 00:00:00 | ||
| Arcs (Cont’d) | 00:00:00 | ||
| SVG-Edit And Illustrator | 00:00:00 | ||
| Styling Inline SVG.mov | 00:00:00 | ||
| SVG In IMG Tag | 00:00:00 | ||
| SVG In Background IMG | 00:00:00 | ||
| Modifying Inline SVG | 00:00:00 | ||
| SVG With Javascript | 00:00:00 | ||
| Adding Trees | 00:00:00 | ||
| Creating Trees | 00:00:00 | ||
| Creating Trees (Cont’d) | 00:00:00 | ||
| Remove Button.mov | 00:00:00 | ||
| Adding Other Type Of Trees | 00:00:00 | ||
| Sorting Trees | 00:00:00 | ||
| Sorting Trees (Cont’d) | 00:00:00 | ||
| Refactoring Javascript | 00:00:00 | ||
| Refactoring Javascript (Cont’d) | 00:00:00 | ||
| Saving As SVG | 00:00:00 | ||
| Saving As SVG (Cont’d) | 00:00:00 | ||
| Save As PNG | 00:00:00 | ||
| Downloading Images.mov | 00:00:00 | ||
| Refactoring Part 1 | 00:00:00 | ||
| Refactoring Part 2 | 00:00:00 | ||
| Refactoring Part 3 | 00:00:00 | ||
| Main Functionality | 00:00:00 | ||
| Main Functionality (Cont’d) | 00:00:00 | ||
| Testing Cross Browser Compatibility | 00:00:00 | ||
| Checking DOMcontentload | 00:00:00 | ||
| Styling Part 1 | 00:00:00 | ||
| Styling Part 2 | 00:00:00 | ||
| Styling Part 3 | 00:00:00 | ||
| Modal For PNG Part 1 | 00:00:00 | ||
| Modal For PNG Part 2 | 00:00:00 | ||
| Modal For PNG Part 3 | 00:00:00 | ||
| More Javascript Refactoring | 00:00:00 | ||
| Styling The Modal Some More | 00:00:00 | ||
| Adding Size Reset Button | 00:00:00 | ||
| Outro | 00:00:00 | ||
| Source Code | 00:00:00 | ||
About This Course
Who this course is for:
- Anyone who wants to make art for web pages using code!
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
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.
Our Promise to You
By the end of this course, you will have learned how to create an SVG scene for web animation.
10 Day Money Back Guarantee. If you are unsatisfied for any reason, simply contact us and we’ll give you a full refund. No questions asked.
Get started today and learn more about creating web animation with the use of SVG.
Course Curriculum
| Section 1 - Introduction | |||
| Introduction | 00:00:00 | ||
| Introduction (Cont’d) | 00:00:00 | ||
| Creating Rectangle And Circles | 00:00:00 | ||
| Creating Lines | 00:00:00 | ||
| SVG viewBox | 00:00:00 | ||
| Polygon Element Part 1 | 00:00:00 | ||
| Polygon Element Part 2 | 00:00:00 | ||
| Polygon Element Part 3 | 00:00:00 | ||
| Polygon Element Part 4 | 00:00:00 | ||
| ViewBox Attributes | 00:00:00 | ||
| ViewBox Attributes (Cont’d) | 00:00:00 | ||
| Path Elements | 00:00:00 | ||
| Path Elements (Cont’d) | 00:00:00 | ||
| Bezier Curves Part 1 | 00:00:00 | ||
| Bezier Curves Part 2 | 00:00:00 | ||
| Bezier Curves Part 3 | 00:00:00 | ||
| Bezier Curves Part 4 | 00:00:00 | ||
| Quadratic Bezier Curves | 00:00:00 | ||
| Arcs | 00:00:00 | ||
| Arcs (Cont’d) | 00:00:00 | ||
| SVG-Edit And Illustrator | 00:00:00 | ||
| Styling Inline SVG.mov | 00:00:00 | ||
| SVG In IMG Tag | 00:00:00 | ||
| SVG In Background IMG | 00:00:00 | ||
| Modifying Inline SVG | 00:00:00 | ||
| SVG With Javascript | 00:00:00 | ||
| Adding Trees | 00:00:00 | ||
| Creating Trees | 00:00:00 | ||
| Creating Trees (Cont’d) | 00:00:00 | ||
| Remove Button.mov | 00:00:00 | ||
| Adding Other Type Of Trees | 00:00:00 | ||
| Sorting Trees | 00:00:00 | ||
| Sorting Trees (Cont’d) | 00:00:00 | ||
| Refactoring Javascript | 00:00:00 | ||
| Refactoring Javascript (Cont’d) | 00:00:00 | ||
| Saving As SVG | 00:00:00 | ||
| Saving As SVG (Cont’d) | 00:00:00 | ||
| Save As PNG | 00:00:00 | ||
| Downloading Images.mov | 00:00:00 | ||
| Refactoring Part 1 | 00:00:00 | ||
| Refactoring Part 2 | 00:00:00 | ||
| Refactoring Part 3 | 00:00:00 | ||
| Main Functionality | 00:00:00 | ||
| Main Functionality (Cont’d) | 00:00:00 | ||
| Testing Cross Browser Compatibility | 00:00:00 | ||
| Checking DOMcontentload | 00:00:00 | ||
| Styling Part 1 | 00:00:00 | ||
| Styling Part 2 | 00:00:00 | ||
| Styling Part 3 | 00:00:00 | ||
| Modal For PNG Part 1 | 00:00:00 | ||
| Modal For PNG Part 2 | 00:00:00 | ||
| Modal For PNG Part 3 | 00:00:00 | ||
| More Javascript Refactoring | 00:00:00 | ||
| Styling The Modal Some More | 00:00:00 | ||
| Adding Size Reset Button | 00:00:00 | ||
| Outro | 00:00:00 | ||
| Source Code | 00:00:00 | ||
Related Courses
Are you interested in higher education?
All Rights Reserved