SVG Animation - With HTML, CSS & Javascript(2022) | Jayanta Sarkar | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

SVG Animation - With HTML, CSS & Javascript(2022)

teacher avatar Jayanta Sarkar

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

35 Lessons (3h 51m)
    • 1. Introduction

      3:20
    • 2. Svg Introduction

      5:14
    • 3. Include Svg In Html Css Tutorial

      6:38
    • 4. Svg Viewport & Viewbox Tutorial

      8:01
    • 5. Svg Line Element Tutorial

      5:34
    • 6. Svg Rect Element Tutorial

      5:31
    • 7. Svg Circle Element Tutorial

      4:03
    • 8. SVG Ellipse Element Tutorial

      3:56
    • 9. SVG Polyline Element Tutorial

      4:31
    • 10. SVG Polygon Element Tutorial

      4:23
    • 11. SVG Path Element Tutorial

      7:40
    • 12. Svg Path Element Tutorial ll

      11:44
    • 13. Svg Path Element Tutorial lll

      8:08
    • 14. Svg Text Element Tutorial

      8:22
    • 15. Svg Image Element Tutorial

      4:11
    • 16. Svg Stroke Properties Tutorial

      11:22
    • 17. Svg Fill Properties Tutorial

      3:46
    • 18. Svg Grouping Elements Tutorial

      3:04
    • 19. Svg Defs, Symbol & Use Elements

      6:19
    • 20. SVG TextPath Element Tutorial

      4:38
    • 21. SVG linear Gradients

      7:34
    • 22. SVG radial Gradients

      5:35
    • 23. Adobe illustrator to svg

      7:33
    • 24. Svg ClipPath animation

      5:09
    • 25. Adding JavaScript in svg image

      4:33
    • 26. Project 1- Moving car Animation

      10:47
    • 27. Project 2 - Svg path tracking animation

      7:28
    • 28. Project 3 - SVG Elastic Line Animation Effects

      8:54
    • 29. Project 4 svg title wrapping animation

      9:15
    • 30. Project 5 - 3D Hover Animation SVG

      9:47
    • 31. Project 6 -SVG Text Masking with Video

      9:25
    • 32. Project 7 - SVG Loader 1

      8:48
    • 33. Project 8 - SVG Scroll Drawing

      9:05
    • 34. Project 9 - Image Turbulence & Displacement Part 1

      7:02
    • 35. Project 9 - Image Turbulence & Displacement Part 2

      2:58
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

29

Students

--

Projects

About This Class

In this course we are going to learn SVG from the very beginning, if are you, web designer, for front end developer and if you want to enhance your skill, This will be the best course in this regard.

Within few hours you will have created multiple SVG projects looking at a number of different animation techniques. Using animation within the user interface of a website is now standard practice. This fast and effective course will introduce us to new ways to improve your client projects.

we are going to learn SVG from the very beginning.

So you don't have any knowledge about SVG you are also welcome

Meet Your Teacher

Hello, I'm Jayanta.

After graduating and holding a degree in "information technology," my professional career began, starting web development and graphics design career in 2018, I never stopped learning new programming skills .

