CSS3 Master Series: The Complete Guide to SVG Animations

Hichem Med, Full Stack Developer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
26 Videos (1h 53m)
    • What is SVG?

      2:34
    • Where to find SVGs?

      4:24
    • How to include SVG?

      2:57
    • The viewport and the viewbox

      3:50
    • The line element

      2:47
    • The rect element

      1:48
    • The circle element

      1:20
    • The ellipse element

      2:48
    • The polyline element

      1:55
    • The polygone element

      1:39
    • The path element

      6:11
    • The text element

      5:17
    • The image element

      0:59
    • Stroke properties

      3:58
    • Fill properties

      1:20
    • Grouping elements

      1:14
    • Defs symbole and use

      4:00
    • Textpath

      0:52
    • Gradients

      3:31
    • Patterns

      1:25
    • Markers

      2:01
    • Clip path

      1:22
    • Masks

      1:41
    • Find svg and modify it

      23:47
    • Loader

      14:11
    • Svg is cool

      15:35

About This Class

SVG stands for Scalable Vector Graphic. I know that sounds simple but this tells you everything, really, that you need to know about this file format. It's scalable, it's made of vectors, and it is a graphic.

WHY SHOULD YOU START USING SVG TODAY?

-It’s what the “S” stands for. Unlike traditional images (like PNG or JPG) SVG easily scales from small to big without loss of quality or fidelity. This is because the “V” part of the name–vector–describes the series of paths, shapes, and more that are created using connect points plotted on x-y axes.

-Designers used to create animations in HTML elements using CSS. However, due to the limitations of HTML elements in creating patterns, shapes, and others, they naturally turn to SVG, which offers more interesting capabilities.

- SVG is an excellent way to create interactive, resolution-independent vector graphics that will look great on any size screen

-Since SVGs aren’t bitmap images, they’re easily modified using both JavaScript and CSS.

-SVGs are completely resolution independent.

WHY THIS COURSE IS THE RIGHT COURSE FOR YOU TO LEARN SVG?

In this course, we'll start off from the basics of SVG, we will explain what is SVG, then we will go and see how to find SVG on the web, how to create using Graphic editors and How to create SVG using the text editor, 

and after that, I will teach everything that you need to master SVG Animations easily!

I made my best so this course will cover everything you need to know so that you will be able to add some really awesome SVG animations to your website TODAY!

Not only you will learn everything about SVG and SVG Animations, this course is full of challenges!

So if you're ready to take your WEB DEVELOPMENT SKILLS to a whole new LEVEL, this is the perfect course for you!

"A journey starts with single step and this is one of the steps you take to become a WEB DEVELOPER expert"

32

Students

--

Projects

0

Reviews (0)

Hichem Med

Full Stack Developer

Hi! I'm Hichem. I'm a full stack developer with a serious love for teaching.

I'm a web designer and developer with a huge passion for creating modern well crafted new things from scratch. I've been building websites for several years.

I'm really excited to finally share my knowledge with you.

"It is my pleasure and privilege to teach you. I hope you'll come away knowing something you didn't, so join me on this crazy adventure that will change your life!

Thank you!"...

See full profile

Technology Web Development HTML CSS Svg