Udemy

Platform

English

Language

Web Design

Category

Master SVG animation using HTML & CSS - Build 8 Projects.

“Learn to design high resolution images, logos, and screensavers using SVG(HTML&CSS) animation and become a design pro!"

2.75 (59 reviews)

Students

6 hours

Content

Nov 2019

Last Update
Regular Price

Topics

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

What you will learn

Design amazing and attractive 2D vector graphics using SVG.

Gain more knowledge about the combination of HTML , CSS and SVG.

Without using any software students will be able to create awesome SVG (Scalable Vector Graphics).

Design amazing icons and logos using the basic shapes fir your website and mobile app.

Learn how to create Screensaver and set parameters according to your requirement.

You will be able to design images with high resolution and in advance form which is better then jpeg format.

Understand the concept of animation in SVG with practical examples.

Get friendly support on any problem in less than 12 hours.

A certificate of completion at the end.


Description

++++++The FIRST  COMPLETE  BOOTCAMP  COURSE ON SVG +++++++

++++++++ Watch the Promo Video To Know how much deep this course is designed to make your concepts clear..

++++ Only SVG course which will start your training with the basics and then using the basics you will learn the designing of  amazing 2D Vector Graphics and different Shapes and Logos for your website using the combination of HTML , CSS and SVG++++

_________________________________________________________________________________________________________________________

Who can take this course....???

1. If you are a beginner to SVGprogramming and want to learn the basics .....

2. If you are already an expert in SVG and want to design attractive logos and images for your websites.....

3. If you want to brush up your skills in this topic.......

4. If you want to be a web  designer/developer.....

So , if you come under any of these 4 cases , then YES , this course is designed for you.......

This course will start your journey from scratch and at the end of it you will be a SVG GURU.

Topics which are covered in the course are as follows:

1. Introduction to SVG

2. Understanding the Syntax.

3.Designing the Basic Shapes (Rectangle , Circle , Line , Polygon ,  Polyline , Ellipse)

4, Adding TEXT to your SVG

.5. Concept of STROKE in SVG..

 6. Important ELEMENTS in SVG

.7. Clipping and Masking in SVG.

8. Using Javascript in SVG

.9. Applying Filters to Images.

10 .Concept of Gradients in SVG.

11 Understanding the Animation..

12. The concept of Transformation.

13. Designing Logos and Complex animation..


Benifits / Advantages of this course:

1). No matter you are a beginner or an expert , this course is designed from scratch.

2). Every programming example will start from a blank page and will ends up with a desired output.

3). A line to line description of every single code is provided in a descriptive manner.

4). This course will work as a "ZERO to HERO" , so at the end you will be an expert in designing amazing 2D vector graphics with SVG..






Screenshots

Master SVG animation using HTML & CSS - Build 8 Projects.
Master SVG animation using HTML & CSS - Build 8 Projects.
Master SVG animation using HTML & CSS - Build 8 Projects.
Master SVG animation using HTML & CSS - Build 8 Projects.

Content

Introduction to the Course , Instructor and Understanding Syntax.

Introduction to SVG.

Introduction to Instructor.

The first SVG example.

BASIC SHAPE - Designing of RECTANGLE.

Designing a Basic Rectangle.

Adding concept of TRANSPARENCY to the Rectangle.

Using Transparency concept.

Adding Rounded Corners to a Rectangle.

BASIC SHAPE - Designing of CIRCLE.

Designing CIRCLE in SVG.

BASIC SHAPE - Designing of ELLIPSE.

Designing a Basic ellipse.

Designing Multiple Ellipse in SVG.

Designing the combination of two ellipse.

BASIC SHAPE - Designing of LINE.

Designing LINE in SVG.

BASIC SHAPE - Designing of POLYGON.

Designing a Basic POLYGON.

Designing POLYGON with FOUR sides.

ADVANCE use of POLYGON.

ADVANCE use of POLYGON - Part 2.

BASIC SHAPE - Designing of POLYLINE.

Designing a Basic POLYLINE.

Combination of Different straight Lines.

Understanding the concept of PATH in SVG.