I  learn web development and graphic design skills in Arena Animation. But my most of the skills are self-taught skills. As a self-taught developer and graphics designer, I had the chance to work with meaning of local IT companies to build their websites and train their employee on web programming.

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Introduction: Hello friends. My name is Jonathan, soccer professionally. I'm full-stack web developer, an online instructor. I work as an employee and free lunch or in that field. For many years I was interested in SVG graphics and animation very much because I can control it as much I want. And if slid out with interface, very interactive. So let's take a look what we're going to learn from this course. First, I'm going to introduce you what is SVG? And then we are going to learn how can we include SVG image in HTML page. And then I'm going to talking about the most important part of this video, which is viewport and view box. And next we're going to learn all these elements one by one. And then we are going to learn is VD stroke feel, grouping, element, depth, symbol, etc. At last we are going to learn next part and gradient element. And finally, we are going to learn how can we use JavaScript with this visit graphic? Hey, this is not end. And now I'm going to show you what kind of projects we're going to cover in this tutorial series. Hair, you can see an SVG image. I created this project as the 150th anniversary of Mahatma Gandhi. So what is the special about this project? If I reload the page header, you can see all the states of India reunite on their place and complete the map. Not only that, if I hover on this states, it going to feel these states with tricolor. And next we are going to create 3D shape is Vg graphic. If I hover on this page, you can see the animation. If you want to create animated UI, this is for you. And then we are going to learn how to create turbulence on image. If I reload this image here you can see the web turbulence like real water. And then we are going to create line bounce animation. If I just move my cursor in viewport area. Here you can see according to cursor position, the line is crooked. If I move the cursor, where from this line you can see the more deeper arc in this line. And then we're going to create a logo animation. If I hover my cursor on this logo, you can see the line animation. And then we're going to create these different loadings one-by-one. It's play very important role for UI design. In the next project we're going to create. But trekking animation. Suppose I want to send a cargo ship from USDA to India. And this is our rule. And if I reload this file here, you can see the red dot following the birth and going to his destination. And next we are going to create score text animation. If I scroll this way page here you can see the text change the direction according to the pot. Using this trick, you can create very interactive UI. And then we're going to create text video mosque using SVG. And you can see the result on your screen. And next we are going to create bot animation, moving car animation, scroll drawing, any mission, and many more. This course is for web designer and front-end developers. If you want to create interactive UI design, our animated UI design, then we were in reckless. If you like, opposites and exemple these arrows this course, I am waiting for you in the next video. 2. Svg Introduction: In this video, we are going to understand what is SVG and why we should use SVG and what is the very week using SVG? Svg fulcrum is scalable vector graphics. It's the image file format. As we know, there are more popular image file formats in the market like JPEG, PNG, GIF, these also bitmap images. This kind of images are dividing Excel greed, and their height and width are predefined. And if you wanted to scale these kind of images, it going to distort and their file size is also huge. Let's see an example of bitmap image. Here you can see a photograph and you can see it's a JPG photo. If I zoom this picture too much, then you can see, you can see the grid here. And if I zoom it, little VT, you can see the grid clearly. These are pixels, every pixel color or different. If we zoom bitmap image too much, you cannot see the image clearly. It going to distort your image. Now you cannot identify the image because it's a bitmap image. This kind of pictures made with pixels. I'm going to show you another example. Hello, you can see a PNG image. If I zoom this file, you can see the pixels. Because PNG also a bitmap image. Basically I wanted to see if we zoom bitmap image, we can see the pixels, our image divided by greed rows and columns. There are two problem if we use bitmap image. First, it is not scalable, and second, it is much larger in size. And it is not good for printing purpose. Let's talk about vector images. As VG is a victory manage, you will know it by name, scalable vector graphics. The format it takes is XML format. This kind of images are different from bitmap images. Let's see an example of SVG image. Here you can see the same logo, but the file for radius is Vg. It's a vector file format. But if assume this file here you can see no pixels. We can zoom it as much we want. These type of images are scalable. We can zoom it as much we want. Basically, it's used for printing purpose. So now it's clear for you what is the difference between bitmap image and victory image? If you go to enlarge the bitmap image, we'll get spoiled. Let's see why we should learn SVG. These images are very easy to eat. Just we need a text editor and you don't need to use heavy software like Photoshop Illustrator. You can edit this picture using any text editor. Next, SVG images are very scalable. You can make it as big as you want. And also you can decrease size as you want. It not going to harm your image quality. You can print SVG images high-quality at any resolution. Without reducing quality, SVG images are very zoomable, as you can see in our example as VC Pfizer, your XML. It's mean you can handle it with HTML and CSS. Svg images are searchable as like normal image. Google can search SVG images and it comes easily on the index of any search engine. And also it's scripted means. We can use JavaScript with it. We can use events we need, and we can easily animate it using CSS. And also we can easily compressed it as like other images. So let's see how we can use it in HTML. Basically, we have two ways to insert a svg image in our HTML file. First, we can use image tag. Inside the image tag. We need to provide define them. File.js, Vg. And the second method is you can use SVG tag for it. In our HTML5, we have a new tag name SVG. Using this tag, we can create any shape and we are going to learn about all the things in this tutorial series. And if you want to create own SVG image very easily, then you can use any vector graphics software like Illustrator, coral row, etc. Not only that, you can download SVG graphics and icons from website, but the cushion is why we do not use a specified all time. Why we need to use bitmap images, our website, mostly content photographs, and it has too many complex colors. And these pictures are divided by greets. And if you convert them into SVG file, its size increases. Basically, SVG images are flat color, mostly when we use logo and graphic work in our website, then you can use SVGs. So in this video, I just introduce you. What is SVG in our upcoming videos, I'm going to teach you how we can create SVG images and how we can animate eat using JavaScript, CSS, and HTML. It's a complete SVG boot camp course. I'm going to provide you all the details about SVG. Thanks for watching this video. 3. Include Svg In Html Css Tutorial: Good to see you. Bye guys. In this tutorial, we are going to learn how can we include is redefined in HTML document. With that, we are going to learn how can we change its basic properties using CSS. So let's see how it's worth helical SVG images, which I open in Illustrator Software. And I'm going to use this image on HTML page with CSS. And now I'm going to open Visual Studio Code editor and see how it's work. You can see side-by-side, I opened my Visual Studio Code editor and also open my browser. And I already creating a stable file named index.html. And also I move this image on my current working directory. Here you can see a div which pluses container. And inside my style tag, style this container, I said background-color, border, heightened width and margin lip, 30 pixel. You can see this container is bank. And now I want to insert is VGS in this container. For these, I'm going to use in a stack, simply a type IMG and our final Emmys emails dot svg. So I'm going to type in x-dot SVG. So now I'm going to save this file and reload the browser hair. You can see the picture. We can use them like any other images, PNG, JPEG, etc. And now I'm going to show you how can we use these images using CSS. So I'm going to comment out this line and I'm going back to our style section. So inside the background property, I'm going to use a tag which is URL. Inside the parentheses. We need to provide the file path, which is image dot SVG. That's it. If I save this file and reload the browser, you can see the picture, but it is coming in the background. Let me prove you that I type something Lorem text file and set this code. And if I reload the browser, you can see it's coming back ground. So I'm going to remove this line. I don't need this line. And I'm going to set this file once again and reload it. So you can say SVG images in that ground. We can resize our file using background size property. So I'm going to show you that background size 150 pixel. If I said this file and reload this browser, you can see lot of images on this D. You can see lot of images in this deep because we do not use more if you dilute for this background, I'm going to type no-repeat. If I save this file and reload this browser. Now you can see one simple picture. I know you already have a basic knowledge about CSS, but I'm assuming that you are complete beginner. So now it's clear for you, we can use SVG images with CSS and we can sit any higher than wheat. And now I'm going to show you the third method, how we can use SVG images using SVG tag. So I'm going to tie is VG for this. I'm going to open this image on my text editor. Here you can see the structure of image. You can see it's made with but someone to copy the whole SVG tag. Copy. And then I'm going to back to my index.html file. And I'm going to paste it inside the container. So I'm gonna remove this line and I'm going to paste it there. That's it. And now I want to remove these CSS background property. I don't need this now. And I'm going to save this file. If I reload this file. Here you can see the same picture. What is the main benefit if I use SVG tag like this? So in this course we are going to learn that the main benefit is we can eat is HTML and CSS. If I wanted to change the hair color, we can just hover on the color panel and just drag any color. If I save this file and reload this, those are, you can see it's just the hair color. Not only that, we can use class on this, but just type class. And our class name is 0, is 1. And I'm going to remove this time. I'm going to change the class name, just ST1. And inside the style tag, I'm going to create the selector dot, one inside the curly braces. And now we can use CSS property and their value. I'm going to use fill. I have a wonderful week, hot pink. If I said this file and reload this file in a browser, you can see now the hair color is pink. This field property use for only SVG. We eat, we can sit back ground color. Let me show you something. And now I'm going to create a hover effect. So MD use Dart Container, colon, hover, dark S, T, one. Then inside the curly braces, fill black. I just want, if I hover this image, It's going to change the background color black. So I'm going to save this file. And also I'm going to load this file on my browser. So I reloaded. So as you can see, when I hover the container exchanges background color. Similarly, we can do anything with that. We can animate this picture. We can link this picture, anything. This butts are basically object. So we can change any object color. Let me show you that. So I'm going to increase the browser size and I'm going to turn on developer option. Now we can use, now we can choose the particular element, just over on the element, something like that. And here you can see the fill color of this object. And we can change it. Just drag the color as you want. If you want blue color, just check to blue. And that's it. It's turning to a blue color. So using class, we can edit it in our style section. You can edit anything if you want to delete any object. Yes, you can. So I hope now it's clear for you how we can import SVG file. In our HTML file. We can use in a stack. And also you can use CSS. But the best way is SVG tag. So I hope you like this video. Thanks for watching this video. 4. Svg Viewport & Viewbox Tutorial: Hello friends, welcome back. Before we start learning about SVG, which would have knowledge of euphoria and view Vox. So let's jump into the computer screen. Here you can see I opened my previous STL file. Here you can see a D and its clusters container. And you can see we specify div, height and weight and background color and border. And inside the container, I use the SVG image. And now I'm going to explain you what is viewport. Viewport is the area where we see the image. As you can see, this is our boo boo. And now I'm going to resize my viewport. So I'm going to select SVG tag. Inside the style section is VG. Then inside the curly braces, first I'm going to give a border to my viewport. Border to pixel. Solid and color is black. If I said this file, now you cannot see the border because our container size, and as you, the image size is same. And now I'm going to change the image size height to a 100 pixel. We'd 200 pixels. If I save this file and reload my browser. Now you can see the border. Now this area is our viewport. Our viewport height is a 100 and the width is 200. Also, the area in which you display the image. We called it viewable. And remember, viewport is not related to image. We cannot overflow our image outside the viewport. We can scale our image inside the viewport. Let's talk about view box. What is view walks? How we display the image inside the viewport. We'll call it view box. We can zoom view walks inside the viewport area. Also, we can zoom out it. Let's make it more simple. So I'm going to open my illustrator software. Hair. You can see the whole white area. This is our viewport. And you can see a shape inside the viewport. And we can place the shape anywhere in our viewport. We can move the shape anywhere inside the view. So we can draw is Vg images inside the viewport. But if I talk about view Vox is related to zooming and spanning. Now I wanted to show this image bigger inside the viewport. And if we want, we cannot show the whole image inside the viewport, something like that. And we can do it using our view box. And you can see we do not change our view port area, but we can change image position inside the viewport area. We can scaling, scale out. And if we don't want to show the whole image, we can. So we can do it using view box. So let's see how can we do it practically. Now you can see our view bodies 200 by 200. Inside the viewport area, we can see an image which is came from view box. Here you can see a property in our SVG, which is view walks. It made with four below x-axis, y-axis, width and height is start with x axis, the y axis, then width and height. And here you can see we take similar width and height like our container. If I increase view box width and height, we can zoom out and zoom in our picture. Let me show you. I'm going to change 900. And I'm going to change also height 900. If I save this file and reload the browser, we can see it zoom out little wheat. If we increase higher than wheat in our view walks, then it zoom out our picture. The base size of the image is 500 by 500. If we increase the value, they need zoom out. And if we decrease the value, they need zooming. Let me show you. I'm going to type a 100, but 200. If I save this file and reload the browser, you can see it cut out image means it's Zoom our image. It's worked like in prospective. The closer you will go, the object will get bigger. Similarly, the object will get smaller as you go further. Let's bring back to the image to the normal position, 500 by 500. If I said this file and you look, this browser here you can see is but to his own place. Let's talk about x-axis and a y-axis. If I type X axis 170 picture, then this view VOC start from a 100 point, something from her. Reload this browser, you can see it. We can move images using x-axis and y-axis. Similarly, if I use 204 y-axis and reload the browser. Now you can see the image dot from her inside the same view port area. We can change him, his prospective and their position using view walks property. According to the view box, the image start from a 100 x-axis and y-axis. Not only that, at a time, we can zoom out our picture. So I'm going to increase heightened width below 700 by 700. If I save this file and reload my Roza, you can see it zoom out a little bit. But I would like to bet normal position. Not only that, we can use minus value for x-axis and a y-axis. If I save this file, now you can see it start from opposite direction. So let's put this image in his default position, 0, 0. If I save this file and reload this browser, here you can see is back to his own position. I hope now it's clear for you what is you vote and view walls. Just remember, viewport is outer area and view boxes inside idea. Let me show you another example that make you view Vox very clear. Hello can see a new SVG images in my browser. And you can see four different shape in this image. It's a single image, but inside the image we have four different object, circle, polygon, react, rectangle, etc. And we call it Image Sprite. Even combine different image with that. If we create single image, then it called Image Sprite. And now I want to show every object one-by-one inside this view box, inside this viewport. But the question is how it's possible, it's the single image. For this. We need to zoom this image and position this image. That's it. Our viewport height is 500 pixel. And if you'll notice, all the shapes take some amount of height, 125 pixel. So I'm going to type 125 for wheat and 125 for height. If I save this file and reload the browser, here we can see objects are not in view port area. So I need to move their position using XXS ReLu. So I'm going to type 188 pixel from x-axis. If I said this file and reload the browser, you can see our first geometrical shape. And now I'm going to change y axis. And you can see every geometrical shape one by one. So I'm going to type 125 excel for y-axis. If I save this file and reload the browser, now you can see our next geometrical shape, circle. And if I add 125 with this value, so I'm going to type 250 and save this file. Now you can see are another shape, rectangle shape. And similarly, if I type 375 and set this code, now you can see the triangular shape. All the parameters are depend on your viewport size. So I hope now you can understand how we use new Vaux in SVG pens for watching this video. See you soon. 5. Svg Line Element Tutorial: Once again, I'm back with a new tutorial. And in this video, we are going to learn about lying element. We used to draw a line. But before you draw any line, we should have knowledge about x-axis and y-axis point. Assume that this is our viewport. And we create a diagonal line in this viewport. To draw a line, you should have starting point. For starting point, we need x-axis and y-axis. And we recognize it X1 and Y1 point. Who's starting a line, we need to provide x-axis and a y-axis point. Similarly, or need to provide the endpoint to end the line and we recognize it X2 and Y2. So overall, we need for attribute to draw a line X1, Y1, X2, Y2. Without this view, we cannot create the line. So let's see how we can create it practically. Here you can see side-by-side, I opened my Visual Studio curator, and they also open my browser using Live Server extension. And I already create an HTML document. For this example. Here you can see I create a div named container and I set a background color and border to this container. And also I say it Haydn wheat, 500 pixel. And for medial alignment, I said margin 0 auto. Inside the div, you can see an SVG tag. And inside the view walks, I use x, x is 0 and y x is 0. And I say it, we then hide a 100 and a 100 inside the deep. I create agreed. For this greed. I use GTAC. I will explain you later how we can create greed in SVG. And I'm going to start it from here. First. I'm going to take a line tag. And as I told you earlier, we need for attribute to create a line. So inside the line tag, I'm going to type X1 equal to 20 pixel. And Y1. Y2, and Y1 is 40. You can assume that after every 10 pixel, I draw a line. So this is 0, this is extend and this is x2 and t. And this is why this is white in this is Y2 and tea, this is a 130 and this is why 14. So our line start from this point. And now we need to define the end point. So X2 point is 18 and our y dew point is also 40. It going to create a straight line. If I save this file, you cannot see a line because only to define a stroke color to this line. So I'm going to use stroke property. So I'm going to type stroke and I'm going to give a color to the stroke rate. If I save this file. Now you can see the line. And similarly, if you want to create a diagonal line, just increase the value of y. I'm going to type 60. If I said this file here, you can see now it's clear the diagonal line. So in that way, you can create any line. So using stoke property, we can sit color. In your upcoming video, we are going to learn more about scope. And now I'm going to create a rectangle using line. So first I'm going to draw a straight line. So I'm going to change y to value for p. So it's p at 0 state line. And then I will duplicate this line. And I'm going to start my next line from this point, someone to type X1 and Y1 40. So now our second line start from this point, and I want to end this line, this point. So our X2 point is 80, and also our Y2 point is 18. And I'm going to change the color of the stroke, blue. If I save this file, you can see the line. And I'm going to duplicate this line. And now I want to start my third line from this point. And I want to end this line, this point. For this just interchange. For these just interchange Y1 point AT and for X2 point, we need to type pointy. It is 0, it is extend, it is x 20. So I type x to t and we don't need to change y to point. I'm going to change the stroke color green. If I said this file, you can see the line. For our fourth line, I'm going to duplicate this line once again. Now our line start from this point, means x t and y t. And this line going to end this point, its mean. We don't need to change the x value, just going to change the Y2 value, 40. If I said this file, you can see the line congratulation will just create a rectangular shape using lines. So you can see using start point and end point, we create a rectangle. We can draw any geometrical shape with that. For these only to use line tag. And also we need to mention a stroke color for this line. Otherwise we can't see the line. And if I remove the greed and save the file. Now you can see without greed how it looked like. I create this grid because that you can understand our points bitter. If we use greed, it is very easy to draw a structure. So now your challenges created triangle without using greed. It's not a very difficult challenge. I hope you enjoyed this challenge. Thanks for watching this video. 6. Svg Rect Element Tutorial: Hello guys, Good to see you there. In this tutorial, we are going to learn about the element. Rect means rating. So this see what type of attribute we need to create a rectangle inside the SVG tag. Here you can see a viewport. And instead the viewport, I create a rectangle. If we want to create a rectangle like this, then we need a starting point. For this. We need x-axis and y-axis. With that, we need two other attributes. First one is wheat, and second one is height. So let's see practically how it's work. Here you can see side-by-side, I opened my Visual Studio Code editor and I opened my browser using Live Server extension. As you can see, I already create an HTML document. And I also create a div class container. And I said heightened width, background, color and border. And inside the deep, I already use SVG tag. And I said You Vox a 100 by 100 pixel. And I already create a grid structure that you can understand our points very easily. So let's start to create a rectangle. For rectangle. We need to use rectangle are ECT. To create a rectangle, we need for attribute. And I want to start my rectangle from this point. So our x-axis pointes going ti, and our y axis point is 30. And then you need to provide wheat or width. We have a attribute name week. Hey, I'm forgot to use double-quotes. We'll need to move this below inside the double quotation. Otherwise, it's not going to work. So are we these, I'm going to type 80 pixel and also need to provide height. And I'm going to provide 40 pixel. If I said this file, you can see my brother, it draw a rectangle. And I'm going to decrease this with the loo 70. And if I save this file, now our rectangle looks like perfect. And by default, our rectangle color is black and there is no stroke rectangle. To give us true, we need to use stroke property, STR, okay? E equal to inside the double quote. I'm going to use red color. If I said this file, now you can see the stroke. And if you want to change the rectangle color, then we have a property named Finn. Fill. Inside the parenthesis are filled galleries. I'm going to set your Lu. Basically, we use pulpal boundary to change background color. You can type column name, otherwise, you can use hexavalent. So I want to change the fill color pink. And if I said this file, now our rectangle background color is pink. And if I don't want to say NT, and if you don't want to say any background color to this rectangle, just you need to type none. If I said this file here, you can see there is no background color to this rectangle. For now, I'm going to use yellow. Not only that, we can say the border reduced to this rectangle, then we have to property RX and RY. So I'm going to type our X, our X equal to pin. If I said this fine, you can see it reduce our border one pixel. You don't need to type any parameter because we use few Vox. And if I use RY PAR D means radius y property. So I'm going to type our y equal to inside the courts. Basically it's word vertical and I'm going to set it to 50. If I save this file. Now can see it's changed our shape, RX working x-axis, and ROI working y-axis. So we can change radius dimension with this video. Let's summarize this process quickly. We can create this rectangle. First, we need a starting point. Heron need to pass x value and y value. And then we need to provide, we then height. And we need to we then height according to this view walks. Suppose this is our starting point and I take with 70, and we need to count it from this point. 10, 20, 30, 40, 50, 60, 70. It's sort like that. And harrowing set our x and y radius. And for stroke, I use stroke poverty. And for background color, I use fill property. We can create multiple rectangle, One SVG tag. Let me show you this. So I'm going to duplicate this line and I'm going to set our x 0.30 and a white 0.40. And I want to say to eat 14. And I want to set height going T. And I wonder set background color green. And if he said this file, now you can see the rectangle inside the rectangle. And if I remove the radius, now you can see the proper rectangle. So using this process, we can create multiple rectangle as we want. So I hope note slur for you. How can we create rectangle inside the SVG tag? Thanks for watching this video. 7. Svg Circle Element Tutorial: Hello friends, good to see you back in this tutorial, we are going to learn about circle element as you will use this element to create a circle. So let's see what kind of attribute we need to create a circle. Here you can see a circle in our viewport. If you want to draw this circle, then we need x axis and y axis. We define this X axis attribute, which cx means circle x-axis, and CY for circle y-axis. With that, we need another attribute, which is radius. Using radius attribute, we can define the size of the circle. If you want to create big or small circle, then radius is going to play the actual rule. And we defend this radius. We are. Let's get into the Visual Studio Code editor and see how it's 4k. Here you can see side-by-side, I open my browser and I opened my code editor. And I already create HTML document. And inside body tag, I already created a deep class container. And I say it height and width to this container. And inside the div tag, I use the SVG tag with view box. And I already create agreed to understand the attribute points. And now I'm going to create this article tag to create a circle first only to create a circle tag. And also we need three attributes to create the circle. Plus we need x-axis and y-axis. So attribute name is Cx equal to. And I want to make this circle from center. So I type 50 and CY for y-axis cool to 50. Now, our most important attribute is radius. Using radius, we can define the size of the circle. And who defend radius attribute using smaller article to 40. If I said this file here you can see a black color circle. Black is the default color. And if you want to change this article color, then you need to use fill attribute. So I'm going to type fill. Fill equal to. I want to use green color for this circle. If I said this file here, you can see it's turned into a green circle. And if we want to use stroke, yes, we can. Let me show you for these who need to use stroke attribute. And I want to use a red color for stroke. If I said this file here, you can see the stroke. And if we do not want to use any color, just need to type none. In Finn hair. You can see now our circle is completely transparent. For now, I'm going to use green color. And now I want to reduce this article size. So I'm going to reduce radius value 20. If I said this file, now you can see it's scaled down by 20 pixel. And also I want to move this circle to this corner. So I'm going to increase x-value AT and also need to increase why we do it. If I save this file, arrogance see, we perfectly move this circle in this corner. Not only that, we can create multiple circle in this SVG tag. So I'm going to duplicate this circle tag. Also, I'm going to change the x-value and y-value party, party. And our radius is thin and color is blue. If I said this file, now you can see the circle. So we create an image, and there are two circles in this image. You can create multiple circle. How much you want. With that, you can create rectangles, lines, triangles, etc. So now it's clear for you how we can draw circle in SVG tag. In the next tutorial, I'm going to show you how can we create ellipse element. Thanks for watching this video. 8. SVG Ellipse Element Tutorial: Once again, we'll pursue that in this tutorial. We are going to learn about elifs element. So let's see what kind of attribute we need to create a list element in SVG tag. Here you can see inside the viewport, I draw an ellipse element. To start ellip element, we need put things x-axis and y-axis. And we define x poverty with Cx and do define y property with CY. Similar to circle. Unlike circle element, we need two other properties, RAX, mean radius, x, and ROI means that ideas why? Let's see how it's working practical. Hell, you can see side-by-side eye-opener results to your curator and my brother using web server extension. And I already create a HTML document. I have a deep plus container and I sit back down, color, height and width, margin and border. In said this deep tech, I have an SVG tag. And we said view Vox view to this SVG tag. As you can see, I already create a grid system to understand the attribute points. So let's start how to create ellipse element. So first we need to type elite tag. And inside the EdTech, I'm going to take property Cx and Cy, Cx equal to 50 and CY equal to 50. Because I want to start this element middle of this view box. And now we need to provide it. It is x, xs and radius y-axis. Our x equal to 20 and radius y axis equal to 30. If I said this code here, you can see our ellipse element. By default, it's a black color. If you want to change the color of this ellipse element, then we need to use fill property. If I double them. And I want to feel this ellipse with the red color. If I said this file, now it's turned into a rate. And if you want to use true just unit to use stroke property, stroke equal to black. If I said this file here, you can see a black stroke. And if you want to make it transparent, just tech nun in fields section. Now it's completely transparent. And now I'm going to create another ellipse tool inside this SVG tag. So I'm going to duplicate this ellipse tool. And I'm going to change the RX and RY PAR party pin pointing. And I'm going to provide the fill color green. If I said this file, kerogen see another ellipse element inside this ellip element. And if you want to rotate this elif element, yes, you can. Now I'm going to use class in this ellip element CLA dollars. And our class name is second, because this is our second elif element. And inside the style section, I'm going to select this element. Second, inside this aliveness is I'm going to use a property transform, Transform Rotate. And I want to rotate this element 20 degree. If I said this file here, you can see it's routed the elif element 20 degree in his place. And if you want to rotate this element from his exact place, then you need to provide transform origin property. Let me show you that transform or isn't 50 person height and 50 percent wheat. And if I save this file, now you can see it's routed according to middle of this viewport. And I'm going to increase the rotate value 40. If I said this file, you can see we can control the rotation degree. I hope now it's clear for you what is elif element and how we can draw element in SVG tag, and how we can rotate it using CSS. Thanks for watching this video. 9. SVG Polyline Element Tutorial: Hey, once NMDA new tutorial, in this tutorial we are going to learn about polyline element. So let's see what kind of attribute we need to create a polyline shape. Here you can see a polyline shape inside the view box. You can create any type of polyline shape. You can create a hundreds of sight for your polyline element. Here you can see we have total five side in our polyline shape. And do we need points to join these two lines? Suppose I want to start my polygon shape from this red point. So we need to provide the exact x-axis and y-axis value. Similarly, for green point, we need another x-axis and y-axis when we need total five different point to create this shape. But if you want to close this shape, once again, you need to provide first x-axis and a y-axis point means our red point. So total, we need 6 to draw this shape. Now you can think we can do the same job using line element, but there is a problem. We cannot fill the shape with color. And also every time we need to provide starting point and end point. But you can create the shape using one tag, polyline tag. So let's dive into the browser and see how it's work. Here you can see I already create a HTML document. And inside the body tag, I create a div class container. And inside the div I create an SVG tag. And I said our view Vaux, a 100 by 100 pixel. And I create a grid system insect this view Vaux, who understand the values. And now I'm going to start our tag polyline. So first we need to type polyline tag. We need only one attribute to create polyline points. Inside the points. First, we need to provide the starting point, x-axis and y-axis. Suppose I wanted to start this polyline from this point. So our x axis point is 20 and our y-axis point is 20. Also. Suppose our next point is here. So, so e to provide a space. And according to this point, our S x is 0 is a t, and our y axis value is 30. And for our third, I'm going to use this point, means 60 by 60. So I'm going to use space, and I'm going to type x-axis 60 comma Y XX 60. And then we need to provide our fourth. And for our fourth, I'm going to use this one. So according to this point, our x-axis is going t and our y axis, these 50. So I'm going to pass 20 comma 50. So if I save this file, you can see a polyline shape. As you can see, by default, it's a black color. And you know the process, how we can change the polyline color. We need to use fill property. Fill green. If I said this file, now it's turned into green color. Not only that, Also, we can use stroke property. Stroke equal to rate. Now we can see the stroke. You can see who do not complete our polyline shape. That's why it do not provide the stroke from this point to this point. So only to close this point. Otherwise, the shape is unaccompanied. And you know, our end point D is our starting point, can t by 20. So I'm going to copy these points and I'm going to give a space and paste it. And if you said the slide, now you can see the stroke. Now it's complete our shape. So using polyline, you can draw any kind of shape. And if you don't want to give any background color, just tech nun in fields section. If I save this file now we can see is completely transparent. Let's summarize this lecture. To create a polyline, you need polyline tag and you need one attribute to create polyline points. To draw a line, you need to provide x-axis and a y-axis value. And for your next point, and also you need to provide x-axis and y-axis value. And the similar way is keep going on. And one thing you need to remember, your inbox should be your starting point. Otherwise, the shape would be uncompleted. And if you want to fill this shape with color, you can use fill property. And for water, you can use stroke property. So I hope now it's clear for you, how can you draw a polyline shape inside the SVG tag? Thanks for watching this video. 10. SVG Polygon Element Tutorial: Hey, good to see you back in this tutorial, we are going to learn about polygon element. Let's see what is polygon element and what type of attribute we need to create this element. Here you can see a polygon shape and you can draw multiple lines. As much u1. This is the polygon shape, but also it looked like polyline shape, which I'll cover in my previous tutorial. But there is a difference between two element and I'm going to tell about it later. As you know, we'll call this cool line joins points. And if you want to start this points, you need x-axis and y-axis values. If you want to start this polygon element from the red point, then you need to provide red x-axis, one, red y-axis point. And for green point, you need to provide green XXS point, greenway access point. And it just kept going on. But the difference between polyline and polygon element ys, you don't need to provide the endpoint to close the shape polygon element completed automatically. Suppose I'm going to delete this yellow point, something like that. In polyline element. It Don't going to draw the last line automatically. We need to provide the point to end this last line. But in polygon element, it automatically draw the line. This is the main difference between them. So let's start the practical how it's org. Where you can see side-by-side, I opened my Visual Studio Code editor and my browser using Live Server extension. And I already created a stimulus document. And inside the estimator document, I created deep plus container. And I specify background-color for this container and sit high density. And also I said border to this container. Inside the container, I create an SVG tag. And also you can see the view book size. And inside the SVG ME is accrete agreed to understand the attributes properly. So let's draw a polygon element. We need polygon tag. And inside the polygon tag or attribute is points. And I want to start my polygon shape from this point. So I'm going to type 50 comma and our y-axis is going t. And our next point is hair. Just mean a Tea Party. X-axis is 80 and y axis is 30. So I'm going to provide a space between them. And I'm going to type x-axis and y-axis 30. And next I'm going to draw a point here. Its mean x-axis is 50, y-axis is 70. So I'm going to type space. X-axis is 50 and the y-axis is 70. So if I save this file, here, you can see a triangle shape. And now I want to set a background color to this shape. So I'm going to use field poverty. Feel equal to green. If I save this file, hello can see now it's turned into green color. And to set a border, we need to use stroke property. Stroke goal to rate. If I said this file here, you can see a red stroke. And if you'll notice, you can see who just provide 3.502080, 30, and 50, 70, but we'll do not provide the endpoint. And for this last line, I do nothing. It's automatically draw the last line. But in your previous tutorial means polyline tutorial. We need to mention the last line. Otherwise, it's not going to compete the object. And now I want to draw another point where it's mean. Sss is 30 and y axis is 50. So I'm going to provide 13 comma 50. If I set this file, you can see it draw our last line automatically. If you want to create a graph, then polyline is great for you. And if you want to create shapes, then I recommend to use polygon element. And if you want to make it transparent, you know the process just need to type none infill section. That's it. Now you can see it's totally transparent. I hope you understand polygon element. Thanks for watching this video. 11. SVG Path Element Tutorial: Hey, once again, I'm back with a new tag, which is but tag. But that is all of the most advanced in SVG. You can draw any kind of fit using this element. Using this element, you can draw a line, circle, rectangle, polygon shape, and meaning. So let's see an example and try to understand how we can create a shape using but element head. You can see inside my beautiful, we create a basic shape using but, and you know, when to line joins, we'll call that position points. Suppose that you want to start this shape from the ping point. You need to provide the coordinates mean x-axis and a y-axis and do need to follow the similar steps for green point, blue point, and red point. And from red point to pinpoint, you can see a curved shape. For these, we need to use arc command so you can draw any shape very easy. There are a lot of shapes. Our polygon, circle, line, etc. For these, we need to use different commands. Let's see the commands here. You can see the commands related is VBA and you divide it in four category. Our first commodities line command. And instead the line command, we have four different Command L, H, v, and z. So in this tutorial, we are going to learn line command and then scum, UV visible curb and quadratic Bezier curves. And we're going to learn about this curve in our next tutorial. And our list command is our command. So I'm going to teach you all the commands one by one. So let's start with line command. Here you can see I already created estimator document and I already created IEP plus container and hair. You can see I still use d. I already set a background color and I said heightened width. And I also said border. And inside this div, I already take SVG tag. And I also said you Vox in this deem. And temporarily I create agreed inside this SVG tag. Using this greed is very easy to understand our attributes. So let's start the practical. So first I'm going to take part-time. But to start this part, we need to important property named d t equal to 0. Instead the double-quotes, we need to provide the points demons draw. So inside the parentheses first unit to take him command. And m should be capital. Using capital M, we can define the starting point of our cursor. And now I'm going to take a point from where I wanted to start this bug. I wanted to start my path from this point. Mean Sx is 20, y-axis 30. So a 100 times m going T comma Y axis 30. And if you want to draw a simple line, you need to use capital l command. And I want to draw a line from this point to this point. So x-axis is 80 and the y-axis is 30. So I'm going to pass 18 coma 30, and also need to provide this true. Otherwise, we cannot see the line. I'll stroke color is red. So if I said this file here, you can see a red line. So first unit to provide the starting point using income on. With that, you need to provide x-axis and y-axis. Then you need to provide a space. If you want to draw a line, then you need to use l command. And also you need to provide x-axis and y-axis. And if you want to create a straight line just using 2-point, you can remove this l command. If I save this file, hello can see our line also exist. You can see there is no changes. It's also worth, it's also work for when we create a straight line. But for now I'm going to use l command. And now I want to draw another vertical line. So I'm going to provide a space and I'm going to type alexis it T and comma y axis 70. If I said this slide, as you can see, it is draw a line and by default is promoted black color in this shape. And if you want to change the color, you know the process, you need to use fill property. And I want to fill this shape with green color. If I said this file, you can see it's turned into green color. And now I create another line to this point. So I'm going to provide a space and I'm going to use Lancome on Capitol Hill. And excesses video is 14 comma and the y-axis is always 80. If I said this file, you can see it is drawing a line from this point to this point. You can create any type of diagonal line. It's not mandatory to create a straight line. You can think is pretty similar to polyline element. Similarly, to complete the shape, you need to provide the last point. Simple, if I want to induce shape, just need to type 20 and 30. If I set this file. Now you can see it's completely shape. And if you don't want to provide the endpoint, you can use capitals it. If I save this file, you can see the similar result. There is no changes. And if you want to initiate from this point, you can just remove these values. And so the file. Now you can see it's complete our shape from this point. Ssid means Spot. Come on. If we want to close any path, we can use it command. And now I'm going to introduce you to new commander h and V. H mean horizontal line, v means vertical line. Here you can see the line we need to provide who coordinates to create the line x-axis and y-axis. We know, we just need to create a straight line. For these. We don't need to provide this last point. We can use only horizontal point. So I'm going to remove the fill command and replace h command. And if I said this file here you can see there is no changes. Its create a line from 20 pixel to pixel. And if I increase the value 99 and set the file, none can see it change your shape. Each command only work for horizontal side. So I'm going to reset this shape. And now I'm going to show you the V command for these don't need to provide x-axis, just need to provide y-axis. Let me show you. First I type capital V, and now I want to draw a line from 30 to 90 point. So I'm going to type VII 90. If I save this file. Now you can see is increased the line size vertically. And now I want to create a rectangular shape. So I'm going to provide another h point, mean XXS point H 20. If I save this file. Now we can see is create a perfect rectangle. And or zip command automatically, automatically complete this shape. And hit Command always create a straight line. That means close path command. So let me explain this whole thing once again. First you need to take, but deck inside the park tech, you need to use a special property. D. B means draw an insect this D first unit to use income and you need to specify the start point from this income on. If you don't provide him command, it not going to draw anything. And to draw a line, you can use il commander. And after l command, you need to provide x-axis point and a y-axis point. Otherwise, you can use horizontal command and vertical command. And lust you need to use zip command means close path command. It going to close your part. I hope now it's clear for you. Thanks for watching this video. 12. Svg Path Element Tutorial ll: Good to see you back guys. This is our second video related SVG element. In this tutorial, we are going to learn about curved commands. As I told you earlier, we have put all four types of commands in path element lambda mn, which you compete in our previous video. And in this tutorial, we're going to learn about cubic Bezier curves and quadratic Bezier curves. To create a QV curve, we have two commands, C and S. And for quadratic curve, we have also to Command U and P. So first, let's try to understand how we can create cubic Bezier curves. Can see inside my viewport, you can see a curve. And we have two curves. One curve is palm downside, and another curve is from upside to create a path. First only two points, starting point and end point. Suppose radius our starting point, and blue is our end point. We create this curve using Cubic Bezier curves. For these, we need two points to create this curve. In our first green point, we need to provide x-axis and y-axis value. Also, in our second green point, we need to provide x-axis and y-axis. We loop and we recognize this point with C Command. C means cubic curves. So horny create a C point. It's automatically create a curve. It's not going to tell us the point, but it going to follow the point. And you can control the curb depth using y-axis point. Just you need to remember between starting and end point, you need to provide to curb point to create a cubic Bezier curves. And we have to write common like this. First we need to take moving point means capital aim. And you need to define the starting point using x-axis and y-axis. Here we can see our excesses. This 15 and y axis is 50. And as you can see in blue color, this is our endpoint, 70 and 50. So between start point and end point, we need to use the command to use cubic wizard. And I create our first green point during these 70 coordinates means x axis is 20 and y axis is 70. And next we provide our analog curve point. Excesses is 50 and y-axis is 30. And you need to give space between these two curves coordinates. And you can create both the points upside, otherwise downside, it's totally depend on you. The most important thing is you need to create two points. Let me show you another example of cubic Bezier curves. Here you can see it good. The curbs upset to the starting point for these postwar neat starting been an endpoint. And we need another 2 to create this curve. So let's see the practical. How can we create cubic Bezier curves? Here you can see side-by-side, I opened my visits to the curator and my browser using Live Server extension. And I already created estimator document. And inside the HTML document, I create an SVG image and I create a grid structure to understand the attributes. So first, I'm going to create a deck. And I want to use field property none. So I'm going to type fill equal to inside the condition none. And I want to reach stroke for my path. So I'm going to use stroke property equal to rate and inside the D attribute. And I want to start my path using moving tool. So I prays capital aim, our x-axis and our y-axis value is 16. So this is the starting point of our path. And also I need to provide the endpoint. So I provide space and I'm going to type 60 comma 16. If I said this file here you can see is draw a line and let me increase the line in X86. I want to end this line in this point. So I'm going to increase the x-axis value 80. If I save this file, now you can see it increase the line size. I now I want to take a curve between these 2. So between starting and end point, you need to take a command which is C. And C should be capital. After C, we need to provide the point. So I'm going to use 20 x-axis and y-axis point is 70. If I save this file, you can see the line is gone because we use cubic curve. So we need to provide two points. Surplus space, I'm going to create another point, 50 and 30. If I said this file, now you can see the curve. Here. You can see it great to curve in this point and in this point. So we need to provide two points to create this curve. And if I increase the y-axis below 70 to 90 and save this file. Now we can see it creates a much more deeper curve. And if we decrease the second curve, y-axis value 000 and said this file, as you can see, our second curve is more deeper. At the top. Not only that, we can use minus values. If I use minus V2, minus 40 and save this file. Now you can see it's going more deeper in topside. So now it's clear for you to create a QV curve, we need two coordinates. Not only that, we can create one-sided curve. Let me show you that if I use y-axis tin for our first. And similarly, if I use y-axis tin for our second and said this file. Now you can see. Good one-sided curve. And if you want to create two curve using one part, then you need to use another command, which is S command and RS command. All this work with our QV curve, mean Sica MAN. So first, let me show you the example. Here. You can see a curve but Hara use to cubic Bezier curve in single. But so similarly fast, we have one starting point and end point. But as you can see, there is a another curve. But as you know, to create our first curve, we need two attributes. And we need to type commands, something like that. After creating this curve, I want to create another curve using the same bug. For this, we need to use S command. If we use S command, we don't need to provide the starting point, simply we need to type in coordinates. And you don't need to provide two coordinates like C command, simply you need to type the black dot coordinates and we have to write something like this. Cool. After C command, you need to use a SQL command. First I type in command and between S and income, and we need to provide the single curve point. So let's see the practical how its work. So once again, I'm back to my Visual Studio Code editor. So first I'm going to change the current points, C to T and C u y axis. In our second x axis is 40, and y X is this 18. And if I said this file, you can see it's credit card in downside. And if I decrease the input of this curve, it did 250. And save this file. Now you can see the curve, its creator, perfect arc shape. As I told you, I want to create a new curve with that. So I'm going to use is Command. And for our second curve, I want to create point where pins x-axis will be 70 and y axis value is 20. So I'm going to type 70 comma going t and also need to provide the end point for this curve. So I'm going to use 90 comma 60. If I said this file. Now you can see the curve. I hope it's clear for you. How can we create to QV curve in one plot? If you want to create one QV curve, just unit to use C command. And if you want to create two QV curve, then you need to use a SQL command. And our S command only work with QV curve, not quadratic curve. Simply, you need to provide the end point. And between them, you need to provide the curve point. That's it. So let's talk about quadratic Bezier curves. This is the example of quadratic Bezier curve. First we need to provide the starting point. Then you need to provide the endpoint. The main different between quadratic and cubic or v's in quadratic curve, you need to provide one guard point, something like this green point, and then it's going to bend automatically according to this green point. Let's see the practical example, how its work. So let's take a quadratic on top of this line. So I'm going to type x-axis is 20 and y axis is 30. If I save this file, here, you can see it create a quadratic curve. And if you want to create more higher curve, then just you need to decrease the y-axis value. Y axes will use tin. If I save this file, see more hierarchical. And if we want to create a curve under this deadline, just unit to increase the y-axis value 80. If I save this file, now we can see is create an arc shape under the line. And if we want to move this Carpenter from this site to decide just in it to increase the exits is 40. If I save this file, you can see it's moved the curb point. So this is our quadratic curve. So this is our CoreData curve. Basically, you need to provide a point between the start point and end point. And you need to use q command to specify this point. And if you want to create two quadratic curve in one, but then you need to use command. So let me show you how the commands work. Here you can see in a single path, we create two quadratic Bezier curve. First we need to type one starting 0.1 end point. Between starting point and end point, we need to type Q point to create the first curve. And you know, the process. And if we want to create our second quadratic curve, simply, just only to one end point. And we don't need to provide the, any curve point according to the green point, is going to create some kind of curve in opposite directions. The main benefit is we don't need to provide the second curve point, green point, we need to use DO command. And for barbell point means endpoint. We need to use the command. So let's see the practical how its work. So once again, I'm back to my Visual Studio Code editor. So first I'm going to change the q coordinates, 30 by 30. If I save this file, you can see it creates an arc shape in upside. Then simply just need to use the command. Because we need to create another quadratic curve software. We need to provide the x-axis and y-axis point. So x-axis, I'm going to take 90 and from y-axis I'm going to take 60. If I said this file here, you can see the curve. So you can see it's automatically create this curve just to take an endpoint, not carp point. This t come and work with, you. Come on coordinates without queue command. It's not going to work. It's only work with quadratic curve, not cubic curve. So I hope now it's clear for you what is QV curve and Ohad is quadratic curve. In cubic curve, you need to provide two coordinates point and in quantity curve, you need to provide only one coordinates point. This is the main difference between these two curve. So thanks for watching this video. See you in the next tutorial. 13. Svg Path Element Tutorial lll: Hello guys. This is our third tutorial about SVG path element. And in this tutorial, we are going to learn about arc command. As I told you earlier in this tutorial, we have four different command in SVG part tag. And we learned line command, cubic Bezier curve and quadratic Bezier curve in our previous videos. So in this tutorial, we're going to cover our command. To create an arc, we need to use a command. With that, we need to use some multiple properties. So there see the properties. Here you can see are in our view box. It's looked like a hub circle. To create an arc, you should have two points, start point and end point. And we need to provide their existence and y-axis they do to define their position between start point and end point, we need to use a command. A means our command. With our command, we need to provide XXS point and y axis point. This point, I'm going to define the radius of this arc, length depth of the arc. If we move the radius for the to the center point, then is going to create the more depth to the arc. So let's see the command. First. You need to take him Command M means moving point. Then you need to provide starting point x equals 0 and y axes. We do an endpoint x-axis and y-axis with glue. Between these two points. We need to type the command. First, we need to provide the x-axis and a y-axis blue for the carp point. And then you need to provide the three different parameter. So let's try to understand the parameters. Here you can see with our command, three other parameters. We'll call the first parameter x axis rotation. It can rotate our circle from the x axis point. Basically, we don't use this point most of the time. We use 0 V2 and we need to very careful with this point. Our next parameter is large, our flag. With that point, we can define the circle size. By default, it's come with 0 means small arc, and it's come with two value, one or 0. If I use one value, it going to increase the size. And our last parameter is sweet flagged by default, it's property is one, and it also come with two values. 0 or 11 means it will be built where we want to be. But if we use 0 value, something like that, they need going to create in opposite direction. You don't need to change existence, glue and waxes. They do basically just unit to play with sweet flip parameter. It's going to create your arc in opposite direction if we play with this parameter. So let's see the practical and try to create the arc in your browser. So here you can see I already create a HTML document, and I already created Eve, which classes container. And I take SVG tag inside this div. And I already said view Vox a 100 by a 100. And we also created temporary agreed to understand the attributes. So let's draw a arc. As you can see, I already take a path element and I said red color for the parts true. And for fill color. I sit in and as you know, first we need to use deep poverty to draw a line. First only to provide the moving point and the endpoint. And we need to use capital. Aim to start the moving point. X axis tin and y axis is 50 space. And now I'm going to provide the endpoint. Xss is 90 and y axes is 50. So it's going to create a line from this point to this point. So if I said this file here, you can see the line. And now I'm going to create the arc between start point and end point. For these, we need to use capital a command to create a perfect arc. We need to take middle point. Basically, I wanted to say, I want to create a point in that position. So you need to provide x-axis 50 comma y axis 30. If I said this file using nothing in our greet, her, we just provide one parameter. So you need to provide other three parameters. First, we need to provide extradition parameter and I'm going to set it 0. And for large flat parameter, I'm going to take 0. And for swift black, I'm going to take one. If I said this file here, you can see it creates an arc. We can change arc date using y-axis value. If I reduce this the loop, and I'm going to say tin and satisfied. Here you can see it reduce the depth. And if I said y, x is 0 and set this file here you can see it's simply draw a line. And if we want to increase the day, we need to increase the y-axis value if I said it 50 and satisfied. Here you can see the Arc de. And now we are going to learn what does large plaque parameter. Here you can see our lacZ flag value is 0. If I set one and set this file, you can see that the arc has groomed. Just you need to remember. 0 means smaller arc. And one min, larger arc and dense come swift black parameter. It has to value one or 0. It can change direction of the arc. If I set it 0 and set this file, you can see the arc in opposite direction. And also I'm going to change this value to 0. If I said this file. Now you can see if you want to show the opposite direction arc, then just interchange these Suite plug-in. So for now I'm going to set it to one. And I'm going to save this file. And now I want to create another line with this arc. I want to create a pie shape using this arc. I want to create a point in this position. Up to this endpoint, I'm going to draw a line using l command. So I'm going to type capital L, and I'm going to use x axis 50 and y-axis 80. If I said this file here, you can see it creates a line. And now I want to join the inline to the starting point. For these, I'm going to use zip command. As you know, SSID means close path command. If I save this file here, you can see it close out bug. And I want to fill this shape with green color. So I'm going to type fill green. If I said this file here, you can see the pie shape. And now I'm going to play with these parameters. If I change this week's lab parameter 0 and set this file. Here you can see it creates shaped like stealth bomber aircraft. And if we change the flag value one and save this file. Here you can see it inverts the pie shape. It increased the art size in opposite direction. And if we change sweet flag value one and save this file. Here you can see it has grown upwards. So here you can see using a command, you can create different type of shape just enough to play with their parameters. And now I'm going to play with this parameter x-axis rotation. But before I'm going to decrease the size. So I'm going to set this parameter. So I'm going to say this parameter is 0. Now it's back to its normal position. And now I'm going to change x axis rotation value. So first I'm going to decrease the y-axis value 30. And then I'm going to increase the extradition parameters. We're going t. If I said this file, now you can see it rotate our arc 20 degree. And if I change this value AT and set this file, It's wrecked very different. We always sit extradition balloon 0. You can play and experiment with this parameter. I hope now it's clear for you what is our command in path tag. Thanks for watching this video. See you in the next tutorial. 14. Svg Text Element Tutorial: Hello friends, good to see you back. In this tutorial, we are going to learn about a new element, which is text. If you read something in SVG tag, you need to use text element. So let's see how it's work. Here you can see this is our viewport. And inside this viewport, I write a text, lorem ipsum. To write this text, we need to enter views x-axis and y-axis. And the Takes start from the exact joining position. It started bottom of the text and you need to remember it. So let's see the practical how it's work. Here you can see side-by-side, I opened my Visual Studio Code editor and my browser using SQL Server extension. And I already created estimate document. Inside the estimator document, I create a deep container and inside the container, I dry it is Vg him is viewport a 100 by a 100. And I also create a grid structure to understand the attributes. And now I'm going to create our tech stack. So I'm going to type text. So this is our text tag. And inside the tech stack, I'm going to write some text. Lorem three. If you use Visual Studio Code Editor, you are already familiar about this streak. And now I'm going to provide x-axis and y-axis attribute X axis equal to 30 and y axis equal to 50. If I said this file here, you can see the text. And if you notice, you can see it takes start from y-axis baseline and also x-axis baseline. Without y-axis and x-axis, we have another attribute, name text Anchor. So I'm going to call this attribute text Anchor. Using this attribute, we can send that out takes horizontally. If you want to align your taste, then it's split the vital role. And we have three type of value in this text Anchor attribute, start, middle, and end. Let me show you if I type medial and set this file here, you can see It's immediate outtakes according to this point, because our x-axis is 30. To understand it better, I want to remove this text. If I save this file, now you can see it align our text according to X value x 30. So it's a line outtakes according to this point. And if I use in alignment, so I'm going to type in and said this file. Now you can see it takes from the starting point mean X and Y 50. And if I use default value, which is start and set this file, as you can see, it start from the default value. And if you want to color your text, can use the fill property. Let me show you feel equal to rate. If I said this file, you can see the text color is red. And now I'm going to use CSS property with the text tag. So I'm going to give you a class to this tag plus equal to text. And I'm going to call this class inside the style tag. Dot takes inside the curly braces. And now I want to keep a stroke. So this takes, so I'm going to use stroke property. Blue. Stroke is blue. If I said this file, you can see the blue stroke. Not only that, we can use this field property inside this style section. So I'm going to cut this property. And I'm going to use here, if I save the file, you can see the same result. And if you want to make the fill color transparent, just like none here. And 75. And now you can see on his stroke in the text and its yellow-colored is transparent. For now, I'm going to use black fill color. And I don't want any stroke, so I'm going to type None. And now I'm going to use other CSS property related text, like form size. Let me show you. One size is 10 pixel. If I save this file, you can see the font size. It's scaled down our text size. And if we want to use different form family, yes, we can. Let me show you. And I'm going to use impact from family. I am the ACT. If I said this slide, you can see the font-style. Suppose we have a different text. So I want to change the text and I'm going to insert a name at one. Means. Now you can see we have prototype who works at one and mean. And now I want to break this line. I want to mean GD below, then add one. For these. We cannot use break tag like CSS. We need to use a different tag, an empty span. Let me show you. So I'm going to type after Edwin the span. And I'm going to move this means word inside this tag. If I said this file, you can see there is no different. Now I want to align this or mean age for these, we have put on two properties, DX and DY. So first I'm going to use DY DX. Dy DX, working vertically. We can vertically align the text using Dui DAG. As you can see, our y-value is 50. So I'm going to type 30 here. Now you can guess the mean. You're could be moving upward, the baseline, something here. But it's not going to work like that. If I said this file, you can see it's moved downward. It's not going to count this value from the view port area is going to count the value from the baseline of the text when 50 pixel. So it's moved 30 pixels from the baseline, 10, 20, and 30. So I'm going to replace the value with 10 pixel. If I save this file, now you can see the result. The Dui attribute worked relatively from the baseline position. And in a similar way, bx will work. Let me show you dx equal to 20. If I said this file, you can see the result. It moved 20 pixel right from its place because it's exempt position is here. From this point, it moved 20 pixel, right? And if you want to align this word according to this word, you need to use a minus value. Let me show you. If I use minus 25 and said the file, you can see the alignment. Now it's perfectly aligned. So if we want to control subtexts alignment, you need to use, you need to use a dy, dy and dx attribute with the span tag. Not really that you can sit plus here. So I'm going to sit a class here. Plus means. And now I'm going to call this class inside the style tag.me. Inside the curly braces. First I'm going to change the fill color, blue. If I save this file, you can see the color. So we can use different CSS properties. For the subtext tag. We cannot use the attack to divide this line. And if you want to use absolute position for this text, yes, you can. Let me show you. Just need to remove the and also I'm going to change the exit. If I said this file, you can see the takes y axis then according to the absolute position, mins view box position and excesses is 25. If I increase the y-axis, they do 30. And then set the file. Now it's clear for you how its work. So if we use simply x-axis and a y-axis attribute with the span. Dennett's work like CSS absolute physician. And if we want to use DYAMAND x-value, then it's worked like CSS relative position. And we can use multiple CSS property with that, like later space, font-weight, etc. So now it's clear for you what is tech stack in SVG and how we can use it. Thanks for watching this video. 15. Svg Image Element Tutorial: Hello friends, good to see you back. In this tutorial, we are going to learn about image element as we use IMG tag in HTML to insert an image. Similarly, we use image tag in SVG to insert an image. So let's see what attribute we need to show an image inside the SVG tag. Suppose this is our viewport, and I want to show this tiger image inside this viewport. So first we need XXS point, and then we need y axis point, and then we need image width and image height. And if we do not provide XXS, Zulu and y axes, they loo. By default, it starts with 0. And similarly, if we do not provide Haydn UI, by default, it's still 0, then we cannot see the image. So heightened wheat property is very important in SVG image. So let's start the practical and see how it's work. Yeah, you can see side-by-side, I opened my videos to code editor and my browser using Live Server extension. And I already create a HTML document. And inside the HTML document, I created a deep class container. And inside this div, I kick it is Vg tag with a 100 by a 100 vw walks. And to understand the attributes, I create a grid structure. So first I'm going to take image tag, then insert the image tag. And now I'm going to use height and width property for this image. We'd equal to a 100, height equal to a 100. And now we need to provide the image. But for this, we have a special attribute, X link, HRTF. Let me show you first learned to type small lakes link, then colon HRTF equal to insert the double-quotes, we need to provide the path as like HTML image tag hesitancy in my current working directory, image dot JPEG. So I'm going to use this image. So I'm going to type image dot JPEG. If I said this file here, you can see the image inside my view box. I said this image according to view box height and width. If I reduce the wheat Something 70 and set this file, you can see the result. It takes 70 bucks a week. And if you notice, you can see according to which size is also changed our height. So I'm going to use 30 pixel width and set this file. Now you can see it's scaled own our image. And if you want to change the image position using x-axis and y-axis? Yes, you can. Let me show you. So I'm going to use XXS property X equal to 30. If I said this file here, you can see the inner start from x 30 pixels. This is position is work relatively, not absolutely. Let me show you. If I use y axis, y axis equal to 10 and set this file. Here, you can see it's relatively MOOC 10 pixel in y-axis. And with this image tag, we can use but deck, circle, rectangle, etc. Let me show you. Now I want to draw a line over the image from this point to this point or this, I'm going to use a path tag. And I'm going to use draw attribute D. D equal to inside the double quotes capital M, 1010 pixel, comma 60 pixel, its mean, this point. And I want to draw a line from this point to this point and are indexed Luis 90 pixel. And our lipid envelope is 60 pixel. And we also need to provide a stroke color to this, but otherwise we cannot see the bug. So I'm going to use stroke property, stroke equal to red. If I said this file, you can see the line is overlap the image. So you can use any tag with that. I hope you like this video and it's clear for you how we can use image in SVG. Thanks for watching this video. 16. Svg Stroke Properties Tutorial: Hello guys, Good to see you back. In this tutorial, we are going to learn about stroke properties. So without wasting your time, Let's see All the stroke properties. Head you can see overall we have protons, seven properties. Stroke, stroke. We'd stroke opacity, stroke line, gap, stroke line join, stroke dash, LA, and stroke desk opposite. In this tutorial, we're going to learn the seven properties. So let's start the practical and tried to understand how its work. So finally, I'm back to my computer screen. Here you can see side-by-side, I opened my results to do co-writer and my browser using Live Server extension. And I already create a HTML document. And inside ME SVG tag, I already create a rectangular shape without stroke. As you can see, it's filled, color is green. So let's start that using properties. Our first property is stroke. So I'm going to use this property, stroke and stroke galleries rate. If I said this file here, you can see it is true. So using color name, we can assign a stroke color, not only that, we can use hex value, RGB value. Let me show you. And now I'm going to open a new tab and I'm going to search color pixel value. Here you can see your website HTML color codes. I'm going to click on this website. And Heracles a lot of colors. If I click on this chart section, and you can see a lot of colors with their hexavalent. And I'm going to use something like this color, orange. If I click on this color, is redirect to a page. And here you can see the hexavalent. If I copy this value and use it here. And if I save this file and show you my estimate page here, you can see orange stroke color. In the similar way, we can use RGB value for our stroke property. Let me show you. If I go back to my HTML color page. Here you can see some colors. And I'm going to use this blue color very int for my stroke. So I'm going to copy this value and I'm going to tie our GB. And then I'm going to replace this blue. And if I save this file and showing my browser, now you can see the blues, true? Sorry, it's not properly visible. So let's make it more visible. So I'm going to use deeper variant of this color. And if I save this file, now you can see the deep blue stroke. I just wanted to say we can use three type of values, RGB, hexa code, and color name. And now I'm going to show you our next property, wikis stroke width. So I'm going to type stroke we, using this property, we can control the thickness of the stroke. So here I'm going to type three. If I said this file, you can see the thickness of the stroke. If I increase the value, it increase our stroke thickness. Not only that, we can use decimal value 0.3. If I said this file, now you can see the stroke thickness. Now it's look very thin. So for now, I'm going to use to value a next our third property is stroke opacity. So I'm gonna type stroke dash opacity. With this property, we can control the transparency of our stroke. If I use 0 value and save this file, now it's completely transparent. And if I use one value, now it's completely visible. So between 0 to one, we can use any additional value. Let me show you some other time, 0.5. If I save this file. Now you can see it's semi-transparent. Now you can see the background green color through this, true, because it's 50 percent transparent. So for now, I'm going to use one value. Now our next property is stroke line cap. For this example, we need to create a line. So let's create a line using line tab line. And I want to give a class to this line plus line. We already learned in our previous videos how we can draw a line. We need to use X1 value. First, we need to provide the X1, X1 equal to 20, and Y1 equal to 20. So I'm going to start this line from this point. And now we need to provide the finishing point of this line. So I'm going to type X2 equal to 80 and a Y to equal to 20. And now I'm going to use this line class, some to copy this className. And I'm going to call it hair dark line inside the curly braces. Our first property is true and our stroke color is red. If I said this slide, you can see the line. And now I want to increase the stroke thickness. So I'm going to use stroke width property. And I'm going to use two for the stroke. Now you can see the stroke thickness. And now I'm going to use our next property, which is stroke line gap. So I'm gonna type strobe line cap. Basically stroke line cap have three value but square and round. But is the default value. Straw. If I save this file here, you can see there is no changes. But if I use square value and save this file, now you can see it's changed the stroke width little bit. Basically, it's increased the line wheat. So let me explain you what happening here. Here you can see a stroke line using but property. Suppose our stroke width is four. You can see the baseline in black color, our stroke two pixel above the black line and two pixel down the black line. But if I use square root property, here you can see two pixel above and two pixel down. With that, it add two pixel, both of the side. So it's overall increase the line width for pixel to pixel in lip side and two pixel in the right side. But if we use but puberty, it do not add stroke both of the side. So this is the basic difference between buttons square property and are less property is round. If I use this property and save this file. Now you can see the stroke corner. It's rounded, so it's clear for you. Basically, landscape property work on the edges. Let's talk about our next property, which is stroke line join. Line joins mean, where both the line join each other. We can use different type of effect in this join. So let's use the property. So I'm going to type stroke line join. Basically we have total three value for this property, miter around RB bill. So first, I'm going to use miter. If I said this file here, you can see there is no changes because it's the default value. But if I use round relu and said this file, and now you can see the round effect in every corners. And our third varies BY will. Let me show you. If I said this file. Now you can see there is a small cut in their corners. If I use this, the ALU is going to cut the joint ages. We can use this poverty on enjoins, not the line ages. And now I'm going to use our sixth property, which is stroke dash, ie. Someone who type straw, dash, eddie. If you remember, the CSS border style, like dotted desk, etc. Similarly, stroke desk area property work. We can create the desk effect. Use this property. Let me show you. Suppose I create a two pixel das comma. And then we need to provide the gap size. And our gap says is, suppose three pixels. If I save this file. Now you can see the desk true. Suppose all the dots are excel and all the gaps are three pixel. And now I want to increase the gap size. So I'm going to increase this below seven. If I save this file. Now you can see the distance between these pixels. And I also want to increase the pixel size 50 pixels. If I save this file. Now you can see the deaths sides. Suppose now you want to pixel desk size and put pixel gap size for these. We can write this value in this way, just step two. If I save this file, now you can see that pixel sizes to also the gap size is 2. Similarly, if I use one pixel and said this file, now the pixel sizes one also gets us this one. Not only that, we can use decimal value for this Deseret, let me show you. So I'm going to use 0.6. If I said this file. Now you can see the desk size. So let's make it legal advance. For now. For now, our desk size is five and our gap size is two. And once again, our destinies three. If I save this file. Now you can see this true. And then I give another space, two. If I said this file. Now you can see it's looked pretty advanced. How do you can see our first death size is five and our space size is two. And then our second DES has is three, and space size is two. So now it's clear for you how we can use this dish, a property to create different stroke effect. And Vince come our less property, which is stroke desktop site. So I'm going to type stroke death, upset. Stroke deaths, opposite mean. You can move the desk points. It'll be to the left side. Otherwise, right side. Let me show you. Just focus on the corner of this rectangle. So I'm going to use one property. If I save this file, you can see the corners. It's Mobley little bit. And now I wanted to move this desk three pixel. If I said this file. Now you can see Daesh unmoved three-pixel lift. So these are our seven stroke properties. Our first property is stroke. We can sit any color using this property. And our second property is wheat. Using this property, we can control the thickness of the stroke. And our third property is stroke opacity. Using this property, we can control the transparency of the stroke and using Lambda and property, we can control the joint effects. We can use round effect, we can use hubcaps effect, etcetera. And using stroke desk or a property we can create dash in our stroke. And using dash opposite property, we can move the dash. And our last property is stroke line cap. We can use this Lanka property, basically inlines, not in the shapes. So notice here for you, what are the stroke properties? So thanks for watching this video. Stay tuned for our next tutorial. 17. Svg Fill Properties Tutorial: Hello guys, Good to see you back. In this tutorial, we are going to learn about field properties. So let's see the properties. We have put all three property related field, fill, fill capacity and filled room. So let's try to explore it practically how it's Orc head. You can see side-by-side, I open my Visual Studio Code editor and my browser using several extinction. And as you can see, I already created estimate document index.html. And inside the SQL document, I create a div class container. And inside this container, I create an SVG tag with a 100 by a 100 view box. And inside this SVG tag, I create agreed to understand the attributes and then create a polygon shape. Here you can see the shape. It's look like a star. And they also give this polygon shape, a class which is shape and hair. You can see using this class, we'll style the shape, stroke, red color, fill, none. If I do not use any fill color, if I remove this non keyword and said this file here, you can see it fill our shape color with black. So this is our first property, which is Phil. Here we can use any type of value, RGB, value, hex value, otherwise color name. For now I'm going to use a color name which is green. If I said this file here, you can see it's fill our shape with color. And now I'm going to use RGB value, and I'm going to use yellow color. If I said this file here, you can see it fill the shape with yellow color, heavy, provide RGB value. In a similar way. Hexa will work. Let me show you. Now I'm going to use hexavalent. So first we need to use hash, and I want to fill this dark color with blue summer type 0000, 0000. If, if, if I said this file here, you can see the Sheffield with blue color. Let's talk about our next property, which is Fill Opacity. Similar type fill opacity. We can control the transparency using this property. If I said 0 and said this file, you can see is completely transparent. And if I set one and then save the file. Here you can see now it's completely visible. Between 10, we need to use decimal points to control the transparency. Let me show you if I use 0.5 and save this file. Now it's semi-transparent. And if you want to reduce the time spent more than just type 0.2 and save the file. Now it's less transparent than previous one. Similarly, if you want to increase the transparency, just type 0.9 and 75, so you can control as much you want. And our last and third property is Phil rule. Let me show you. This property work only on complex design. I want to say when shapes overlapping each other, then it's work. I draw these complex star-shaped using single polygon element. Here you can see total spike. But between all this spike here you can see a different shape. So we can control this ship color. We can transparently it. Let me show you this field root property comes with Tuvalu non-zero. So first I'm going to use this value non-zero. If I said this file here, you can see there is no changes because it's the default value of field rule. But there is another value which is even odd. Let me show you. If I save this file. Now you can see it transparent our medial shape, but it not removed all the ship colors. So this is the use case of field rural property. I hope. Now it's clear for you. Thanks for watching this video. Stay tuned for our next tutorial. 18. Svg Grouping Elements Tutorial: Hello guys, Good to see you back. In this tutorial, we are going to learn grouping element. So let's start the practical and tried to understand what is it. Here you can see I already create an HTML document. And here you can see a D plus container. And inside the container, I create an SVG tag. And he said the SVG tag, I already created two rectangle shape. Our first rectangle color is green, and our secondary tingle color is yellow. As you can see, it's overlap each other. And now I want to rotate both of the rectangles. For this, I'm going to assign a class for our first rectangle. Are clustering is green. And for our second rectangle, our class name is yellow. So in our style section, I'm going to create the selector. I'm going to create this selector dark green. First, I want to rotate the green rectangle. For these, I'm going to use Transform property, transform and hair. I'm going to use Rotate View. And I want to rotate this rectangle 20 degree. If I said this file, hello currency is routed the green rectangle. Similarly to rotate this greenery, similarly to rotate this yellow rectangle, we need to create another selector, dot u Lu. And also I'm going to use this transform property, rotate going TDD. If I save this file. Now you can see the result. But the problem is we need to be extra job for this. First we need to rotate green rectangle and then we need to rotate it yellow rectangle. But to resolve this problem, we can use coping element. We can create both of the rectangle, a group. For now, I'm going to cut this rectangle. And I'm going to use grouping tag, which is G dash G. And inside these GTAC, I'm going to paste these rectangles. That's it. And also I'm going to take a class for this group, which is group. So now is create a group. So we do need to type different CSS for that. So I want to remove one CSS and I'm going to replace this selector name with group. If I said this file here, you can see there is no different. If I change the rotation degree, 30 degree and said the file here, you can see it's moved to react element together. And now I'm going to use another property which is transform, ornithine transform or is in center. If I said this file, now you can see it's rooted our rectangular shape, middle of the page. We can control the rotation as much we want, 50 degree. Here we can see the result. Similarly, we can use stroke property at once stroke rate if I said this file, now you can see red stroke both of the rate element, if I use group class, is going to affect every element in set the group. So now you can understand what is the benefit of grouping. I hope now group tag is clear for you. Thanks for watching this video. Stay tuned for our next tutorial. 19. Svg Defs, Symbol & Use Elements: Hello guys, Good to see you back. In this course, we are going to learn is Vg deeps symbol use elements. So without wasting your time, Let's start the practical. Here you can see side-by-side, I opened my Visual Studio Code editor and my browser using Live Server extension. And I open HTML document, which I created in our previous tutorial. Here you can see I create a group inside the SVG tag. And inside this group tag, I create two different rectangle. Now the situation is I want to use group of objects once again, without writing the same amount of coal. Basically, I want to use this group of shapes multiple time in our view port area. For this, we need to assign a ID to this group tag, ID equal to, and our id name is ships. Then a p tag I'm going to call you stack. Let me show you. Inside the US tag, our first attribute is X-linked colon HREF. Using this property, we can assign the group and we need to pass this ID to assign it. Copy and paste. It's going to replicate this shape in this view block. As you can see, we use the IT. So I need to provide hashtag. And now we need to pass two attributes, attribute and a Y attribute. Using this attribute, we can define new position who these shapes. Let me show you x equal to 30, y equal to going t. So if I said this file, arrogance is create another shape, exact similar to this shape, and we can place this shape anywhere in this view walks. Similarly, if I want to create another shape, some group, do we get this line? And I'm going to change the coordinates. Minus 30, minus 20. If I said this file here you can see is scraped another ship in opposite directions. And remember this coordinates or work relatively to this group tag. And if you want to style two shapes differently, It's not possible with GTAC for this or need to use another tag, which is deep tech cost only to move this GTAC inside the dip tab. Let me show you. So I'm going to type dips here. And I'm going to move this GTAC inside the div tag. And you don't need to change anything inside this GTAC, its remains same. But if I save this file, some strange thing going to happen. Let me show you. Hello, you can see our exact group of shape is vanished. Now we cannot use the shape directly for this. We need to use you stack. And now we can study the shapes differently. Let me show you. Remember, we don't need to change anything to this group tag. For now I'm going to assign classes in our US tag, class a, class B. And now I'm going to create this selector inside the style section, dot a. In set. This Gulliver's is, I'm going to use the property name stroke deaths Eddie. And here I'm going to pass two. If I said this file, you can see the difference between two shapes. Ship come with solid border and another shape come with desktop border. And similarly, if I want to change the stroke color, yes, we can stroke blue. But before I save this file, will need to remove the stroke from the origin. Shape means group shape. If I said this file, now you can see blue stroke in class a object shapes. In the same way you can style plus b shapes. Let me show you. So I duplicate this file and I'm going to change the class name B. For B class, I'm going to use red stroke. And also I'm going to change stroke dash Airgap, five. If I save this file. Here, you can see the difference between two shapes. Let's jump into the last tag, which is symbol. We can use this symbol tag like a group tag. Let me show you. So I'm going to replace this group tag with symbol. There is a difference between group deck and symbolic tag. Basically, symbol can create a different view box. Let me show you someone will duplicate the single. And also I'm going to change the ID shape 2. If I said this file, hesitancy, whatever style we apply in our group class. Now these are all unplayable. And now I'm going to change the view walks. Let me show you. So I'm going to use VW Works property equal to instead the double-quotes 005050 basically is going to scale our shape. If I save this file, here, you can see the difference. So this is the basic difference between symbol and group. We can change view walks if we use symbol tank. If you'll notice here you can see I did some little mistake. We do not use ID shaped 2 in this section. So I'm going to call this ID chip to if I use this file. Now you can see this view works property only work on ID shapes, not to the shapes too. Let's change the view box. Once again, 150 by 150. If I save this file. Now you can see the result is scaled down our symbol object. So we can change the view box differently. Let me show you. I copy the view box property and paste it here. And here I'm going to change 5050. If I said this file. Now you can see the difference between view Vox. And if we want to zoom out this view walks, just increase the value of this view walls 200 by 200. If I said this file here you can see the object view walks. I hope now it's clear for you. Thanks for watching this video. Stay tuned for our next tutorial. 20. SVG TextPath Element Tutorial: Hello guys, Good to see you back. In this tutorial, we are going to learn about texts but element, if you remember, we learned text element and path element in our previous tutorials. And if you want to create any object using text and path, and then we need to use a new tag, which is textbook. So without wasting your time, list are the practical. Here you can see side-by-side, I open my Visual Studio code reader and my browser using Live Server extension. And I already create a HTML document. And inside this festival document, I create an SVG tag. And inside this SVG tag, I said a few walks, a 100 by a 100. So at first I'm going to create a path. Let me show you, as you know, we need to start path with D attribute. So I'm going to type D equal to then inside the double-quotes, who need to provide the income on. Next, we need to provide x-axis and y-axis, which is 20 comma y axis 50. This is our starting point. And also I'm going to take endpoint for this, but let me show you. And our endpoint is 90 comma 15. And also I'm going to use stroke property. Stroke equal to read. If I save this file here you can see a line. And now I'm going to give an arc stroke for these who need to use a command capitally. And then I'm going to provide the coordinates. Party. And also y axis is 30. And then we need to provide extra rotation value. For now, I'm going to set it to 0. Also, our large arc of 0 is 0. And then we need to provide swift black blue, which is one. I already told you in our previous videos, how we can create arc using these attributes. If I said this slide here, you can see Arc. For now, I don't want any color, so I'm going to say it, fill color None, Fill equal to none. So finally, we create the arc shape. And now I'm going to use text tag. Let me show you an inside these tech stack, we need to use another special tag, which is text. But let me show you an inset this textbook I'm going to type in name Edwin, mean age. If I said this file, you can see nothing in our view box because we do not attach this text with this part. So first, we need to give an ID to this ID equal to our ARC. And now we can use this ID. And now we can assign this ID in our textbook. Let me show you for this unit to use X-linked HID f x link colon HREF equal to, is that the double-quotes. And inside the double quotes we need to provide the path id hashtag ARC. So if I said this file, hurricane, see the text, add one mean our text move according to this curve. Not only that, we can use CSS property with this text. For these, we need to use class, class equal to text. So now I'm going to create this selector of this text dot text inside the curly braces. First, I wanted to change the font size, font size, 12 pixel. If I save this file, as you can see the result, it reduced the text size. And if you do not want to show this, but you want to show only the stakes. In, in that case, you need to use div tag. Let me show you dips. And if I move this bug, and if I move this part inside these deep stack and save this file, now you cannot see the stroke, you can see all the text. And if you want to change the arc position in opposite direction, just interchange. So we plug value 12, 0, and then 75. Now you can see we move this are in opposite direction. So for now I'm going to use one will unzip the file. And if you play with x-coordinate x or a y coordinates with r, Let me show you. I'm going to use 40 if I save this file. Now you can see different curve. And we already learned about in our previous videos. If we change the shape according to shape, our texts going to change this position. So if you want to link this path with this textbook, unique ID. And then you need to use exciting HREF attribute to link this breath with text. I hope now text but element is clear for you. Thanks for watching this video. Stay tuned for our next tutorial. 21. SVG linear Gradients: Hello guys, Nice to see you back. In this tutorial, we are going to learn about gradients. Let's see how many types of gradients we have. Here. You can see we have two types of gradients in SVG, linear gradient and radial gradient. As you can see, linear gradient is directional. Maybe it going left to right, top to bottom, or maybe diagonal. But our radial gradient come with circular form. So let's start the practical. And in this tutorial, we are going to learn linear gradient. Here you can see side-by-side, I opened my Visual Studio Code editor and my browser using Live Server extension. And I already create a HTML document index.html. And they already use SVG tag, view volts a 100 by a 100. And here you can see a grid structure. It is very helpful to understand the coordinates. So first I'm going to create a rectangle shape. So I'm going to use rectangle for starting point. We need to provide x-axis and y-axis. X equal to 10, and y axis equal to 30. And then we need to take within height week AT and height equal to 60. If I said this file here, you can see a rectangle shape. And now I'm going to give a stroke to this rectangle. So I'm going to type stroke equal to rate. Now we can see the stroke rectangle. For now. I don't want any color, so I'm going to type fill equal to none. And now I want to feel this rectangle with gradient color, its mean more than a one-color. For this, we need to use definition tag means dip tax. Inside this div tags, I'm going to use a new tag, which is linear gradient. Let me show you. And also I'm going to take an ID for this tag. Id equal to inside the double quotes L underscore. G means linear gradient. And inside this linear gradient tag, I'm going to use another tag, which is stop. And you need to close this tag in that way. Inside this tag, we declare our color. But first we need to take an attribute name opposite. Henry declared from where our color going to start. And I wanted to start the gradient color from 0%. And for color, we need to use another property which is stop color. And I'm going to use green color. And then I'm going to duplicate this line. And I'm going to change the opposite, a 100 percent. And also I'm going to change the color blue. It's mean, it start from 0th position and into a 100 position. In your 0 position, it start with green color, but in a 100 position, it end with blue color. And now I want to see the gradient effect in our rectangle. But first, I'm going to assign a class to this rect element plus shape. And now I'm going to create a selector in our style section, dot shape inside the curly braces. I'm going to use a property named Phil. And then we need to use URL function. And heroin need to provide the gradient effect ID, which is L underscore G. So I'm gonna copy this id hashtag L underscore G, And also need to remove fill property from this place. If I save this file here you can see a gradient. Here you can see is starting with green color and end with blue color. If I play with opposite value, let me show you 80% and set this file. Here you can see 80 percent area filled with blue color. So in that way, It's org. So for now, I'm going to use a 100 percent. Next we have another property which is stop opacity. Let me show you. If I use this property is using this property, you can provide transparency in this color. If I use 0 value and then set the file here you can see is completely transparent. And if I use one value there, you can see full-color. So we can use value between 0 to one. So I'm going to use 0.6. If I save this file. Here you can see semi-transparent. Now blue color is 60 percent transparent. But for now, I'm going to use one will, now can see it filled with solid color. Now let's talk about gradient direction. Here you can see our color going left to right. But I want this color top-to-bottom. For this, we need to pass x-axis and a y-axis. When you hear heroin need to use two type of x-axis and a y-axis. X1, Y1, X2, Y2. Let me show you. X1 equal to. We don't need double-quotes. I'm going to pass 0%. And for Y1 also I'm going to use 0%. And for n coordinates, x2 value is a 100 percent. And why do we Luis 0%? If I said this file arrogance, there is no changes because I create same direction of this gradient color. And now I'm going to change x2 value 0 and a Y to be LW, a 100. If I said this file here, you can see it's changed the direction. Now it's going top to bottom. And if you want a blue color in top, for that, we need to change the values 0% and Y1 is a 100 percent. If I save this file. Now you can see blue-collar come first and then green color. And if you want to show the color diagonally, or these interchange the variables Y1, Y2, a 100 percent, x2, a 100 percent, Y2 also a 100 percent. If I said this file, now you can see our gradient colors work diagonally. In left and top corner. You can see green color, and you can see right bottom corner blue color. So now it's clear for you how we can create linear gradient color for this first unit to create the effect. And then you need to assign an ID to this effect. And you can use this ID in field property value. And you can apply this gradient in any type of shapes. Not only that, we can use multiple color in this gradient. So I wanted to begin this line. And now I want to use orange color. And I want to feel this color in 50 percent position. If I save this file. Here, you can see the effect. Here. You can see it starts with green, orange, and then scum, blue color. You can use any color in any percentage is. And if you want to say opposite in this color, you can use stop opacity property. So this is it for this tutorial. In the next tutorial, we're going to learn radial gradient. So thanks for watching this video. 22. SVG radial Gradients: Welcome back guys. In this tutorial we're going to talk about radial gradient. So let's start the practical. Here you can see side-by-side, I opened my Visual Studio Code editor and my browser using Live Server extension. So first of all, I'm going to use our tag, which is radial gradient. So let's type it. And her, I'm going to use same ID which are used in our previous tutorial, which is LG, is a default. Let's tense the ID name. I don't want this. Agg means linear gradient and I'm going to use RG, radial gradient. Also. I'm going to change here. That's fine. Next, we need to use stop tag. And here we're going to say it upset and color. So I'm going to type opposite equal to 0% and stop color to green. And now I'm going to duplicate this line and chin opposite a 100 percent and a 100 percent position, I'm going to use red color. If I said this file here, you can see the radial gradient. It start with green color and end with red color. As you can see, our green colored start from center. Similarly, we can use multiple color here. If I duplicate this line once again, and for 50 percent opposite, I'm going to use blue color. If I set this file, you can see the result. It starts with green, blue, and then rate. So you can add as much color you want. And now I don't want to create this gradient center. I want to create this gradient, this corner. For this, we need to use CY and Cx attribute. Let me show you cx equal to 30% and see why equal to 40%. If I said this file, you can see the result. We can set this gradient anywhere in our view box. Just unique to remember, we need to provide percentage value. That's it. If I use 0% x-value and 0% for y-value and said this file. Here you can see the radial gradient start from left top corner. Not only that, we can control the gradient radius, let me show you r equal to four. Now, I'm going to use 20 percent. If I said this file here, you can see it reduce or Gideon size. And if you want to scale up this gradient, just type more than 50 percent, suppose 90%. If I said this file here, you can see the result. For now, I want to reduce these gradients size 20 percent. And also I'm going to change the center color, white. If I said this file. Here, you can see the result. Now you can see the glow point. Clearly. Not only that, we can change the glow point direction, I want to say the focus point. Let me show you. I want to move this focus point in X axis. So I'm going to use fx equal to instead that the whole course 10 percent. If I said this file here, you can see the result. Here. You can see it's also a radial gradient, but we change the focus point. Now it's look like a torch light beam. And if I use x-coordinate and a y-coordinate and radial will with that, let me show you cx equal to 50 percent and CY equal to 50 percent. I just want this gradient in center. That's why I use this coordinates. And they reduce the radius value, which is 40 percent, also the FX below 20 percent and 75. Here you can see a different result. This is also a radial gradient, just change the focus point in x-axis direction. You can see the oval in center. Similarly, we can use y-axis. With that. Let me show you FY equal to 40%. If I said this file here, you can see it's changed the focus one direction little bit. But if you'll notice, we do not change the overall position. We just change the focus position. You can experiment with that. Let's talk about our last property related radial gradient, which is spread method. Let me show you spread spread method equal to inside the double quotes. Hair, we have total three type of view, bad, reflect, and repeat. Let me show you. Pad is the default property. If I save this file, here you can see there is no changes. And if I use repeat value, let me show you and save this file. Here you can see the result, the gradient repeat itself. And here you can see the repeated layers. And our last video is reflect. If I type reflect and then set this file here you can see the result. It is just reflect the gradient colors. Nothing else. I just suggest you to try this combination by yourself every time is going to return different result. So thanks for watching this video. Stay tuned for our next tutorial. 23. Adobe illustrator to svg: Hello guys, Good to see you back in this tutorial, we are going to learn how can we draw more complex shapes without using any SVG tag. For these, we need to use any vector graphic application like Adobe Illustrator, coral row. Otherwise, you can use any other online applications. In this tutorial, I'm going to use Adobe Illustrator. Using Adobe Illustrator, we're going to create complex geometrical shapes. And then we're going to convert the shapes into a SVG document. So let's jump into the Adobe Illustrator Software head. You can see I opened Adobe Illustrator Software and I simply create a view box, a 100 by 100 pixel. Here you can see I dreamed this view box there, so I is look bigger. So in this view walks, we can draw any shape using pen tool. Let me show you how you can see a symbol. We'll call it PINK1. If I click on it, now I am able to draw any shape using this paint tool. Let me show you. Assume that this is x-axis and a y-axis. And now I want to create a point in this place. This is our starting point. And I want to in this shape in this point. So I click here once again. Here you can see it create a stroke line. In that case, our pin tool or gas line DAG, we can create unique bristle line here. Let me show you from this point to this point, I want to create a cubic bizarre line. So a drag this mouse and create a cubic busy. So according to this view box, our first Aggies line tag. And the tag is, but tag. As you know, using Patek, we can create any complex shape. Let's create a complex shape. And this shape, I'm going to use Greenfield color for these. It's going to use polygon tag. And now I'm going to show you our rectangle tag, which is ragtag. So I click on this rectangle icon and draw a rectangle. And for this rectangle, I'm going to use blue color. And next I'm going to use ellipse shape. Let me show you hesitancy ellipse symbol. If I click on it and click and drag my mouse. Here you can see an ellipse shape. For this leaf shape. I'm going to use red fill color. And now we need to convert this image into a SVG images for that, just click on file and just click on save as hesitancy, some options serve as a file, save as PDF file, and hesitancy save as a JPEG. Click on Save as SVG, and then click on Use Artboards. Its mean, we're going to use the exact view walk size, which is 100 by 100 pixel. And then you can select your SVD MS name. For my aim is, I'm going to say SVG one. And then I click Save button. Here you can see a lot of options. You don't need to change anything. Just focus on advanced option. And if you can see this option, just click on this option are more open button. Here you can see your option Nim CSS properties. And if I click on this drop-down button here you can see some options. Presentation, attribute, style, attribute, style, attribute, style elements, etc. For now, I'm going to save this file using style elements. And then I press. Okay. And if I show you my working directory here you can see SVG image is Vg one. And let me save this file once again using different CSS property. Southern praise, Save As this time are finally, this is Vg to use our Bolts save option style element. And this time I'm going to use style attributes. And then I'm going to print. Okay. And if I show you my working directory here you can see we have put our GU SVG image. For our first image, I use style element properties. And for our second image, I use style attribute properties. And if I open one of the image using browser, here you can see all the shapes which I drew in my Adobe Illustrator Software. And similarly, if I open my SVG to image, here you can see the same result. There is no difference between these two image. And now I'm going to open two is 3D image file in my code editor. So let's jump into the videos to do co-writer and try to understand what is the difference between two images. Here you can see, I'm back to my Visual Studio Code editor. And here you can see two SVG images is PGY1 and PGY2. If I open both, the image, as you know, r is visual image US style attribute properties. For our first shape, it used line tag. For our second shape, it used but DAG and follow a heart shape. It is polygon tag and for our rectangle, it use red tag. And for our sub-goal ETUs ellipse tag. When we select CSS attribute properties, they need use inline CSS style properties. Here you can see the style attribute. But if I use style elements, CSS properties, let me show you here you can see each period pluses for every SVG tag. For line tag, it created st 0. And for the Patek also eat use SDC class name because we did not use any fill color for this tags. And their stroke color is same. That's why ETUs, similar class name. And for our polygon tag, it create a new class, ST1 and hair. You can see for ST1, we use different fill color. Similarly, for archaic, it creates a different class name, ST2. And as you know, we use different fill color for our peak element and for our ellipse shape. It use Different class name is T3. And we already learned about all the attributes in our previous videos. As you know, to create the ellipse tool, we need CX attributes. See why attributes, RX attribute and ROI attributes. And also you can see our view of sizes a 100 by a 100. So it's totally depend on you which kind of format you want. Css attribute, either CSS element. But I personally recommend you please use CSS element. It's make our code neat and clean. In this tutorial, I tried to teach you how can we convert photography shapes into SVG image? Otherwise, Adobe Illustrator Software is a big topic. We cannot cover this topic in one video. If you remember, I use a grid structure in May every tutorial. Basically I create this destructure using Adobe Illustrator. And then I just extract the SVG code using Adobe Illustrator. So this is the simple introduction of Adobe Illustrator software. Could draw a complex SVG images. You should basic knowledge about Adobe Illustrator software. Otherwise any vector graphics software. In our upcoming tutorial, we're going to create complex images using Adobe Illustrator. And then we're going to dive into the animation section. So thanks for watching this video. Stay tuned for our next tutorial. 24. Svg ClipPath animation: Hello guys, Good to see you back. In this tutorial, we are going to learn what is clip-path tack in SVG. So let's try to understand what is keep a tag. So i back to my Adobe Illustrator Software. Here you can see two shapes. As you can see, our first shape is heart-shaped, and our second shape is circle shape. If I overlap the shape and select both the shape. And then he prays rightly, hair you can see option make clipping mask. If I press here, you can see it got this circle overlapping area according to the heart shape. Now this circle shape is visible on the inside the heart shape. If I move this circle shape inside the heart shape, here you can see different result. We can move this circle shape inside the heart shape, something like that. Not only that, we can scale down it and animate it. Similarly, we have clip-path tack in SVG. So before I start the practical, let me show you one thing. Here. You can see a heart-shaped inside the view walls. And they already extract the SVG code from this image. As you know, we need to use but tech to create this shape. So let's jump into the Visual Studio Code editor and tried to understand how it's work. Here you can see side-by-side, I opened my Visual Studio Code editor and my browser using Live Server extension. And I already create a HTML document. And this is our heart-shaped, which is created by this but tag. And I already assigned an ID to this but tag, which is hard. So first I'm going to create a circle before the park tag. So I'm going to type Circle. As you know, to create a circle, we need to use three attributes are first attribute is cx, cx equal to 40, or next atrocities, c y, c y equal to 35. And our last attribute is radius attribute. For radius attribute, we need to use our r equal to four. Now I'm going to use 35. If I said this file here, you can see the circle. By default, it's come with black color and you know that. And now I'm, and now I'm going to move this circle inside the key per tag. So I'm going to type clipboard. And I'm going to move this circle inside the key per tag. And I'm going to set the ID to this key per tag. Let me show you ID equal who might be. If I said this file. Now you can see our circle is disappear. And now I want to show the circle only inside the hardship, not outside the heart shape. For that, we need to use a tag which is use. So I'm going to type use. And then we need to use some attributes to create this mask. Our first attribute is, our first attribute is but equal to inside the double quotes URL. Then inside this parenthesis, we need to provide the clip but tag id hashtag mightily. And now we need to link this clip, but with this hardship for these, we need to use another attribute. And you know that which is X-linked HREF. Let me show you colon. Href equals two. Instead, the double-quotes. We need to provide these, but Tech ID, which is hard. So I'm going to type hashtag, heart. And also I'm going to provide a fill color, which is rate. If I said this file here, you can see the result. It keep the circle shape according to the heart shape. So this is the Min use gesso, keep attack. We can move this circle inside this heart-shaped, we can animate the circle inside this heart-shaped and many more. So let's animate this circle shape inside this heart-shaped. And I already typed some CSS code for that. Let me show you. Here you can see I created keyframes. Name open your heart. And inside this keyframe, our heart going to start from radius 0 and it scale up to 60 pixel radius. And hair we slipped or circle shape using CSS selectors. Here you can see inside my cleave ID, we'll have a circle tag. That's why first I use might leave and then I use circle tag. And then I call our animation, which is open your heart. And I want to run this animation for 5 second duration. And I want to play this animation for infinite time. That's why I use infinite loop. I hope you have already basic knowledge about CSS and emission. So if I save this file here, you can see the animation. Every five seconds duration. It's run our animation. I hope now you understand parties that use case or key per tag. So thanks for watching this video. Stay tuned and stay tuned for our next tutorial. 25. Adding JavaScript in svg image: Hello guys, Good to see you back in this tutorial, we are going to learn how we can add scripting in SVG image. Suppose if you want to change object size and their path just using a clique, then we need to use JavaScript for that head. You can see inside our view walks, we have a rectangle shape. And also you can see a button below the view walks. And now I want to scale this rectangle size by clicking this button, something like that. For this, we need to use JavaScript. So let's jump into the Visual Studio code reader and tried to understand how we can add JavaScript in SVG image. Here you can see side-by-side, I opened my Visual Studio Code editor and my browser using web server extension. And as you can see, I already create a HTML document. And inside this HTML document, I create a deep plus container. And inside this div, I create an SVG image. And also you can see a rectangle shape. Instead, this is Vg image, which IDs. Then outside this container div, we create another div class center. And inside this div, I create a button, which IDs button. And also you can see this button in my browser. And now I want to scale my rectangle shape. When I click this button. For these, we need to use JavaScript. So as you know, we need to use script tag for that. Let me show you script. Inside the script tag, I'm going to create a function. And our function name is scale size. So first I'm going to use function keyword. And our function name is scale size. And inside the parentheses, for now I don't want to pass any parameter inside the curly braces. We need to select the ID of this rectangle. So document dot get element by ID, instead the parentheses and inside the double quotes or ID name, which is react. And now I want to scale the width of this rectangle. So we need to scale these with attribute. So I'm going to use a function dot sit attribute inside the parentheses. Instead the double-quotes. First we need to pass the attribute name and our attribute name is weak comma. And then we need to pause the video. And I want to scale up to 50 pixels. So I'm going to pass 50 and semicolon to end this line. Similarly, I wanted to scale the height of this rectangle. So I'm gonna duplicate this line. And this time our attribute name is height. So I'm going to replace wheat with height. And height equal to 40 pixel. So whenever I click this button, I want to run this function. For that, we need to use another attribute, which is onclick. And instead this double-quotes, we need to pass the function name, which is scale size. So I'll copy the function name and paste it here. And now I'm going to save this file and execute this code. Here you can see the result. It perfectly scale our rectangle. Let me show you once again. If I reload my browser, that you can see. Now our rectangle with these 30 pixel and height is 20 pixel. And whenever I click this button, it scale the rectangle. Now if we'd said these 50 pixel and height is 40 pixel. So using JavaScript, we can animate our shape. We can move our shape. You can do anything which you want with scaling. Now I want to move this shape in y-axis. For that, you need to change the y-axis value. Let me show you. So I'm going to duplicate this line once again. But this time I'm going to select Y attribute here, y. And I want to move this rectangle 30 pixel at y axis direction. If I save this file and then click this button. Here we can see first each scale our rectangle, and then it's move our rectangle in y-axis direction. So I hope now it's clear for you how we can use JavaScript with SVG images, using JavaScript we CSS, and using JavaScript we SVG, they have similar process. So thanks for watching this video. Stay tuned for our next tutorial. And then we will start our exciting exercises and projects. 26. Project 1- Moving car Animation: Hello guys, Good to see you back from this tutorial, we're going to start our project. This is our first project, and our project name is moving car. Here you can see a car is a complete SVG image is not Estimate page, and you can see each inmate URL bar dot SVG file. So let's reload my browser and see what happened. Here. You can see our car move right to left direction. And if you notice, you can see when our card stock, it's also stop our wheels. So this is the very exciting animation. So let's see how we can create this animation. So here you can see side-by-side, I open my current working directory and my browser. And as you can see, inside my current working directory, there is a specified and the filename is kept for you. And I opened this m is vilified in my browser. And here you can see the image. And now I'm going to jump into the Adobe Illustrator Software. Let me show you. Here. You can see I also open the same SVG images in Adobe Illustrator. And now I'm going to create a new SVG file. For that past, we need to create a new AI file. So I'm going to click on this file section. Then I click New. And I want to create our view port area with full HD resolution. This way, I'm going to use 1920 by 1080 resolution. So this is our view books area. And now I'm going to drag this car in this space. And I'm going to scale up this SVG image a little bit. And now I'm going to save this file as an SVG miss. For this, I'm going to click on File section and then a press Save As. And I'm going to save this file in my current working directory. And also I'm going to change the file name, which is moving car, underscore car. And now I'm going to select the file type, which is SVG. And then I select Use Artboard option, and then I press Save. And I would like to go with style element properties. So I'm going to press Okay. Here you can see in my current working directory, there is another SVG image which is moving underscore car does 01. And if I open this image in my browser, here you can see the image in this exercise. I don't want to work with HTML page. I directly work with SVG image. So let's jump into the Visual Studio Code eater and try to create the animation. So finally, I'm back to my Visual Studio Code editor. And they also open moving car SVG file. And here you can see we have total three buck tag. Our first, but tag is put our car body, our second, but thanks for car front-wheel. And our third part tag is for career will. So first, I'm going to assign a class name to our body plus equal to car underscore body. And I'm going to create a selector using the class name. So we'll copy this name. And here I'm going to use style tag. And instead this style tag, dark or className. And he said the carnivorous is first I want to change the car body color. For that, I'm going to use fill property. And for body color, I'm going to use red color. If I said this file and reload my browser here you can see we successfully changed the car body color. And our next task is we need to rotate the wheels at 360 degree. For that, we need to use animate transformation tag. Let me show you. And we need to use animate tons permission tag inside the backpack. For that, we need to use closing but tag. But so first I'm going to type the tag name, which is animate, comes from. And also we need to end the tag. And then we need to use some properties. Our first property name is attribute name. Let me show you. And our attribute name is transform. If you're familiar with CSS and emission, then you heard the sound lot of times. Our next property name is attribute type. And our attribute type is XML. We already know that our SVG images made with XML tags. That's why our attribute type is XML. And then we need to provide the animation type type equal to, and our animation type is rotate. So I'm going to type rotate. And then only two bus from below and Tuvalu from equal to from 360 degree. And in our Tuvalu. To 0 DD. And then we need to provide the duration time d u r equal to. And I want to run this animation for 3 second 3 is. And then we need to provide the repeat time of this animation. For that, we need to use another property which is lipid come equal to. And I want to repeat this animation for 11, 35 time. This is totally depends on you. How much time do you want to repeat your animation? If I save this file, is going to read it our wheel, but we do not provide the hub point of this wheel. That's why it's going to return a different result. Let me show you if I reload this file. Here we can see the image. It's loaded our wheel according to 0 XXS point. So you need to pause the exact coordinates of this wheel hub. And to get this exact value of this hub point, we need to back to the Adobe listed or application. So once again, I'm back to my Adobe Illustrator application. And now we need to find the exact how point of this wheel. So I'm going to slick this wheel. And here you can see the x-axis point of this wheel and a y axis point of this wheel. So I'm going to copy the x axis point. And if you'll notice, you can see after decimal point, it starts with seven. It's mean it above the 0.5. So we can use 753 point for that. And also you can see ROA access point is 500. So let's back to the Visual Studio Code editor and Assange the x-axis point and y axis point. So we need to provide the FXS point in this place, 753 and our y-axis, while Andy's 500. And also we need to assign the same value in that position. So if I said this file and then reload my browser, now you can see it wrote it out in the exact place. And it run our animation for 3 second. And we need to follow the same procedure for our rear wheel. So first, I'm going to close the tag. And then I'm going to copy the same animation code. And I'm going to paste it here. And once again, we need to provide the exact how point, what are rare wheel. And now, once again, we need to back to the Adobe Illustrator software. This time, I'm going to click on rear-wheel. And here you can see the position 970 x-axis and 500 y-axis. So let's back to the code editor. So our x-axis coordinate is 917 and our y-axis coordinate is 500. And also we need to replace in to position. I said this file and then reload the browser. Here you can see it wrote it out two wheels in same direction. And if you want to change this direction, and then you need to start from 0 and into 360 degree, just unit to reverse the coordinates. That's it. So he successfully done our hub of the job. And now we need to move the whole curve from right to left direction. So how is it possible? Here you can see a group tag means g tag, and our GTAC contains all the three-part tag. So just we need to move the GTAC from right to left direction. So once again, I'm going to copy the animation tag, separate but tag. And before the closing body tag, I'm going to paste it. What this animation we don't need from N2 value. So I'm going to remove it. And also a need to change the type value. For that. I'm going to use translate. I don't want to rotate my whole car. I just want to change the current position. That's why I use Translate. And I don't want to repeat this animation, so I'm going to use one. And then we need to provide the starting point and end point and end point. For that, I'm going to use the property name villus. Villus equal to inside the double quotes. First, we need to provide the starting x coordinate and y coordinates by default are our position is 0. So I wanted to start this curve from 400 pixel distance. So our x-axis is 400 coma and our y-axis is always 0 colon. We need to provide the endpoint for our input. I want to stop this guard in absolute position. That's why I moved to pass x coordinate 0 and also y coordinate 0. If I save this file and reload, this browser, hates not work. Maybe there is a mistake. Hey, I forgot to provide semicolon after input value. If I said this file and reload the browser, hey, it's still not works. Let's find out the problem. Let's change the duration time for second. And also I'm going to change the values. Just I change the starting point of view. If I save this file and reload my browser. Here you can see now it's work. It run our car and also it routed on wheels. And when R can stop, it also stopped the wheels. So we successfully move our car from 1 to another point. I hope now it's clear for you how its work. So thanks for watching this video and stay tuned for our next project. 27. Project 2 - Svg path tracking animation: Hello guys, Good to see you back. This is our second exercise related SVG animation. And our exercise may miss, but tracking animation. So let's see the example. What can we do with this animation? Here you can see the world map. And now you decide to saying this shipment from New York to Kolkata. And by this, but the sheep will reach the destination. And if I reload the browser, you can see the animation. You can see our container sheep, follow this path and reach his destination. So as you can see, the red dot is running over the blooper. So there's the practical and tried to understand how we can create this example. Here you can see, I'm back to my Adobe Illustrator software. And they also select the pin tool. And also you can see I turn off my fill color, I just use stroke color. And our stroke color is blue. And our view voce resolution is 1920 by 1080. So at first I'm going to draw a curve stroke, something like that. That seat. So this is the birth which I'm going to use in our project. And if you want to increase the stroke width, yes, you can just select the bug. And then I'm going to use to PT value for our stroke. Now it's look perfect. And now we need to extract the SVG code from this image. For that, we need to click on the File option and then Save As. And then unique as a synonym for this file. I'm going to use DMO. And also we need to select the file type, which is SVG. And then click Use Artboard option and then I press Save. Here you can see a lot of options. Everything remains same just enough to use CSS property style element. And then you need to press Okay to save this file. So let's back to the Visual Studio Code editor and see what type of attribute we get from this vehicle. So finally, I'm back to my Visual Studio curator. And here you can see my directory and there is a SVG image named demo dot is Vg. And if I open this image here, you can see some codes. As you can see, our viewport size is 1920 by 1080. And inside the SVG tag there is a DAG which they create in Adobe Illustrator software. And the public class is St 0. And also you can see the CSS property of this bug. And if I open this image in a browser, you can see the result. It is just as busy but nothing else. So once again, I'm back to our Visual Studio curator. At first I'm going to create an HTML document name index.html, index dot HTML. And also I create the basic structure. So let's create the bot tech animation. First, I'm going to use SVG tag, some retype SVG. And inside this SVG tag, we need to define the view VOC size. And then we need to define the width and height to this SVG image. So fast, I'm going to define wheat. Wheat equal to 1920 and our height equal to 1080. So this is our viewport size. And inside this SVG tag, first, we need to create the bot tag. But I'm going to use this but tag. So I'm going to copy it, but tag and paste it here. And also we need to style the spot for this. I'm going to use style tag. And as you can see, our path className is is to 0. Some retype dot is t 0. Then inside the curly braces. First, if I show you my SVG image code here, you can see our field property is none. So I'm going to copy the same CSS property and value from this code. And I'm going to use it here. So if I said this file and open this file with live server, here, you can see it create the same stroke but with blue color. And now we need to create a red dog who's going to follow this, but for that, we need to use circle tag. So let's back to the Visual Studio Code editor and tried to understand how its work. So first, I'm going to create a circle tag up to the bot tag circle. And I'm going to use in men standing method for this circle. Somebody whose style tag. Our first property is Phil and our fill color is red. So I'm going to use hex value for that capital if, if 0000, 0000. As you know, this is the hex level job, red color. And our second property, ies stroke. So I'm going to type stroke care. And for stroke, I'm going to use white color. As you know, to create a circle, we need to use radius value. So I'm going to use r equal to. And inside the whole course, our radius value is 8.5. If I save this file. And then I show you my browser. Here you can see a red dot at laptop corner. So now we need to start the animation which can move our red dot from this point to this point following this. But for this, we need to use a SVG animation property. And the animation property name is animate motion. So instead this article tag, I'm going to use and emit motion tag. And emit motion. First, we need to define the path of this animation. For this, I'm going to use what property but equal 2 inside the double-quotes. I'm going to use the same pot. So I'm going to copy this button and then I'm going to paste it here. And our next attribute is duration attribute. So I'm going to use D EUR equal to 6 second. And our next property is Phil. Phil equal to, I'm going to use freeze value if our, WE SSID E. And now we need to just close the end emit motion tag deciliter. Let me explain all the thing once again. First I create an SVG tag, which viewport sizes 1920 by 1080. Then inside this SVG tag, first I create a bot tag. And this is the coordinates of this but tag. And we already stellar but tag using this class. And then a greater rate dot using circular tag. And our red dot radius varies it 15. And then I use a SVG animation tag, which is anyway, motion. It going to animate our red dot. And now we need to move the red dot according to this. But for that I use but tag attribute. And inside the Patek attribute, I use the same value. If we do not use Symbaloo, our red dot couldn't going to follow this butt. And then we provide an emission duration time, which is six again. And our animation feel Modi's freeze its mean when the TREC is complete, it going to freeze our red dot. So if I save this file, and then I show you my browser, and then I reload my browser. Here you can see we perfectly execute our part tech animation. And after tracking is over, it going to freeze our point end of this. But so I hope now the Patek animation concept is clear for you. So thanks for watching this video. Stay tuned for our next exercise. 28. Project 3 - SVG Elastic Line Animation Effects: Hello guys, Good to see you back. In this tutorial, we are going to create SVG elastic line and emission effects, as you can see on your screen. This is our example. So let's try to understand how we can create these SVG animation. Here you can see I opened my Adobe Illustrator Software and as you can see, there is two carb lines. And if I show you my layers, as you can see, the paths and our viewport sizes 400 by 400 pixel. And then you need to just export this file as an SVG. And you know the process, how we can export this image as SVG, and this is the SVG output code up my image. Here you can see Coupa tag. And for our example, we need to Patek coordinates. Our first Patek is our exact but tag and our second but tag is the reflected version of our first but tag. So let's start the practical and tried to understand how we can create this animation. Here you can see side-by-side, I open my Visual Studio Code editor and my browser using Live Server extension. And I already create a HTML document. And they also create a CSS document name main.css, and a link to the CSS file with this STL file. So at first inside the body tag, I'm going to create the SVG tag. So I'm gonna type SVG. And inside this SVG tag, I'm going to create the path tag, but and I'm going to use any attribute or property in this part tag. And then I'm going to duplicate this SVG tag once again. Now the cosine is why I use to SVG tag. Our first SVG tag is for our line and our second SVG tag is for hour, is for glowing effect. I'm going to extend all eating later. And I'm going to use all the styling bird in our CSS file. So let's jump into the CSS file. At first I'm going to use universal selector, which is star. Then inside the curly braces. Our first property is margin, margin 0. And our same properties, padding and petting is also 0. And then I'm going to select the body tag. So retype body inside the curly braces. First I'm going to use these, the property and our distilleries flakes. And if you want to learn these CSS properties, you can check out my advanced CSS course. It's a very good course for a beginner to understand CSS grid and CSS flex properties. And our next CSS properties justify-content. And I want to all my content in center. That's why I'm going to use Centreville. And also I want to use align our items center. So I'm going to use align and Tim property align items center. And also I'm going to say it a minimum height, our body and our minimum height is a 100 vh. And now I'm going to set a background color to our body. So I'm going to use background property, and I'm going to use RGB value for that. Inside the parentheses. For raid. I'm going to pause 77 coma for green. Also I'm going to bust 77 comma four blue. And for blue, I'm going to pause 77 once again. If I said this file, it going to provide a gray color to our background. And now we need to position our SVG tag middle of this page. For that, I'm going to select SVG tag inside the curly braces. First I'm going to use position property. And our position is absolute value. And then I'm going to owe it to our SVG image. So I'm going to use width property. We'd 400 pixel. And by default, I don't do on any color to our SVG image. So I'm going to use fill property, fill none, and then scum, our most important job, we need to create the carpet. If I show you my index.html, here you can see inside the SVG tag, we have a packed tag, so we need to select the per tag. So first I'm going to type SVG, then I'm going to select but tag. Then inside the curly braces, foster need to draw the path. As you know, to create this bug, we need D attribute and some will. And now we need the SVG image, which we extract from the Illustrator file. And here you can see the D attribute and the path coordinates. So at first, I'm going to copy our first but tech coordinate. And then I'm back to my CSS file. As you know, to create a path, we need to use deeper party, someone to type small d colon, and then we need to use but function. Then inside the parentheses, we need to pass the value. Basically this property going to create the exact path we want. Or next property is stroke property. We need to give a stroke to this button. So I'm going to type stroke and photo stroke. I'm going to use hex available if, if 000 92 is going to give it pink stroke to this. But if I said this file here, you can see the result. And now we need to increase the pathway. For that. I'm going to use stroke width property, some type stroke. We, and for all but I'm going to use 50. If I said this slide, you can see the result. And now I want rounded corner for this bug. So I want to use stroke line get property summertime stroke line gap. And for that I'm going to use rounded with if I said this file, you can see the result. As you can see, we cannot see the whole path in our view box area. So we need to move this but using transform value. So I'm going to use Transform property, transform translate. First, we need to pass x-axis and a y-axis. We do. I wanted to move this but 50 pixel x-axis direction. And then I want to move this buck 50 percent y axis direction. If I said this file, now you can see the complete book. And now we need to animate this bug. For that, I'm going to use an initial property. As I told you earlier in this course, you should have basic knowledge about CSS animation. And if you don't have any knowledge of our CSS and emission, you can check out my CSS animation goals. I hope you like it so fast. I'm going to provide the animation name. And our animation name is animate. And I wonder run this animation for 2 second. So our duration time is two seconds. And for our animation, I'm going to use easy note and emission mode. And I want to run this animation infinite time. So I'm going to use infinite value. And now we need to create the keyframe for the animation or that I want to dive at the read keyframe. And our animation name is animate. Then inside the curly braces, I'm going to define the animation position in 0% position inside the curly braces. I'm going to use the sympathy coordinates. So I'm going to copy the path property and paste it here. And also I'm going to use Same Stroke Color in that position. So I'm going to copy this property and I'm going to paste it here from 0 position. Then we need to jump into the 50 percent pollution inside the curly braces. Harrowing to use our second both coordinates. So let's jump into the our SVG image. And here you can see our second both coordinates. So I'm going to copy the coordinates and I'm going to paste it here. And also I'm going to use different stroke color in that position. So I'm going to use stroke property once again, stroke and 40 stroke color. I'm going to use hexavalent 000. S3, though live. This is light blue color hexavalent. If I save this file, you can see the animation and also you can see the color change. So he successfully create our elastic line animation. But one thing is missing in this animation. Let's use a glowing effect. It's going to make our animation more beautiful. For that, we need to back to the HTML document. Here you can see we use who is busy image and I hope you already understand it creates boost true for both the stroke. We use some CSS value des, why we cannot see the difference. And now I want to blur one of the stroke. For that, we need to use SSS advanced selector, which is nth child. So I'm back to my main.css file. And here I'm going to type SVG colon int child selector. And I want to see it or second SVG tag. That's why I'm going to pause to then inside the curly braces, I'm going to use a CSS property which is filtered and our filter with Louise blur. And I want to blend my stroke up to 40 pixel. So if I save this file, now you can see the effect. It looked pretty awesome. With John's permission, you can see the glowing effect. I hope you liked this exercise. So thanks for watching this video. Please stay tuned for our new exciting exercises. 29. Project 4 svg title wrapping animation: Hello guys, Good to see you back. This is our fourth exercise related SVG animation. In this exercise, we will learn how can we wrap it right ill with a stroke. Here you can see some text on your screen. If I hover on this text, you can see the animation. We'll call it title wrapping animation. So let's see how can we create the SVG animation effect. Here you can see on your screen side-by-side, I open my Visual Studio Code editor and my browser using Live Server extension. And I already create a HTML document. So at fast inside the body tag, I'm going to create a deep tag, some group type T. And our deep pluses, SVG wrapper, dash wrapper. And insert this deep container. I'm going to create SVG tag. And I'm going to say it heighten, we'd put this SVG tag, height equal to instead the double-quotes 60. And we'd equal to instead the double-quotes 320. And also we need to provide the XML namespace. Let me show you sometime this declaration is necessary and sometimes not. And then inside the SVG tag, I'm going to create a rectangle. For this. I'm going to use rectangular CT. And also I want to assign a class to this rectangle. And the class name is shape. And now I'm going to declare Haydn wheat to this rectangle. So height equal to 60 and we'd equal to 320. And then I press Slash arrow to in the stack. If I said this slide here, you can see the image as you know, by default it's came with black fill color. Here you can see it create a rectangle, which height is 60, and we these 320. And then inside the SVG tag, I'm going to create another div tag, div. And also I'm going to assign a class to this deep text. And I'm going to type it takes in this container, your text. Text. If I said this file, you can see the result. So in successfully compete our HTML portion. And now we need to work with style section. So at first, I'm going to create the style tag inside the head tag. So I'm going to type style inside the style tag. First I'm going to select a stable and body tag. So I'm retype sta mill comma body. Then inside the curly braces. First I want to set a background color. So I'm going to use begging property. And for value, I'm going to use RGB value RGB. Then inside the round braces, I'm going to type 20 comma t, comma 20. It going to say it dark gray color in our background. If I said this file, you can see the result. And now I'm going to set the height to this body and this estimated tag. So I'm gonna type height, property, height 100%. Then text align, center. And I'm going to use overflow hidden. If I said this file. Now you can see it horizontally align our content center. And now I'm going to style these parent container, which classes SVG wrapper. So I'm going to type dot is Vg dash wrapper. Then inside the curly braces, at first, I'm going to use Position property. Position, relative, top 50 percent. I just wanted to say enter this contained vertically. That's why I use this property. And then I'm going to use Transform property, transform, translate y minus 50%. And our margin value is auto. And also our wrapper, we these 320 pixels. If I save this file, you can see the result. So we vertically and horizontally align our content center of this page. And now I'm going to work with this rectangle shape. For this, I'm going to use ship class dot shape. Then inside the curly braces. At first I'm going to transfer into this rectangle shape. For this, I'm going to use fill property. Fill transparent. If I set this file here, you can see the result. And then I'm going to assign a stroke to this rectangle. For this, I'm going to use stroke property and no stroke galleries rate. If I save this file, now you can see the stroke. And also I'm going to increase the stroke width, which is eight pixels. If I save this file, you can see the result. And now we need to work with stroke dish and a property and stroke desktops, that property. Let me show you some of the type, stroke dash, 140 pixel to 540 pixels. Using these values, we can control our stroke dash sides, also stroke desk gap. So next property is stroke deaths opposite. And our stroke desktops that vz minus 4 74 will. If I save this file, you can see the desert. And also I'm going to use border property for the shape. Somebody US border, border five pixel. And prototype is solid and border color is black. If I said this file, it still exist under the stroke line. That's why you cannot see the result. And now I'm going to use transition property for animation duration, some type transition. For stroke width. I'm going to use 1 second comma, four stroke desktops. It, I'm going to use once again, once again coma. And for stroke Daesh Eddie, I'm going to use once again duration once again. And if I save this file, you can see there is no changes. I want to apply this transition when I hover my cursor into the text. And now I'm going to style this text. For these inside the style tag, I'm going to use the text class dot txt. Then inside the curly braces. At first I'm going to change the font size. And our font size is 22 pixel. And then scum. And then I'm going to change the line-height property. So I'm gonna type line high and our line, it will always 32 pixel. And they also need some space between these layers. So I'm going to use letter spacing property, letter spacing, and the valleys, it pixel. And also I'm going to change the font color. So I'm going to type color, and our color is white. If I said this file, you can see the result. And now I'm going to move this text above the line. For that. I'm going to use Tocqueville top minus 48 pixel. And our position is relative. If I said this slide, you can see the desert. And now I'm going to use over selector to apply this effect. So I'm going to use dot SVG wrapper class colon hover. So when I hover this SVG wrapper container, I want to change the stroke dish every property and stroke desktops that property. For that, we need to select the shape, dark shape. Then inside the curly braces, at first, I'm going to change the stroke width value. So I'm gonna type stroke width. And I'm going to use two pixel value for our stroke. And our next property is stroke Daesh opposite. And our stroke desktops always 0. And our last property is stroke Daesh, Eddie. And I was struck dish at a value is 760. If I save this file and then I hover my cursor into the text. Here you can see the effect. So it successfully create the title wrapping effect. To create the perfect dish herbicides, you need to work with stroke dish, any property and stroke desktops, that property just you need to remember these values are very important. And if we change the rectangle size and then also need to change the property values. In our upcoming exercise, I'm going to explore more about this property. So thanks for watching this video. Stay tuned for our next exercise. 30. Project 5 - 3D Hover Animation SVG: Hello guys, Good to see you back. In this exercise, I'm going to create the 3D animation effect. As you can see when I hover my cursor. In this SVG image, you can see the 3D text moving out from this place. So now the quotient is how we can get this animation. For this first, need to draw this as 3D shape in our illustrative software. So without wasting your time, Let's jump into the illustrator software. So finally, I'm back to my Adobe Illustrator Software and I create a viewport area, 1920 by 1080 pixel. And here you can see our background color is dark gray. And now I'm going to create a rectangle shape, something like that. And also I'm going to change the rectangle background color, which is deepskyblue. And also I'm going to use rounded corner to this rectangle. And I'm going to align this rectangle, middle of this viewport area. And now I'm going to type it takes for these, I'm going to use text tool. So retype is V, G. And also we need to increase the text size. So I'm going to increase the text size. And also I'm going to change the font style. For these. I'm going to use Arial font, arial black. And now I'm going to move this text inside the rectangle, something like that. And also I'm going to scale up this text. And I'm going to align it center of this rectangle. And now I'm going to convert this shape into an outline stroke. And also I'm going to change the text color, which is white. And then I'm going to duplicate this shape in the simplest. So I'm going to press Control C, Control Shift V. Now you can see we have total two different texts layer. And now I'm going to hide one of the takes shape. And now I'm going to select the text and the rectangle shape together. And then I'm going to turn on my Shape Builder Tool. Just press Shift and press M. And I'm going to cut the text's shape from this rectangle. So I'm going to press Alt key. Here you can see a minus sign and then I'm going to click on this gene. Similarly, I'm going to click on this V-shape. And similarly I'm going to click on this issue. Now you can see it got the rectangle shape. According to the text. There is two methods that you can cut shape like this, just to click on Windows. And here you can see your option. And then pathfinder. And here you can see a ship mode option minus font. You can create the same shape using these one. It's a different method to do the same job. And then scum, the most important section of our tutorial. Now, we need to convert this rectangle shape into a 3D shape. For these, select the rectangle shape and click on the effect option. And here you can see option 3D. And then I'm going to select, Extrude and Bevel. As you can see, it already convert our shape into a 3D shape. But I'm going to provide my own rotation value. For X axis tradition, I'm going to use 0 value. And for z-axis rotation, I'm going to use zidovudine once again. And for Y axis rotation, I'm going to use 32, something like that. And also we can control the light source of the 3D effect. Let me show you how you can see more option. Just click on the More option and the header. You can see the light source. And I'm going to change the light source of the shape in this point, something like that. And then I press, okay, you can say it any prospective or any angle for this example. So I'm going to press Okay, and then I'm going to visible my height text layer. And also I'm going to apply the same 3D effect to this text. So I select the text. And once again, I'm going back to the effect option and select, Extrude and Bevel. And I'm going to use the same coordinates which are used in our previous 1330. And also we need to apply these similar light direction, something this point. And then I press OK. And now I'm going to change the text group name and our group limeys fixed. That's it guys. So finally, we're done. Our shape is complete. And now we need to save this image as an SVG image for that, just click on the File, Save As, and then select the path of this image and change the image name. I'm going to use Image 1. And also you need to change the file type, which is SVG, and then take on the user group, and then press Save. And it's totally depends on you what kind of CSS property you are going to use. You can use style attribute, otherwise, you can use style element. So I would like to go with style attributes and then I'm going to brace. Okay, So finally, our design part is complete. In the similar way, I already draw another image. And I'm going to use this image for this example. So let's jump into the Visual Studio Code editor and tried to understand how its work. So finally, I'm back to my Visual Studio Code editor and I already create a HTML document. And I link these HTML document with the CSS file name style.css. Here you can see we have proton to image in my current working directory, image wonder SVG and image two dot SVG. For this exercise, I'm going to use him is to dot SVG. This is our image. One dot is v file, and this is our image to load SVG file using the similar procedure, I create this image, and I use this one because it's perspective is much better than our image one. So let's back to the Visual Studio Code editor. So at first, I'm going to copy the whole SVG code from image to control a, control C, and then a back to my index.html file. And then inside the body tag, I'm going to paste the code. And I'm going to scale donor form size, little wheat. And if you remember, we changed the name of the group of text, which is text. That's why inside the g tag, it creates an ID name text. And you already know G means group tag. So if I save this file and show you my browser, here you can see the image in our browser. And now we need to apply animation to this image. So there's back to the Visual Studio Code editor once again. So let's jump into the style.css file. First, I'm going to create a keyframe for animation. At the rate keyframe. And our animation name is enemy. Then inside the curly braces, we need to provide the starting point and end point of this animation. So I'm going to use from keyword, from inside the curly braces. I'm going to use Transform property. Transform. Translate a X position is 0, this is four x axis direction and translate Y 0. And this is for Y axis direction. So this is the exact position of our text. And in that position I want to opposite the one. I want to show Hula possibly in that position. And then we need to provide the imposition. So I'm going to duplicate this line. And I'm going to type 2 keyword. When I hover my cursor on this SVG image, I want to move this text in that position. So in x-axis direction, I want to move minus 25 pixel, and in y-axis direction, I'm going to move plus 25 pixel. So I'm going to type minus 25 pixel. And in y-axis direction, I'm going to type 25 pixel. And now we need to create the selector and call the animation. So when I hover my cursor into the SVG image, I wonder run the animation. So I'm gonna type is Vg colon hover. So when I hover my cursor in the whole SVG image, I want to apply this animation in my text ID. So I'm gonna type has tag paste. Then inside the curly braces. At first I'm going to call my animation name and emission name. And our animation name is animate. And then scum animation duration property, some type and emission duration. And I want to run this animation for 1 second. And our next properties and emission iteration carbon. And I'm going to use infinite loop. I want to run this animation in finite time when I hover my cursor into the SVG image. And at last we need to declare the animation mode. For these, we need to use an emission direction property. So I'll retype and emission direction, which is alternate. So if I save this file and show you my browser, here you can see the animation effect. It worked perfectly. Let's create the takes transparent. So whenever our takes to move from the exit place, I wanted to make it transparent. So Liz, back to the Visual Studio Code editor once again. And now I'm going to change the opacity in our in position. And I want to make it fully transparent. If I save this file and back to the browser. Now you can see our animation is more cooler than previous one. So I hope now it's therefore you how we can create this 3D animation. So thanks for watching this video. Stay tuned for our next exercise. 31. Project 6 -SVG Text Masking with Video : Hello guys. Once again, I came back with a new exciting exercise. In this exercise I'm going to work on is Vg test masking with video. So in this exercise, we are going to learn how can we use SVG text and make it a clipping mask so you can show anything behind the text. It may be video, maybe image or anything. But I would like to go with video. So let's start the practical and see how can we create this mask. So finally, I'm back to my Visual Studio Code editor. As you can see, I already create a HTML document and they also create style.css file. And here you can see in my current working directory, there is a video, video dot mp4. And I'm going to use this video file for this exercise. And they already open this file using lips Server extension. So at fast inside the body tag, I'm going to create SVG tag is Vg. And we need to set Hayden lead to these SVG image. So I'm going to use height property. Height equal to a 100 percent and equal to a 100 percent. So I'm going to use the full page of our Rosen. And inside the SVG tag, I'm going to use tech stack to create the text. Some type text is, and our text is SVG mask. If I save this file and show you my browser, here you can see my browser. There is nothing because we cannot say it any fill color to this text. So I'm going to assign fill color and position to this text. For this, we need to pass x coordinate, x equal to 50 percent and y-coordinates equal to 50%. So this gardeners going to put our text middle of the page and also need to provide fill color to this takes. So I'm going to use fill property equal to rate. If I set this file and show you my browser, here you can see the text SVG mosque, but it is not vertically center. We need to center it vertically. So let's back to the Visual Studio Code editor once again. And then jumping to the CSS file. And I'm going to select the body tag inside the curly braces. I'm going to set height a 100, vh and margin 0. If I said this file and finish show you my browser. Here, you can see it vertically and horizontally align our text center. So let's tell this text and make it better. So I'm going to style the SVG tag, type SVG inside the curly braces. First I'm going to play with font size. Font size 15 AM, and our position is obsolete. And Dr. Luis 0 also lived with Louise 0 and height a 100 percent. If I save this file and show you my browser, here you can see the text SVG mask. Let's change the font family of this text. I'm going to use monster fond for this text. And I already copied the link from the Google font. So I'm going to paste it here. It's totally up to you what kind of font you want to use. And then back to style.css file. And I'm going to use font-family property, font-family months or it otherwise san-serif. If I said this file and show you my browser, here you can see we change our font style. But if you'll notice hair, you can see our font is not still medial in our page. For this, we need to use text anger property. Let me show you. So inside my text stack, I'm going to use this property, text dash and gore equal to middle. If I said this file and show you my browser. Now you can see our text is well aligned. But there is another problem. Our text is not responsive for that, we'll need to use media query. Let me show you. So back to the style.css file. And I'm going to use media query at their aid media screen. And I'm going to use max-width property, max width. And I want to break it for desktop size. So I'm going to use 1200 pixel. It going to apply a new CSS property when our browser resolution is below, then put a 100 pixel. So when our browser below than 1200 pixel, I want to decrease the font size. So I'm going to select the SVG tag. And inside the curly braces, I'm going to use forms as property font size for him. If I said this file and show you my browser. Here you can see our browser width is greater than 1200 pixels. That's why it's written 15 AM font size. But if I reduce the browser size here you can see our phone shrink down to the 4M size. And if I increase the browser size, you can see the result. Let's set a transition to make the transformation beautiful. So I'm going to use transition property here. Transition transient duration is once again. And then we need to posit transition property. Why do we need to apply the transition effect? I want to apply it in our font size, so I'll copy the font size and paste it here. So if I said this file and then back to my browser, and if I reduce the browser size, you can see the transition. As you can see, our phone smoothly change its size. So our job is done. So let's edit video to our HTML page. So I'm going to use video tag here. And inside this video tag, I'm going to use some attributes, something like auto-play. Or next attribute iss plus inline, muted, loop and Prelude. And inside this video tag, I'm going to use source tag to link this video. So I'm gonna type source SRC, and our video file name is video dot mp4. So if I said this file and show you my browser, here you can see the result on your screen. And now we need to use two more SVG tag, depth stack and Musk tech. Let me show you. So I'm going to type dipstick her devs. And inside the div tag, I'm going to create Mustang Musk. And also I'm going to assign an ID to this mosque. Id equal to, and our id name is Musk. And also need to position this mosque, somebody who's x equal to 0. And also y-axis position is 0. And also I'm going to say it, Haydn wheat to this mosque, height equal to a 100 percent and also need to provide weed and we the call to a 100 percent two. And then I'm going to move this text tag inside the Mustang. If I said this file and show you my browser, here you can see our text is gone. And you already familiar with definition tag. We'll learn about dip tag in our previous tutorial. So I didn't going to explain it once again. So instead the mass tag, we need to create a rectangle. So I'm going to use rectangle. And I'm going to use same height and width property for this rectangle. So I'm gonna copy the coordinates and I'm going to paste it here. And also we need to use the same rectangle shape outset of this div tag, something like that. And if I show you my browser, now you can see nothing. And now we need to select our rectangle shape in our CSS. So I'm going to type SVG raked. Then inside the curly braces, I'm going to fill the rectangle with white color. So I'm going to use fill property, white. And then I'm going to use Musk property mask, colon URL inside the parenthesis. Here, we need to provide this ID mask. So I'm gonna copy the ID and I'm going to type hashtag or ID mask. If I save this file, it should work. Let's back to the browser and see what happened. Here. You can see our SVG video must work perfectly. And if I reduce the browser size is also work perfectly. So now it's clear for you how we can perform SVD test Maschine. So thanks for watching this video. Stay tuned for our next exercise. 32. Project 7 - SVG Loader 1: Good to see you back guys. In this section, we are going to create all the loader one by one. Here you can see total eight different type of is Vg loader. And I'm going to create all the loader one by one. And I'm going to start our projects with this loader. So let's see how we can create this loader. So finally, I'm back to my Adobe Illustrator Software and I create a viewport area to a 100 by 100 pixel. As you can see inside this viewport area, we have proton to shape, complete gray rings circle shape. With that, as you can see, there is a little piece of circle. And now I need to rotate these red piece of circle according to the circle circumference. Now the cosine is how we can create this shape. As you can see, I already create a similar size of view port area and hair. I'm going to create a circle without fill color. And then I'm going to align this circle shape, something in that position. And then I'm going to increase the stroke value to pixel. It's up to you what kind of stroke weight you want. And then we need to convert this stroke into an outlet. But for this, you need to select the stroke and then you need to go to the object section and Heroku ansi option, but just pick on Outline Stroke. Now it convert our stroke into a shape. And now I'm going to change the color of the stroke, something like gray color. And then I'm going to duplicate this circle shape in that position. For this, I'm going to press Control C, Control Shift V. Here you can see my layer section will have protons to ship now. And now I'm going to hide our previous shape. And now I'm going to cut this circle shape from this point to this point. For this, I'm going to use line shape. And I'm going to draw a line from this point to this point. And he's been to this point. And I'm going to select all the shapes and line together. And then I'm going to press Shift M to activate shape builder tool. And I'm going to cut this circle from this point. And also I'm going to remove the stroke lines. And then I'm going to fill this shape with red color. And also I'm going to visible my previous circle. So we successfully create the loader structure. And now we need to save this image as an SVG image. For that, you need to go File section and then press Save as. And here you can see file type option, SVG, Use Artboards and then praise CEP. What kind of and it is up to you what kind of CSS property you want to use. You can use style attribute. Otherwise you can use style element. And you know the process. I already say my SVG image. That's why I'm going to save it again. So let's back to the visits to the reader and tried to understand how we can create these loader. So finally, I'm back to my Visual Studio Code editor. And I already open HTML document name index.html. And also you can see it is busy image in my current working directory name loader dot SVG. And if I show you the SVG code, you can see clearly, as you can see, our viewport sizes to a 100 by a 100. And as you can see, we have total pooper in our SVG image. Our first part is for complete circle, and our second part is for Hub part of this circle. And now I'm going to copy the whole code from this file. And then I'm going to jump into the index.html file. At first, inside my body section, I'm going to create a div, div class loader. Inside this div, I'm going to paste all the SVG code, something like that. If I save this file and show you my browser, you can see the SVG image in our browser, but it's look pretty huge. We need to scale down, eat, also need to position eat middle of this page. So once again, I'm back to the Visual Studio Code Editor and I'm going to type style day her style. At first, I'm going to style the body. Instead the carnivorous is first, I'm going to use managing property magazine 0. Then I'm going to use padding property, adding also 0. And then I'm going to set the background color. I'm going to use RGB value, RGB inside the parentheses, our r value is 66, G value is also 66, and B will is also 66. If I said this file and show you my browser, here, you can see it creates a dark gray background color. And then I'm going to scale down this load of size. For these, I'm going to select Loader class. Loader inside the curly braces, height 300 pixel. We'd also 300 pixel. If I said this file and show you my browser. Here you can see we successfully scaled on our image. And now we need to align this SVG image center of this page. So inside the body selector, first I'm going to use display property. Display flicks. Justify-content, center, text align center. If I save this file and show you my browser, here you can see you horizontally align this image. And now I'm going to assign a margin to center it middle of this page. So I'm going to use margin, top blue, margin, top 300 pixel. If I said this file and show you my browser, here you can see we medulla a loader successfully and then scum, the main part of this tutorial. We need to animate this loader. For this, we need to rotate it. This red shape in the circles are gone phase. So let's see how we can rotate this shape. Now, we need to animate this bug. So at first, we need to create the closing tag. And inside this, but Dag will need to use another tag which is animate transform, some prototype and emit transform. And also I'm going to close this tag and also use some basic attributes are first, attribute is an attribute type equal to XML. And also need to provide attribute name equal to transform. And our animation type is rotate, type equal to rotate. And then we need to provide an initial starting point and animation end point for this, I'm going to use, for this, I'm going to use from attribute from equal to our starting rotation angle is 0. And then we need to provide the center point of this rotation. So we need to pass x-axis and y-axis. As you know, our SVD view box height and width, these 200 pixel. To find the center point, we need to divide. We then height width two. So if I divide it 200 by two, It's written a 100. This is for x, xs, and similarly for wife is, is sit on 100. So this is our x-axis one, and this is our y-axis point. So this is the starting point of this animation and also need to provide the input of this animation. So I'm going to use Tuvalu to equal to incentive the whole course. And first we need to provide the rotation angle. And I want to compute this rotation. So I'm going to use 360 degree. And also we need to provide the center point. So our excessive dilation is 100 and also y axis direction is 100. And then we need to provide animation duration time. So I'm going to use Darwin ptr equal to 0.82. And also I'm going to run this animation infinite time. So I'm going to use 3-bit count attribute equal to inside the double quotes, indefinite. If I said this file and then show you my browser. Here you can see on your screen or loader works successfully. And if you want to make this tradition more foster, unique or decrease the duration time, let me show you. So now I'm going to use 0.42 duration. If I save this file and show you my browser, here you can see our rotation speed is increased. So I hope notes good for you, how we can create these SVG loader. So thanks for watching this video. Stay tuned for our next exercise. 33. Project 8 - SVG Scroll Drawing: Hello guys, Good to see you back. Once again, I'm come with a new exciting exercise. In this exercise we are going to learn scroll drawing using SVG path tag. So let's jump into the web browser. As you can see, there is nothing on this page is completely blanked. But when my scroll, my mouse, you can see it draw a picture, it draw a star shape. This is visit trick is related to scroll bar. So when I scroll my browser, it compete the shape. So let's see how we can create it. So side-by-side, I opened my visits to the coordinator and my browser using web server extension. And I already created estimate dopamine named index.html. So at fast inside the body tag, I'm going to create the SVG tag is Vg. And also I'm going to assign an ID to this SVG tag, ID equal to my SVG. Then inside the head section, I'm going to use style. So inside the style tag, Foster, I'm going to select the body tag, body. And our first property is height. Height equal to 3000 pixel. You might be shocked why I use this amount of height because we don't have a lot of content in this web page. That's why for scrolling purpose, I'm going to use this height. If I said this file here, you can see the scroll bar. And then I'm going to start the SVG image hashtag, my SVG, inside the curly braces. Our first property is position. Position fixed. I'm going to use fixed position for this example. Then top 15 percent. And for the SVG image, I'm going to use for a 100 pixel wheat We 400 pixel and height 210 pixel. And also I'm going to use margin on lip side. So I'm gonna type margin left minus 50 pixel. Because I want to position the SVG image in that position, not the top-left of the corner. That's why I use this properties. Next. I'm going to create this dark shape using a DAG. So, but closing. But instead of Baghdad, our first property is Phil. Phil equal to none. I don't want any fill color for the star shape. Then our next properties, stroke, stroke equal to rate. And also I want to set the stroke width. So I'm going to use stroke width property with a girl who tree. And also I'm going to set ID to this bug. Id equal to star. So let's create the shape using both coordinates as you know, to create a shape using but dag, first unit to use the attribute D equal to. Inside the double quotes are starting boy, and we need to provide the starting point, capital M, 150 pixel. And also need to provide the endpoint. And our input is 200 pixel. And our next point is capital L, 225 pixel. And also important is 0 pixel. If I said this file, as you can see it, draw a line. Hey, there is a mistake in with spelling. I forgot to provide d between IND. If I said this file. Now you can see that we've got the stroke. So this is our starting 0.150 pixel y-axis and 200 pixel x-axis. And this is our next point. To create a starship. I'm going to create another point in this place. For x-axis, I'm going to pass 304 y-axis, I'm going to pass 200. If I set this file, you can see is create another burn in that position. And now I'm going to create another point, something in that position for these, I'm going to pass a bill, 150 x-axis and the y-axis. If I save this file, as you can see, it create the line. And then I want another point in that position. So in x-axis direction, I'm going to use il 300. And in Y axis direction, I'm going to use just 50. If I save this file. Now you can see the point. And now we need to compute this shape. So we need to draw a line from this point to this point. And as you know, go back to the start point, we need to pass zed value. Just wanted robust capital Z. If I said this file, now you can see it complete our star-shaped. So he successfully complete the drawing board. But if I scroll this page is not going to draw the image. For this, we need to use JavaScript. So at fast, I'm going to create the script tag, upper SVG tag. I'm going to type script. Then inside the script tag. First I'm going to get the ID of this path element, which is star. So var star equal to document dot get element by ID. Inside the parenthesis are enemies, star, and colon. To end the line, next, we need to get put on length of this shape. For this, I'm going to create another variable, VR Lind, equal to star dot. I'm going to use get total length function. Now we have the proponent of this dot shape. And next we need to play with stroke dish, revenue and stroke deaths opposite value. So star dot style, dot, stroke Daesh, Eddie equal to Lynn, then semicolon to end this line stroke dish. And I mean, this is the start position of this drawing. And using stroke deaths opposite property, we can hide this star-shaped. And next I'm going to use stroke deaths opposite property. So I'm going to replace stroke this array with stroke deaths opposite. Using these, we can hide this star with upsetting dash and remove this line before the star, before this cold row. And now we need to find percentages of this cruel. For this, we need to use window dot, add event listener function. Let me show you some real time window dot add event listener. Then inside the parentheses or even name is scroll. And when I scroll the webpage, I want to call a function. And our function name is myfunction. And now we need to create a function which can calculate this scrolling view. So I'm going to create this function at first I'm going to use function keyword function, and our function name is myfunction. Inside the parentheses, I don't want to pass any parameters, so I leave it black. Then inside the curly braces. At first I'm going to create a variable v. And our variable limeys scroll percent equal to inside the parentheses. First we need to join bodies CTO value with document's scroll top below. Let me show you. So document dot body dot scroll top. Plus. With that, I'm going to add with that, I'm going to add document element scroll Tocqueville, document dot document element, dot scroll top. And we need to divide it with height value. So instead dependencies, document.getElementById dot scroll height. And from school height we need to minus the client height. So I'm going to type minus document.write document element dot blind height. This calculation going to return the school percentages. And as you can see you when I said my file is already hide my shape and now we need to draw the shape when I scroll down. So I'm going to create another variable, VR and AR variable name is draw equal to lint, multiply by scrollbar sinned and semicolon to end this line. And if you want to reverse the drawing when you scroll upward for this star, dot style dot stroke desktops it equal to lend minus draw. If I said this file and scroll my page, as you can see, it perfectly drew our shape. And if I scroll it upward, as you can see, it reversed the drawing. If I scroll downward, it draw our image. And if I scroll upward, it's reversed the drawing. I hope you liked this project. Thanks for watching this video. Stay tuned for our next project. 34. Project 9 - Image Turbulence & Displacement Part 1: Hello guys, Good to see you back. Once again, I'm back with a new exciting exercise. In this exercise, I'm going to teach you how we can create turbulence wave effect. If I reload my browser, as you can see, after two seconds, it performed Darwin's if it animation. So let's start the practical and see how we can create this project. For this example, I'm going to use this image. As you can see side-by-side, I opened my Visual Studio Code editor and my browser using Live Server extension. And I already create a SQL document named index.html. And also I create a CSS file for styling style.css. And I already linked this file with this STL file. And next I'm going to use SVG tag inside the body tag. So I'm gonna type SVG then inside the SVG tag. For now, we don't need to specify any view box because will appear this SVD for a filter. So here I'm going to use filter tag filter. We have total 17 different filter in SVT. But for this tutorial, we are going to use only two filters. First I'm going to use tyrosines and then I'm going to use displacement map. But before I'm going to assign an ID to this filter, ID equal to noise. With that, we are going to pursue coordinates x position and y position. X equal 2 inside the quotation 0%. Similarly, y equal to instead the course 0%. With that, we are going to pass filter wheat and filter height. Weight equal to a 100 percent, also hide equal to a 100 percent. So let's use our phosphate altar, which is a feet are moulins. So I'm going to type if e Carolyn's. And now we need to use some attributes. Support. Our first attribute is best frequency, summertime base, base frequency equal to and said that all courts, I'm going to pass to value 0.02 and our second value is 0.03. These are two different views. It's going to effect the waveform of this turbulence. You can experiment with these values. It is up to you. And our next attribute, these results. So I'm gonna type result, result equal to noise. And also need to pass another attribute, which is num Octave, some retype num equal to one. And also I'm going to use the ID for this filter, ID equal to turbulence. And then I'm going to complete this tag. Let's use turbulence filter with an image and see how it's look. Softer SVG tag. I'm going to create another div, div and our deep pluses container. And inside this div container, I'm going to insert an image, image IMG, source. And our image name is, as you can see, ocean sun, promo, oceans and promote. If I said this file, you can see the image in our browser. So this is for HTML part. So let's jump into the CSS file and style this image so that fast I'm under Style body tag, body, margin-left 0, margin-right 0. And also I want to set height to this body, height equal to a 100 vh. And also I'm going to set the position, position relative. And then I'm going to style the SVG tag. Some to select SVG inside the curly braces, position, position equal to absolute. And then next, I'm going to start our container div, some new copy the class name, and back to the style file dot container inside the curly braces. I'm going to use display grid property, display greed. Next property is grid template columns. Grid template columns. Here I'm going to use repeat will repeat one. And for our grid cell size, I'm going to use Auto V Lu. I'm going to use Auto V Lu. And also I'm going to align this item center, align items center. And also I want to set height of this container. Height equal to a 100 vh. We'd equal to 80% and margin 0, auto. If I said this file, nothing is going to happen here. So let's apply the filter in our image tag. Summertime IMG. Inside the curly braces. I'm a type week with equal to a 100 percent for image I'm going to use. And the person who eat. If I save this file. And now you can see our images responsive. And now I'm going to apply this turbulence filter on this image. As you can see for these, I'm going to use this ID noise. So here I'm going to type filter URL hashtag noise. If I said this file, you can see that it isn't. So as you can see, if we use only turbulence filter on this image, Let's draw some crazy UIP pattern on this image. So with that, we need to use another filter which is displacement map. Some of the type. If ie, the specimen map. With that also we need to use some attributes. Are first, attribute name is in, inequal to instead that the whole course, SOS graphics, summertime source graphic. And our second attribute name is into in two equal to instead the double-quotes noise. And our third attribute name is skill. Skill equal to 20. If I said this file, you can see the leopard in on this image. Source grabbing is our image. And using noise, we can link this to filter. So upper combine these two fake, it's written this kind of result. So this is it for this tutorial. So in the next part of this tutorial, we are going to perform animation using JavaScript. So thanks for watching this video. Stay tuned for the next part of this tutorial. 35. Project 9 - Image Turbulence & Displacement Part 2: Hello guys, Good to see you back. This is the second part of this tutorial. And in this work, we are going to run the animation using JavaScript. Basically, I'm going to use these up and emission. So at first I'm going to link this file with CDN. And then I'm going to create a script tag. At first, we need to select the turbulence effect. For that, I'm going to use this ID turbulence. So I want to create a variable late ill element equal to document dot, get element by ID inside the parenthesis, inside the single quotes. Darwin's then semicolon to end this line. After that, I'm going to create a timeline. So PAL, timeline equal to new timeline max. Instead the parentheses. And inside the curly braces, we need to say pause equal to true, true, semicolon to end this line. Mean when I load my browser, it's not going to perform the animation. It going to perform the animation when a call. And now we need to just change the attributes using JavaScript. So I'm going to type T L dot to function inside the parentheses. At first, we need to pass the element means Turbulence element. So I'm gonna type in comma. We need to pass the duration, which is three seconds. And then we need to pass the object. And I want to change the attribute Sono type ATTR colon. Inside the curly braces, I want to choose the best frequency, some type based frequency here. With that, also need to pass the base frequency fit inside this single course, 0. 0. At last, we need to pass another view which is delay and upper 2 second delay or browser loading it going to perform the animation. So I pass two and semicolon to end this line. And at last, we need to call another function, which is play function sum to type PL dot play semicolon to end this line. So if I save this file, as you can see, up to 2 second, it perform our animation. Once again, I'm going to reload my browser. As you can see, app.use again, it went to perform my animation. And it's take three seconds to compute the animation. Because our animation duration value is three and our animation dw is two seconds. So in order to function and basically we pass total for parameter at first or selected element, thens animation duration. And then we need to pass the attribute value. And at last we need to pause the animation delay time. So this is it for this tutorial. And now you can create your own turbulence effect with SVG. So thanks for watching this video. Stay tuned for our next tutorial.