Basics and Practical example of PATH.

Designing a Quadratic Curve using the PATH concept.

Adding TEXT to your SVG.

Defining a basic TEXT in SVG.

Rotating the TEXT at a certain angle.

Adding some advance Functionality to TEXT.

Using TEXT as a link in SVG.

Useful ELEMENTS in SVG.

The use of g element in SVG.

The use of defs element in SVG.

The use of symbol element in SVG.

STROKES in SVG.

Introduction to stroke with practical example.

The use of stroke-width property in SVG.

The stroke dasharray concept.

The stroke linecap property in SVG.

Some ADVANCE concept used in SVG.

The Clip path concept in SVG.

Use of mask in SVG.

Introduction to TOOLS for SVG.

Adding JAVASCRIPT to SVG.

Using script in SVG.

Adding more than one event to SVG.

Applying different EFFECTS / FILTERS to SVG.

Applying BLUR effect.

Implementing the SHADOW effect.

Using BLUR effect for an OFFSET image.

Applying black shadow to an element.

Applying Colored shadow.

Applying GRADIENTS in SVG.

Understanding the concept of gradient.

Understanding the vertical linear gradient .

Adding Text to Linear gradient.

The concept of Radial Gradient in SVG.

Performing Animation in SVG.

The basic implementation of animation.

The advance function of animation.

Applying animation to multiple objects.

The use of END element in SVG.

Performing repeated actions in Animation.

The use of SET element in SVG.

Understanding the transform animation.

Animating the MOTION of element.

Animating Motion of an element -Part2

Adding Links to Images.


Reviews

A
Ashutosh27 November 2019

The instructor copied code from somewhere and explaining it to the students. No explanation of the concepts. Anyone can read free tutorials regarding SVG which is more better then this course. I would recommend to not to enroll in this course.

C
CosmoCode14 October 2019

I'm afraid the course doesn't live up to its promises. The course doesn't cover how to create attractive and amazing 2d vector graphics in SVG like icons and logos and doesn't help much to master SVG animations. Absolute beginners will get a first insight into creating simple shapes like polygons, circles and curves as well as text in SVG and only in the last of the 16 sections will the topic of animation be briefly touched upon. The level and scope of the 8 animation projects never leaves the short "Try it yourself" examples of the SVG tutorial from w3schools.com. This is a good course for students without any previous knowledge who want an introduction to the absolute basic techniques of SVG creation. It does not go further than that. If that's your goal, take this course. It will be helpful. But if you want to learn how to design logos, master SVG animations and become a design professional, this course will not be of much use to you.

F
Frank23 May 2019

Sometimes he was hard to understand. Class could have been much shorter if he would have had a basic starting template. Good starting point.

P
Panpan17 February 2019

the content of the course are very clearly explained, but the instructor's explanation can be a little bit shorter in my opinion,generally I think this is a good course for understanding SVG for beginners like me.

T
Tomasz25 January 2019

Terrible English, hard to understand, misspronuced words anoynig. Poor English, poor quality and poor content, partially copied from w3schools SVG tutorial.

B
Brent8 October 2018

Everything is good so far and what I would expect. I believe the intro could have gone further into everything this course will cover in addition to SVG basic definitions. I also feel like the order of the lectures is off a little bit. The section of 'Useful SVG Elements' should be closer to the front but overall the course has covered multiple aspects of SVG design.

J
Jim6 September 2018

This course goes into depth. I like that. What I don't like at all is the teeny tiny font he uses. How does he overlook anything so obvious. Painful to read.


Related Courses

SKILLSHARE
Animating Vector (SVG Graphics) Using Javascript & CSS
Animating Vector (SVG Graphics) Using Javascript & CSS
SKILLSHARE
SVG & CSS loader animation without code with Google Web Designer
SVG & CSS loader animation without code with Google Web Designer
SKILLSHARE
SVG Fonts: How to start with your font in Procreate!
SVG Fonts: How to start with your font in Procreate!

1663800

Udemy ID

4/26/2018

Course created date

11/24/2019

Course Indexed date
Bot
Course Submitted by

Twitter
Telegram