Learn SVG Animation- With HTML, CSS & Javascript

1. Svg introduction: Hey, do you want to learn AWG graphic and animation from beginning to end? Then you are in the right place. Hello. My name is Jouger. Professionally, I'm online instructor and footsteC web developer. I worked as an employee and freelancer regard to this field. I'm very enthused to learn SVG animation because we can program it, also we can control it when we want. And as you know, the transition and animation play the key role to make our website very introductory. Without wasting your time, let's see what we are going to learn from this course. At first, I'm going to introduce you what is AVG. And then we're going to learn how can we encrude SVG image in an TML document? Next, we are going to talk about the most important part of this tutorial series, which is SVG view port and view box. After that, we are going to jump into the element section, line element, react element, circle element, ellipse element, polygon element, polyline element, path element, text element, image element, stroke and field properties, and how can we grouping elements, depth, symbol element, et cetera. Next, we're going to learn text path and gradient element. At last, we're going to learn how we can include JavaScript in SVG images. Also I'm trying to cover some SVG animation features. After complete all of these properties, we are going to jump into the project section. Let's see what kind of project we are going to cover in this tutorial s. In our first project, we are going to create a moving cur animation using AVG. Next, we are going to jump this project. In this project, we are going to create SVG Stroke animation with CSS. This VC lines stroke animation looks fine with the transparent text. Then we are going to create another Line Stroke animation with a shape. As you can see, it draw a shape with the line. Next, we are going to create SVC elastric line animation effect, as you can see it change color with the movement. In our next project, we are going to learn how we can wrap our title with the stroke. Here you can see a text on your screen. If I Ober my cursor on it, it wrap our title with a stroke line. You can implement it on your website. Let's talk about our next project. Here we are going to create itable Wab text animation with 360 degree rotation. Here you can see our text content. It looks like a water wave and our content is itable also. We can remove our old content and we can put new text content here. In our case, I'm going to type Hello World. In our next project, we are going to create quick SVG loader animation, and you can see the example on your screen, how it's so. Next, we are going to create three D over animation using VG. As you can see on your screen, when I over my Kazar on this image, you can see a three D shape moving out from the background image. In our next project, we are going to create path tracking animation. You can see the war Map on your screen, and you want to send a cargo heap from New York to Kolkata. By this path, the ship will reach the destination. And if I dead my browser, you can see the animation. Suppose the red dot is our container sheaf and it's moving over the line. And in our next section, we are going to learn how we can create all the SBG pase loader animation one by one. Next, we are going to create scroll doing animation. As you can see, if I scroll around my Kurar it draw a shape. And this is on the end. With that, we are going to create SVG video mask animation. And in our final project, we are going to create the ultimate one. What is the special about this project? If I reload this page, as you can see, all the states of India reunite to its own place and complete the map. Not only that, if I Oba my car on the states, as you can see, it fill our states with tricolor. So this is the introduction video of our course. If you think it quite beneficial for you, enroll this course now. Thanks for watching this video. 2. Include SVG in HTML: Good to see you guys. In this tutorial, we are going to learn how can we include SVG file in a SML document? With that, we are going to learn how can we change HVC properties using CSS? Let's see how it's worked. Here you can see a VG image, which I open in Illustrator software. I'm going to use this image on a SML page with CSS. Now I'm going to open the studio code editor and see how it's worked. You can see side by side, I open my visual studio Cditor and also open my browser and I already create TML file named index dot HTML. Also I up this image on my current working directory. Here you can see a D which class is container inside my style tag, I style this container. I said background color, border, heightened width, and margin lipped harta pixel. You can see this container is blank, and now I want to insert Vg image in this container. For this, I'm going to use Image tag, simply type IMG. And our file name is mag dot wig. I'm going to type image dot wig. Now I'm going to set this file and reload this browser. Here you can see the pit. We can use them like any other images, PNG, JPG, GP, et cetera. Now I'm going to show you how can we use this image using CSS. I'm going to comment out this line, and I'm going back to my style section. Inside the background property, I'm going to use a tag, which is URL. Inside the parenthesis, we need to provide the file path, which is image, av, that's it. If I set this file and reload this browser, you can see the picture, but it is coming in the background. Let me prove you that. If I type something Loum textFile and set this code, and if I reload this browser, you can see it's come in background. I'm going to remove this line, I don't need this line. I'm going to set this file once again and reload it. So you can say SVG images in background. We can research our file using background size property. I'm going to show you that. Background size 150 pixel. If I set this file and reload this browser, you can see a lot of images on this D. You can see a lot of images in this D because we do not use modifet value for this background, so I'm going to type ModiP. If I set 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. Now it's clear for you, we can use SVG images with CSS, and we can set any higher than we. Now I'm going to show you the third method, how we can use SVG image using SVG tag. So I'm going to type SVG. For this, I'm going to open this image on my text editor. There you can see the structure of image. You can see it's made with PT. I'm going to copy the whole dig tag. Copy and then I'm going to go back to my index dot STL file, and I'm going to paste it inside the container. I'm going to remove this line and I'm going to paste it here. That's it. Now I'm going to remove the CSS diagram property. I don't need this now and I'm going to set this file. If I reload this file, here you can see the same picture. What is the main benefit if I use SDG tag like this? In this course, we are going to learn that. The main benefit is we can edit ATL and CSS. If I want 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 rowser you can see it change the hair color. Not only that, we can use class on this path. Just type class. Our class name is zero is t one. I'm going to remove this style. I'm going to change the class name just t one. Inside this tile tag, I'm going to create the selector. Inside the Css, and now we can use CSS property and their value. I'm going to use fill. I want to fill with hot pink. If I set this file and reload this file in my browser, you can see now the hair color is pink. This fill property used for only SVG. With it, we can set background color. Let me show you something. Now I'm going to create a Her effect. I'm going to use dot, container, colon, hover, ST one. Then inside the car resist fill black. I just want if I hover this image, it's going to change the background color black. I'm going to set this file and also I'm going to reload this file on my browser, so I reload it. So as you can see, when I over the container, it changes background color. Similarly, we can do anything with that. We can animate this picture. We can link this picture, anything. These paths are basically object. So we can change any object color. Let me show you that. So I'm going to increase the browser's size, and I'm going to turn on Developer option. Now we can use now we can choose the particular element, just hover on the element, something like that. And here you can see the field color of this object and we can change it. Just drag the color as you want. If you want blue color, just drag to blue, that's it. It's turned into a blue color. Using class, we can edit it in our style section. You can edit anything. If you want to delete any object, yes, you can. I hope now it's clear for you how we can input SVG file in our STL file. We can use Image tag and also you can use CSS, but the best way is SVG tag. I hope you'll like this video. Thanks for watching this video. 3. SVG ViewPort & ViewBox Tutorial: Hello, friends. Welcome back. Before we start learning about SVG, we should have knowledge of viewport and view fox. So let's jump into the computer screen. Here you can see, I open my previous TML file. Here you can see a D and its class is container. You can see we specify DV height and width and background color and border. Inside the container, I use a SVG image. Now I'm going to explain to you what is viewport. Viewport is the area where we see the image. As you can see, this is our viewport and now I'm going to resize my viewport. I'm going to select SVG tag. Inside the style section, SVG. Then inside the car divs is, first, I'm going to give a border to my viewport, border to pixel. Solid and color is black. If I set this file, now you cannot see the border because our container size and SVC image size is same, and now I'm going to change the image size, height 200 pixel with 200 pixel. If I set this file and reload my browser, now you can see the border. Now this area is our viewport. Our viewport height is 200 and with this 200 also. The area in which you display the image, we called it viewport. 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 viewbox. What is view boox? How we display the image inside the viewport, we call it Viewbox. We can zoom view boox inside the viewpot area. Also, we can zoom out it. Let's make it more simple. I'm going to open my Illustrator software. Here you can see the whole white area. This is our viewpo you can see a shape inside the viewpot and we can place the shape anywhere in our viewpot. We can move the shape anywhere inside the viewpod. We can draw SVG images inside the viewpot. But if I talk about view boox's related to zooming and spanning. Now I want to show this image bigger inside the viewpot. If we want, we cannot show the whole image inside the viewpod, something like that. We can do it using our viewbox. You can see we do not change our viewpot area, but we can change image position inside the viewbod area. We can scale in scale out, and if we don't want to show the whole image, we can. We can do it using viewbox. Let's see how can we do it practically? Now you can see our viewboard is 200 by 200. Inside the viewport area, we can see an image which is claimed from view boox. Here you can see a property in our SVG, which is view box. It made with four value X xs, YX, width and height. I start with X xs, then come YX, then width and height. And here you can see, we take similar with and height like our container. If I increase view boox with 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 set this file and reload this browser, you can see it zoom out a little bit. If we increase high weight in our view boox then it zoom out our picture. The base size of the image is 500 by 500. If we increase the value, then it zoom out. If we decrease the value, then it zoom in. Let me show you and we do type 200 by 200. If I set this file and load this browser, you can see it cut our image, means it's Zoom our image. It's work 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 set this file and reload this browser, how you can see it's back to his own place. Let's talk about XXs and YXs. If I type XXs 100 and set the picture, then this view box start from 100 point, something from here. If I reload this browser, you can see it. We can move images using XX and YXs. Similarly, if I use 200 for YXs and reload this browser, now you can see the image start from here. Inside the same viewport area, we can change image prospective and their position using viewbox probity. According to the viewbox, the image start from 100 Xxs and 200 YXs. Not only that, at a time, we can zoom out our picture. So I'm going to increase heightened width value 700 by 700. If I set this file and reload my browser, you can see it zoom out a little bit. But I would like to back normal position. Not only that, we can use minus value for Xxs and YXs. If I set this file, now you can see it start from opposite direction. Let's put this image in his default position, zero, zero. If I set this file and load this browser, here you can see it's back to his own position. I hope now it's clear for you what is viewport and view boox. Just remember, viewport is outer area and Viewbox is inside a. Let me show you another example that make you viewbox very clear. Here you can see a new SVG image in my browser and you can see four different shapes in this image. It's a single image, but inside the image, we have four different objects, circle, polygon, react, rectangle, et cetera, we call it image sprite. If we combine different image with that, if we create single image, then it called Image Sprite. 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 a single image. For this, we need to zoom this image and position this image. That's it. Our viewport height is 500 pixel. If you notice, all the shapes take same amount of height, 125 pixel. I'm going to type 125 for width and 125 for height. If I set this file and reload this browser, here you can see objects are not in viewport area. So we need to move their position using XX RL. I'm going to type 188 pixel from XXs. If I set this file and reload this browser, you can see our first geometrical shape. Now I'm going to change YXs and you can see every geometrical shape one by one. I'm going to type 125 pixel for YXs. If I set this file and reload this browser, now you can see our next geometrical shape circle. If I add 125 with this value, so I'm going to type 250. And set this file. Now you can see another shape rectangle shape. 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. I hope now you can understand how we use viewvOx in reaching. Thanks for watching this video. See you soon. 4. SVG Line Element Tutorial: Once again, I'm back with a new T to, and in this video, we are going to learn about line element. We used line element to draw one. But before we draw any line, we should have knowledge about X xs point and Y axis poin. 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 xs and Y xs and we recognize it X one and Y one point. To starting a line, we need to provide X xs point and Y xs point. Similarly, we need to provide the point to the line, and we recognize it X two and Y two. Overall, we need four attribute to draw a line. X one, Y one, X two, Y two. Without this zero, we cannot create the line. Let's see how we can create it practically. Here you can see side by side, I open my visual studio Cretor and I also open my browser using Live Server extension. I already create an estimate document for this example. Here you can see, I create a Dev named container, and I set a background color and border to this container. Also I say hide wid 500 pixel for middle alignment, I set Margin zero and auto. Inside the DV you can see an SVG tag. Inside the view boox I use Xxs zero and YX is zero. I say, we then height 100 and 100. Inside the dip, I create a grid. For this grid, I use G tag. I will explain you later how we can create grit in VG and I'm going to start it from here. First, I'm going to take a line tag. As I told you earlier, we need four attribute to create a line. Inside the line tag, I'm going to type X one, equal to 20 pixel and Y equal to and YN is 40. You can assume that after every ten pixel, I draw a line. So this is X zero, this is ten, and this is X 20. This is Y zero, this is Y ten, this is Y 20, this is Y 30 and this is Y 40. Our lines start from this point, now we need to define the end point. Our X two point is 80 and our Y two point is also 40 it's going to create a straight line. If I set this file, you cannot see a line because we need to define a stroke color to this line. I'm going to use stroke property. I'm going to type stroke and I'm going to give a color to this stroke. Rate. If I set this file, now you can see the line. Similarly, if you want to create a diagonal line, just increase the value of Y two. I want to type 60. If I set this file, here you can see, now it's create a diagonal line. In that way, you can create any line. Using stroke property, we can set color. In our upcoming video, we are going to learn more about stroke. And now I'm going to create a rectangle using line. First, I'm going to draw a straight line, so I'm going to change Y to value for B. I create our straight line, and then I'm going to replicate this line, and I'm going to start my next line from this point. I'm going to type X one, 80 and Y 140. Now our second line start from this point, and I want to end this line this point. Our X two point is 80 and also our y two point is 80. I'm going to change the color of the stroke blue. If I set this file, you can see the line, and I'm going to duplicate this line. Now I want to start my third line from this point, and I want to end this line this point. For this, just change for this, just going to change Y 1.80 for X two point, we need to type 20. It is X zero, it is ten, it is X 20. I type X 2.20 and we don't need to change Y two point, and I'm going to change the stroke color green. If I set this file, you can see the line. For our fourth line, I'm going to duplicate this line once again. Now our lines start from this point means X 20 and yet this line going to end this point. Mean we don't need to change the X value, just going to change the Y two value 40. If I set this file, you can see the line. Congratulations. We just create a rectangular shape using lines. You can see using start point and end point, we create a rectangle. We can draw any geometrical shape with that. For this, we need to use line tag, and also we need to mention a stroke color for this line. Otherwise, we can't see the line. If I remove the grid and set the file, now you can see without grid how it looked like. I create this grid because that you can understand our points better. If we use grid, it is very easy to draw a structure. Now your challenge is create a triangle without using grid. It's not a very difficult challenge. I hope you enjoy this challenge. Thanks for watching this video. 5. SVG Rect Element Tutorial: Hello, guys, good to see you back. In this tutorial, we are going to learn about react element. Rect means rectangle. Let's see what type of attribute we need to create a rectangle inside the Bigita. Here you can see a viewpot and inside the viewpot I create a rectangle. If we want to create a rectangle like this, then we need a starting point. For this, we need X xs and Y axis. With that, we need two other attributes. First one is width and second one is height. Let's see practically how it works. Here you can see side by side, I open my visual studio Cditor and I open my browser using if server extension. As you can see, I already create an TML document, and I also create a deep class container, and I say heightened with background color and border. Inside the Deb I already use SVG tag, and I set view box hundred by hundred pixel, and I already create a grid structure that you can understand our points very easily. Let's start to create a rectangle. For rectangle, we need to use Rc tag, RECT. To create a rectangle, we need four attribute, and I want to start my rectangle from this point. So our Xs point is 20 and our Y xs point is 13. Then you need to provide width. For Width, we have a attribute named width. Hey, I forgot to use double quotes. We need to move this value inside the double quotation. Otherwise, it's not going to work. Our Wi, I'm going to type 80 pixel and also need to provide height. And I'm going to provide 40 pixel. If I set this file, you can see in my browser, it draw a rectangle and I'm going to decrease this with Blu benti. If I set this file, now our rectangle looks like perfect, by default, our rectangle colored is black, and there is no stroke in this rectangle. To give a stroke, we need to use stroke pprity STROKE equal to inside the double coat, I'm going to use red color. If I set this file, now you can see the stroke. If you want to change the rectangle color, then we have a property named fill. Instead the parenthesis, our field color is, I'm going to set yellow. Basically, we use field pupatry to change background color. You can type color name, otherwise, you can use hexa yellow. I'm going to change the field color pink. If I say this file, now our rectangle background color is pink. And if I don't want to sent and if you don't want to set any background color to this rectangle, just you need to type none. If I set 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 set border reduce to this rectangle. Then we have two property RX and RY. I'm going to type RDX. Rx equal to ten. If I set this file, you can see it reduce our border ten pixel. You don't need to type any parameter because we use view vox. If I use RI property means radius Y property, I'm going to type R Y. Equal to inside the codes. Basically, it's worked vertically, and I'm going to set it 50. If I save this file, now you can see, it's change our shape Rx work in Xxs and RY YXs. You can change radius dimension with this value. Let's summarize this process quickly. How we can create this rectangle. First, we need starting point. Here we need to pass X value and Y value, and then we need to provide within height, and we need to within height according to this U box. Suppose this is our starting point and I take with 70, we need to count it from this point, ten, 20, 30, 40, 50, 60, 70. It's work like that. How do we set our X radius and Y radius? And for stroke, I use stroke property, and for background color, I use field property. We can create multiple rectangle in one Vg tag. Let me show you this. I want to duplicate this line and I'm going to set our x 0.30 and Y 0.40. I want to set with 40 and I want to set height 20, and I want to set background color green. If I set this file, now you can see the rectangle inside the rectangle. If I remove the radius, now you can see the proper rectangle. Using this process, we can create multiple rectangle as we want. So I hope now it's clear for you, how can we create rectangle inside the SVG tag? Thanks for watching this video. 6. SVG Circle Element Tutorial: Hello, friends. Good to see you back. In this tutorial, we are going to learn about circle element. As you know, we 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 view pool. If you want to draw this circle, then we need X xs and YXs. We define this Xxs attribute with Cx, means circle Xxs and CY for circle Yaxis. 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 role and we define this radius with R. Let's get into the visual studio codiator and see how it's work. Here you can see side by side, I open my browser and I open my cod editor, and I already create a estimate document. Inside body tag, I already create a deep class container, and I set height and width to this container. Inside the deep tag, I use WiGtag with view box and I already create a grip to understand the attribute points. Now I'm going to create this circle tag to create a circle first only to create circle tag. And also we need three attributes to create this circle. First, we need X xs and yxs. Our attribute name is CX, equal to, and I want to make this circle from center. I type 50 and CY for YXsEqual 50. Now our most important attribute is radius. Using radius, we can define the size of the circle and we define radius attribute using small R, R equal to 40. If I set this file, here you can see a black colored circle. Black is the default color. And if you want to change this circle color, then you need to use field attribute. I'm going to tie fill. Fill equal to, I want to use green color for this circle. If I sat this file, here you can see, it's turned into a green circle. If we want to use stroke, yes, we can. Let me show you. For this, we need to use stroke attribute. And I want to use red color for stroke. If I set this file, here you can see this stroke. If we do not want to use any color, just to type none in fill. Here you can see now our circle is completely transparent, for now I'm going to use green color, and now I want to reduce the circle size, so I'm going to reduce radius value 20. If I set this file, now you can see it scaled down by 20 pixel and also I want to move this circle to this corner. I'm going to increase X value 80 and also need to increase Y value. 80. If I set this file, here you can see, we perfectly move this circle in this corner. Not only that, we can create multiple circle in this VG tag. I'm going to duplicate this circle tag. Also, I'm going to change the X value and Y value 30, 40, and our radius is ten and color is blue. If I set this file, now you can see this circle. 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, et cetera. Now it's clear for you how we can draw circle in a Veggitag. In the next tutorial, I'm going to show you how can we create Ellipse element. Thanks for watching this video. 7. SVG Ellipse Element Tutorial: Once again, good to see you back. In this tutorial, we're going to learn about Ellipse element. Let's see what kind of attribute we need to create a Ellipse element in his VG tank. Here you can see inside the viewport, I draw a Ellipse element. To start Ellipe element, we need two things Xxs and Y xs. We define X property with CX and we define Y property with CY. Similar to circle. Unlike circle element, we need two other properties. RH means radius X and RY means radius Y. Let's see how it's work in practical. Here you can see, side by side, I open my rezo studio corator and my browser using Lip server extension and I already create a TML document. Have a deep plus container, and I said background color heightened with margin and border. Inside this deep tag, I have a SVG tag, and we set Vevox vedo to this SVG tag. As you can see, I already create a grid system to understand the attribute points. Let's start how to create Ellipse element. First, we need to type Ellipe tag. Inside the ellip tag, I'm going to take property Cx and Cy, Cx equal to 50 and CY equal to 50 because I want to start this ellip middle of this Ux. Now I need to provide radius Xxs and radius YX, Rx equal to 20 and radius yx equal to 30. If I set this code, here you can see our lips element. By default, it's a black color. If you want to change the color of this ipe element, then we need to use fill property, if I do I want to fill this ellipse with red color. If I said this file, now it's turned into a red. If you want to use stroke, you need to use stroke property, stroke, equal to black. If I set this file, here I can see a black stroke. If you want to make it transparent, just type none in field section. Now it's completely transparent. Now I'm going to create another Ellipse tool inside this as ig tag. I'm going to duplicate this Ellipse tool and I'm going to change the Rx and ROI property, ten, 20, and I'm going to provide the field color green. If I set this file, here you can see another Ellipe element inside this Ellipe element. If you want to rotate this Elpe element, yes, you can. Now I'm going to use class in this Ellipe element, CLA doulas and our class name is second because this is our second Ellipe element. In such this style section, I'm going to select this element. Second. Inside the cells, I'm going to use a property transform, transform, rotate, and I want to rotate this element 20 degree. If I said this file, her can see it's rotate the F element 20 degree in his place. 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 Aisin 50% height and 50% width. If I set this file, now you can see it's rotate according to middle of this view pool, and I'm going to increase the rotate value 40. If I set this file, you can see we can control the rotation degree. I hope now it's clear for you what is lip element and how we can draw lip element in a WIG tag, and how we can rotate it using CSS. Thanks for watching this video. 8. SVG Polyline Element Tutorial: Hey, once again, I'm back with new tutorial. In this tutorial, we are going to learn about polyline element. Let's see what attribute we need to create a polyene shape. Here you can see a polyan shape inside the view boox. You can create any type of polyene shape. You can create hundreds of site for your polyene element. Here you can see we have total five side in our polyne shape and we need points to join these two lines. Suppose I want to start my polyne shape from this red point, we need to provide the exact Xs value and YXS value. Similarly, for green point, we need another Xxs and YXS value. We need total five different points to create this shape. But if you want to cross this shape, once again, you need to provide first X xs and YXsPoint Mans our red point value. Total, we need six point to draw this shape. Now you can think we can do the same job using line element, but there is a problem. Cannot feel the shape with color. Also every time we need to provide starting point and endpoint, but you can create this shape using one tag, polyline tag. Let's dive into the browser and see how it's work. Here you can see, I already created a TML document, and inside the body tag, I create a class container. Inside the DV I create a SVG tag, and I set our view box hundred by hundred pixel and I create a grid system inside this view boox to understand the values. Now I'm going to start our tag polyline. 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, Xs and YXs. Suppose I want to start this polynee from this point. Our Xs point is 20 and our YXs point is 20 also. Suppose our next point is here, so we need to provide a space, and according to this point, our x value is 80 and our YX value is 30. For our third point, I'm going to use this point means 60 y 60. I'm going to use space, and I'm going to type XX 60 YXX 60 then we need to provide our fourth point. And for our fourth point, I'm going to use this one. According to this point, our Xs is 20 and our Y xs is 50. I'm going to pass 2050. If I set this file, you can see a polyline shape. As you can see, by default, it's a black color. And if you know the process, how we can change the polyline color, we need to use fill property. Fill green. If I set this file, now it's turned into green color. Not only that also we can use stroke property, stroke, equal to rate. Now you can see this stroke. You can see we do not complete our polyline shape. That's why we do not provide the stroke from this point to this point. We need to close this point. Otherwise, this shape is complete and you know our end point D is our starting point, 20 d 20. I'm going to copy these points and I'm going to give a space and paste. If I set this file, now you can see the stroke. Now it's complete our shape. Using polynee you can draw any shape. If you don't want to give any background color, just type none in field section. If I set this file, now you can see, it's completely transparent. Let's summarize this lecture. To create a polyline, you need plyine tag. And you need one attribute to create polyline points. To draw a line, you need to provide Xs and YXS value. And for your next point and once you need to provide Xs and YXS value. In this similar way, it keep going on. And one thing you need to remember, your endpoint should be your starting point. Otherwise, the shape would be incomplete. And if you want to fill this shape with color, you can use field property, and for border, you can use stroke property. So I hope now it's clear for you, how can you draw a polyline shape inside the VG tank? Thanks for watching this video. 9. 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 you want. This is a polygon shape, but also it looked like polygon shape. Which I covered 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 call these two line joins points, and if you want to start this points, you need Xs value and YXS values. If you want to start this polygon element from the red point, then you need to provide red Xs point, red YXSPinFGreen point, you need to provide green Xs point, green YX point and keep going on. But the difference between polyline and polygon element is you don't need to provide the end point, to close this shape, polygon element, complete it automatically. Suppose I'm going to delete this yollowpoint, something like that. In polygon 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. Let's start the practical how it works. Here you can see, side by side, I open my Visual Studio codeor and my browser using light server extension. I already create a TML document. Inside the estimL document, I create a Dep plus container, and I specify background color for this container and set high denoi Also I set border to this container. Inside the container, I create a AVG tag, Al you can see the view size. Inside the VGmage I create a gree to understand the attributes properly. Let's draw a polygon element. First we need polygon tag? Inside the polygon tag, our first attribute is points. And I want to start my polygon shape from this point. I'm going to type 50 and our YXs is 20, our next point is here. It's mean 80, 30. Xxs is 80 and YXs is 30. I'm going to provide a space between them, and I'm going to type XX is 80 and YXS 30. Next, I'm going to draw a point here. I mean XX is 50, YXS is 70. I'm going to type space. Xs is 50 and YXS is 70. So if I set this file, her 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 papertyFel equal to green. If I set this file, you can see, now it's down into green color. And to set a border, we need to use stroke Paperty. Stroke equal to rate. If I set this file, here you can see a red stroke. If you notice, you can see who just provide three point, 50 20, 80 30, and 50 70, but we do not provide the end point. For this last line, I do nothing. It's automatically draw the last line, but in our previous tutorial means polyan tutorial. We need to mention the last line. Otherwise, it's not going to complete the object. Now I want to draw another point here. It's mean XSS is 30 and Y Xs is 50. I'm going to provide 30 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. 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, you need to type none in field section. That's it. Now you can see it's totally transparent. I hope you understand polygon element. Thanks for watching this video. 10. SVG Path Element Tutorial: Hey, once again, I'm back with a new tag, which is butt tag. Path tag is one of the most advanced tag in SRG. You can draw any kind of frame using this element. Using this element, you can draw line, circle, rectangle, polygon shape, and minim. Let's see an example and try to understand how we can create a shape using Bth element. Here you can see inside my view for, we create a basic shape using BT and you know when two line joins, we call that position points. Suppose you want to start this shape from the pin point. You need to provide the coordinates mean Xxs and YXs we need to follow the similar step for green point, BluePoint and red point. F red point to pink point, you can see a curve shape. For these, we need to use arc command. You can draw any shape very easily. There are a lot of shapes, arc, polygon, circle, line, et cetera. For these, we need to use different commands. Let's see the commands. Here you can see the commands related a VG path and we divide in four category. Our first command is line command inside the line command, we have four different coman. L, H, V, and Z. In this tutorial, we're going to learn line command, and thence come V ser curve and quadratic baser curves. We are going to learn about this curve in our next tutorial and our last command is arc command. I'm going to teach you all the commands one by one. Let's start with line command. Here you can see, I already created TML document, and I already create a deep plus container. Hurricane see, I style this deep. I already set a background color and I said height and width, and I also said border. Inside this deep, I already take a SVG tag, and I also set V box in this deep. Temporarily, I create a grid inside this SVG tag. Using this grit, it's very easy to understand our attributes. Let's start with practical. First, I'm going to take Put tag. Put to start this park, we need an important property named D, D equal to inside the double cops. We need to provide the points. D means draw. Instead the parenthesis, first, you need to take command and M should be capital. Using, we can define the starting point of our cursor. Now I'm going to take a point from where I want to start this path. I want to start my path from this point. Man, x is 20, YX is 30. I'm going to type, 20, YX is 30. If you want to draw a simple line, you need to use L command. And I want to draw a line from this point to this point. Xs is 80 and Y xs is 30. I'm going to pass 18 30. Also we need to provide this trope. Otherwise, we cannot see the line. Our stroke color is red. If I set this file, here you can see a red line. First, you need to provide the starting point using command. With that, you need to provide Xxs and YXs. Then you need to provide a space. If you want to draw a line, then you need to use command, and also you need to provide Xxs and YXs. If you want to create a straight line just using two point, you can remove this command. If I set this file, here you can see, our line also exists. You can see there is no changes. It's also work. It's also work for when we create a straight line. But for now, I'm going to use ommand. And now I want to draw another vertical line. I'm going to provide a space, and I'm going to type X 80 and YX is 70. If I set this legacy it draw a line Bdfaul is provide the black color in this shape. If you want to change the color, you know the process. You need to use field propriety. And I want to fill this shape with green color. If I set this file, you can see it's turned into green color, and now I create another line to this point. I'm going to provide a space, and I'm going to use line command A, X value is 40 and Y Xs value is 80. If I set this file, you can see it draw a line from this point to this point. You can create any type of diagonal line. It's not mandatory to create always a straight line. You can think it's pretty similar to polyline element. Similarly, to complete this shape, you need to provide the last point. Simply, if I want to end this shape, just need to type 20 and 30. If I set this file, now you can see it's complete the shape. If you don't want to provide the end point, you can use Z. If I set this file, you can see the similar result. There is no changes. If you want to end this shape from this point, you can just remove the values and set the file. Now you can see it's complete our shape from this point. Z means cross path command. If you want to close any path, we can use Z command. Now I'm going to introduce you to new command H and V. H means horizontal line, V means vertical line. Here you can see the line, we need to provide two coordinates to create the line, Xxs and YXs. We know we just need to create a straight line. For this, we don't need to provide this last point. We can use only horizontal point. I'm going to remove the command and replace with H command. If I set this file, here you can see there is no changes. It's create a line from 20 pixel to 80 pixel. If I increase the value, 90 pixel and set the file, now you can see it's change our shape. H command only work for horizontal side. So going to reset this shape, and now I'm going to show you the V command. For this, we don't need to provide Xxs we need to provide Yxs. Let me show you Foster type V, and now I want to draw a line 30-90 point. So I'm going to type V 90. If I set this file, now you can see, it's increase the line size vertically, and now I want to create a rectangular shape. I'm going to provide another H point Mint Xs point, H 20. If I set this file, now you can see, it's create a perfect rectangle and our ZT command automatically automatically complete this shape, and our Zt command always create a straight line. Z means closed path command. Let me explain this whole thing once again. First, you need to take Path tag. Instead the path tag, you need to use a special property, D. D means draw. Inside this D, first, you need to use command. You need to specify the start point from this N command. If you don't provide command, it's not going to draw anything to draw a line, you can use command. After command, you need to provide X access point and Y access point. Otherwise, you can use horizontal command and vertical command. Last, you need to use Z command, Mans close Path command, I going to close your path. I hope now it's clear for you. Thanks for watching this video. 11. SVG Path Element Tutorial part 2: Good to see you back guys. This is our second video related VG Path element. In this tutorial, we are going to learn about curve commands. As I told you earlier, we have to tell four type of commands in path element, Lane command, which we complete in our previous video. And in this tutorial, we are going to learn about cubic baser curves and quadratic baser curves. To create a Vic curve, we have two commands, C and S. And for quadratic curve, we have also two command, and T. So first, let's try to understand we can create cubic bezier curves. Here you can see inside my viewport, you can see a curve path and we have two curves in this path. One curve is from downside and another curve is from upside. To create a path, first we need two points, starting point and endpoint. Suppose red is our starting point and lu 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 access value and Y xs value. Also, in our second green point, we need to provide X access value and Y cess value and we recognize this point with C command. S means Cub curves. So when you create a Point, it's automatically create a curve. It's not going to test the point, but it's going to follow the point, and you can control the curve depth using YXS point. Just you need to remember between starting and endpoint, you need to provide two curve point to create a QV ser curves, and we have to write command like this. First, we need to take moving point means, and you need to define the starting point using XXs and YXs. Here you can see our XX is 15 and YXs is 50, and as you can see in blue color, this is our end point. 70 and 50. Between start point and point, we need to use C command to use QV ser, and I create our first green 0.20 70 coordinates. Means Xs is 20 and Y xs is 70. Next we provide another curb point. Excess is 50 and Y axis is 30, and you need to give space between these two curb 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 we create the curbs upset to the starting point. For this, first we starting point and endpoint, and we need another two point to create this curve. Let's see the practical, how can we create cubic bezier curves? Here you can see side by side, I open my Visual Studio Creator and my browser using life server extension, and I already created TML document. Inside the estimL document, I create a SVG image and I create a grid structure to understand the attributes. First, I'm going to create a Path tag, and I want to use field pbatyNun. I'm going to type fiel equal to inside the quotation nun. I want to rate stroke for my path. 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, I praise AM. Our XX value is ten and our Y xs value is 60. This is the starting point of our path and also we need to provide the endpoint. I provide space and I'm going to type 60 60. If I set this file, here you can see is draw a line and let me increase the line in xxx. I want to end this line in this point. So I'm going to increase the XXS value 80. If I set this file, now you can see it increases the line size. And now I want to take a curve between these two point. So between starting and end point, you need to take a command which is C and C should be capital. Up to C, we need to provide the point. I'm going to use 20 Xs and Ys point is 70. If I set this file, you can see the line is gone. Because we use QV curve, so we need to provide two points. So after space, I'm going to create another point, 50 and 30. If I set this file, now you can see the curve. Here, you can see it creates two curve in this point and in this point. We need to provide two points to create this curve. If I increase the YXs value 70 to 90 and set this file, now you can see it creates much more deeper curve. If we decrease the second curve, YX is value, zero, zero and set 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 value -40 and set this file, now you can see it's going more deeper in top side. 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 YXs ten for our first point, similarly, if I use YX ten for our second point and set this file, now you can see it's got one sided curve. If you want to create two curve using one path, then you need to use another command, which is a command and our command always work with our cubic curve. Mean C command. First, let me show you the example. Here you can see a curve path. Here I use two cubic bezier curve in single path. So similarly, first, we have one starting point and one end point. But as you can see, there is another curve. But as you know, to create our first curve, we need two attributes, and we need to type command something like that. After creating this curve, I want to create another curve using the same path. For this, we need to use command. If we use command, we don't need to provide the starting point. Simply, we need to type end 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 code. After C command, you need to use command. First I type end command and between S and Nommand, we need to provide the single curve point. Let's see the practical how it's work. Once again, I'm back to my Visual studio coordinator. First, I'm going to change the car points, C 20 and CYXs 18. And in our second point, XX is 40 and Y xs is 80. If I set this file, you can see it's created curve in downside. And if I decrease the endpoint of this curve, 80 to 50 and set this file, now you can see the curve. It's create a perfect arc shape. As I told you, I want to create a new curve with that, so I'm going to use command. And for our second curve, I want to create point here. Hence X value is 70 and Y xs value is 20. I'm going to type 70 20. Also we need to provide the point for this curve. I'm going to use 90 60. If I set this file, now you can see the curve. I hope now it's clear for you, how can we create two cuvic curve in one path? If you want to create one cuv curve, just unit to use C command. If you want to create two cuv curve, then you need to use command. And our 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 baser curves. This is the example of quadratic baser curve. First, we need to provide the starting point, then we need to provide the end point. The main difference between quadratic curve and QV curve is in quadratic curve, you need to provide one curve 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. Let's take a quadratic value top of this line. I'm going to type XS is 20 and Y Xs is 30. If I set this file, here you can see it created a quadratic curve. If you want to create more higher curve, then you need to decrease the YXs value. YX value is ten. If I set this file, you can see more higher curve. If you want to create a curve under this state line, just unit to increase the Y xs value 80. If I set this file, now you can see, it's create arc shape under the line. If you want to move this curve point from this side to this side, just unit to increase the XXS value 40. If I set this file, you can see it's moved the curve point. This is our quadaty curve. This is our quadratic curve. Basically, you need to provide a point between start point and endpoint, and you need to use Q command to specify this point. If you want to create two quadaty curve in one path, then you need to use T command. Let me show you how T commands work. Hercac in a single path, we create two quadratic baser curve. First, we need to type one starting point and one end point. Between starting point and endpoint, we need to type Q point to create the first curve and you know the process. If we want to create our second quadratic curve, simply just on one end point and we don't need to provide any curve point. According to the green point, it's going to create same curve in opposite direction. The main benefit is we don't need to provide the second curve point. For green point, we need to use Q command and for purple point means end point, we need to use T command. Let's see the practical how it works. So once again, I'm back to my visits to your cod editor. So first, I'm going to change the Q coordinates 30 y 30. If I set this file, you can see it creates a arc shape in upside. Then simply just we need to use P command because we need to create another quadratic curve. So after T, we need to provide the Xs and YXS point. XXs I'm going to take 90 and from YXs I'm going to take 60. I set this file, here you can see the curve. You can see it automatically create this curve just to take N point, not curve point. This D command work with Q command coordinates. Without Q command, it's not going to work. It's only work with quadratic curve, not QV curve. I hope now it's clear for you what is QV curve and what is quadratic curve. In QV curve, you need to provide two coordinates point and in quadratic curve, you need to provide only one coordinates point. This is the main difference between these two curve. Thanks for watching this video, see you on the next tutorial. 12. SVG Path Element Tutorial part 3: 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 path tag, and we learned line command, cubic bezier curve, and quadratic Bzier curve in our previous videos. So in this tutorial, we are going to cover arcommand. To create a arc, we need to use a command. With that, we need to use some multiple properties. Let's see the properties. Here you can see arc in our view box. It's look like a hub circle. To create an arc, you should have two points start point and endpoint, and we need to provide the Xss value and YXs value to define their position. Between start point and endpoint, we need to use A command. A means arc command. With arc command, we need to provide cess point and YXs point. This point going to define the radius of this arc means depth of the arc. If we move the radius point further to the center point, then it is going to create the more depth to the arc. So let's see the command. First, you need to take command, means moving point. Then you need to provide starting point Xccess value and YXS value and point excess value and YX value. Between these two point, we need to type the arc command. First, we need to provide the cess value and YXS value for the curve point, and then we need to provide the three different parameter. So let's try to understand the parameters. Here you can see with arc command three other parameters. Call the first parameter X excess rotation. It can rotate our circle from the X excess point. Basically, we don't use this point. Most of the time we use zero value, and we need to very careful with this point. Our next parameter is large arc flag. With that point, we can define the circle size. By default, it's come with zero means small arc and it's come with two value, one or zero. If I use one value, it's going to increase the arc size, and our last parameter is suit flag. By default, its property is one. And it also come with two values, zero or one. One means it will be built where we want to build. But if we use zero value, something like that, then it's going to create the arc in opposite direction. You don't need to change excess value or x value. Bhasically just you need to play with S flat parameter. It's going to create your arc in opposite direction if we play with this parameter. Let's see the practical and try to create the arc in our browser. Here you can see, I already created a Stal document, and I already created Dp which classes container. I take a VGTag inside this deep and I already set view box hundred by hundred. And we also create a temporary grit to understand the attributes. Let's draw a arc. As you can see, I already take a path element and I said red color for the path stroke, and for field color, I said none. As you know, first we need to use deeper t to draw a line. First, we need to provide the moving point and the end point. And we need to use AM to start the moving point. XX is ten and YXS is 50, space, and now I'm going to provide the endpoint. XXS is 90 and YXS is 50. It's going to create a line from this point to this point. If I set this file, here you can see the line. Now I'm going to create the arc between start point and endpoint. For this, we need to use A command. To create a perfect arc, we need to take middle point. Basically, I want to say I want to create a point in that position. You need to provide XXS 50 YXS 30. If I set this file using nothing in our grade, here we just provide one parameter, we need to provide other three parameters. First, we need to provide X rotation parameter, and I'm going to set it zero for large flag parameter, I'm going to take zero, and for swift flag, I'm going to take one. If I set this file, here you can see it creates a arc. We can change arc depth using YXS value. If I reduce this value, and I'm going to say ten and set this file, here you can see it reduced the arc depth. If I say, YX is zero and set this file, here you can see it simply draw a line. And if you want to increase the depth, we need to increase the YS value. If I set it 50 and set this file, here you can see the arc depth. Now we are going to learn what is large flag parameter. Here you can see our large flag value is zero. If I set it one and set this file, you can see that the arc has grown. Just you need to remember zero means smaller arc and one means larger arc. Thence come flag parameter. It has two value, one or zero. It can change direction of the arc. If I set it zero and set this file, you can see the arc in opposite direction. Also, I'm going to change this value to zero. If I set this file, now you can see, if you want to show the opposite direction arc, then just you need to change the sweet plug value. For now, I'm going to set it to one and I'm going to set this file. Now I want to create another line with this arc. I want to create a Pi shape using this arc. I want to create a point in this position. After this endpoint, I'm going to draw a line using command. So to type, and I'm going to use XXS 50 and yx is 80. If I set this file, here you can see it creates a line, and now I want to join the end line to the starting point. For this, I'm going to use Z command. As you know, Z means close path command. If I set this file, here you can see it close our path, and I want to fill this Y shape with green color. Som to type feel green. If I set this file, here you can see the Pi shape and now I'm going to play with these parameters. If I change the sweep flag parameter, zero and set this file, here you can see it creates shape like stealth bombar aircraft. If we change large flag value one and set this file, here you can see it inverts the Pi shape. It increases the arch size in opposite direction. If you change Sup flag value one and set this file, here you can see it has grown upwards. Here you can see using a command, you can create different type of shape, you need to play with their parameters. Now I'm going to play with this parameter, ces rotation. But before, I'm going to decrease the arc size. I'm going to set this parameter. I'm going to set this parameter zero. Now it's back to its normal position, and now I'm going to change XS rotation value. So first, I'm going to decrease the arc YX value 30, and then I'm going to increase the rotation parameter value 20. If I set this file, now you can see it rotate our arc 20 degree. If I change this value eight T and set this file, it's react very different. We always set rotation value zero. You can play and experiment with this parameter. I hope now it's clear for you what is arc command in Path tag. Thanks for watching this video, see you in the next tutory. 13. 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 write something in a SVG tag, you need to use text element. So let's see how it's work. Here you can see this is our viewpoint. And inside this viewpoart, I write a text lowdown Ipsum. To write this text, we need two attributes XXs and YXs and the text start from the exact joining position. It start 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 open my Visual Studio coitor and my browser using lip server extension, and I already created estimate document, and inside the estimate document, I create a Deep plus container, and inside the container, I draw asg image viewport hundred by 100. I also create a grit structure to understand the attributes. Now I'm going to create our text tag. I'm going to type text. So this is our textag inside the textag I'm going to write some text Lum three. If you use Visual Studio Ceditor, you are already familiar about this streak, and now I'm going to provide Xxs and YXs attribute. XX is equal to 30 and YX is equal to 50. If I set this file, here you can see the text. And if you notice, you can see the text start from YXs baseline and also XX baseline. Without YXs and xxx, we have another attribute named text anchor. I'm going to call this attribute, text anchor. Using this attribute, we can center our text horizontally. If you want to align your text, then it's play the vital role. We have three types of Belo in this text anchor attribute. Start, middle, and end. Let me show you. If I type middle, and set this file, here you can see, it's media text according to this point because our Xs is 30. To understand it better, I'm going to remove this text. If I set this file, now you can see it align takes according to value X 30. So it's align takes according to this point. If I use end alignment, I'm going to type, and set this file, now you can see it do takes from the starting point, mean X 30 and Y 50. If I use default value we just start, and set this file. As you can see, it start from the default value. If you want to color your text, you can use fill property. Let me show you. Fill equal to rate. If I set this file, you can see the text color is rate and now I'm going to use CSS property with the text tag. I want to give a class to this tag, class equal to text. I'm going to call this class inside the style tag, dot, inside the Cariss and now I want to give a stroke to the takes. I'm going to use stroke property. Blue. A stroke is blue. If I set this file, you can see the blue stroke. Not only that, we can use this field property inside this style section. I want to cut this property, and I'm going to use hair. If I set the file, you can see the same result. If you want to make the field color transparent, just type none here. And set the file. Now you can see on the stroke in the text and its field color is transparent. For now, I'm going to use black field color, and I don't want any stroke, so I'm going to type none. Now I'm going to use other CSS property related text. Like font size, let me show you. Font size is ten pixel. If I set this file, you can see the font size. It's scaled down our text size. If you want to use different font family, yes, we can. Let me show you. And I'm going to use Impact font family. Im EAC t. If I set this file, 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. Add one Mine. Now you can see we have to two words, ad one and Minh now I want to break this line. I want to Mine word below than add one. For these, we cannot use break tag like CSS. We need to use a different tag named T span. Let me show you. I'm going to type after add one Tspan I'm going to move this Minh word inside this tag. If I set this file, you can see there is no different. Now I want to align this Minh. For this, we have to two properties, DX and DY. So first, I'm going to use DY tag. DY tag work in vertically. We can vertically align the text using DY tag. As you can see, our Y value is 50, so I'm going to type 30 here. Now you can guess the Minjuor could be moving upward from the baseline, something here, but it's not going to work like that. If I set this file, you can see, it's moved downward. It's not going to count this value from the viewport area. It's going to count the value from the baseline of the text. Min 50 pixel. So let's move 30 pixel from the baseline, ten, 20, and 30. I'm going to replace the value with ten pixel. If I set this file, now you can see the result. The DI attribute work relatively from the baseline position, and in a similar way, Dx value work. Let me show you. Dx equal to 20. If I set this file, you can see the result. It move 20 pixel right from its place because its exact position is here. From this point, it moved 20 pixel right. If you want to align this word according to this word, you need to use minus value. Let me show you. If I use -25, and set the file, you can see the alignment. Now it's perfectly medal align. If you want to control subtext alignment, you need to use DY and Dx attribute with the pentag, not only that, you can set class here. I'm going to set it class. Class Minh. Now I'm going to call this class inside this style tag, Minh. Inside the Cali resist, first, I'm going to change the fill color. Blue. If I set this file, you can see the color. We can use different CSS properties for the subtext tag. We cannot use VA tag to divide this line. And if you want to use absolute position for this text, yes, you can. Let me show you. Just on to remove D. As I'm going to change the X v. If I set this file, you can see the text. Yx is ten, according to the absolute position, means Ve Vox position. X is 25. If I increase the YXS value, 30 and then set the file. Now it's clear for you, how it works. If I use simply SS and YSS attribute with T span, then it's work like CSS absolute position. If you want to use DI and DX value, then it work like CSS relative position. We can use multiple CSS property with that like later space, font to it, et cetera. Now it's clear for you what is DTC in SVG and how we can use it. Thanks for watching this video. 14. 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 SDM to insert an image. Similarly, we use image tag in SVG to insert an image. Let's see what attribute we need to show an image inside the SVG tag. Suppose this is our viewpoint, and I want to show this tiger image inside this viewpoint. First we need XS point and then we need YXsPoint then we need image width and image height. If we do not provide XX Zulu and YX Zu by default, it start with zero point. Similarly, if we do not provide height and width, by default, it stack zero. Then we cannot see the image. Heighten width property is very important in SDG image. Let's start the practical and see how it works. Here, you can see, side by side, I open my visual studio codtor and my browser using if server extension, and I already create a estimL document. Inside the estimL document, I create a deep plus container, and inside this deep, I take a wig tag with 100 by hundred view box. To understand the attributes, I create a grid structure. First, I'm going to take image tag. Then inside the image tag, and now I'm going to use hide and width property for this image. With equal to 100 height equal to 100 and now we need to provide the image bath. For this, we have a special attribute Xink HRDF. Let me show you. First, we need to type small X link, then colon HRDF equal to inside the double codes, we need to provide the path as like DML image tag. Here you can see in my current working directory, image dot JPG. I'm going to use this image. So to type image. Dot JPG. If I set this file, here you can see the image inside my viewbox. I set this image according to view boox heightened width. If I reduce the width, something 70 and set this file, you can see the result. It takes 70 pixel width. If you notice, you can see, according to its size, it's also change our height. I'm going to use 30 pixel width. Set this file. Now you can see it scale down our image. If you want to change the image position using XXs and YXs, yes, you can. Let me show you. I'm going to use XX propriety, X equal to 30. If I set this file, here you can see the image start from X 30 pixels. This image position is worked relatively, not absolutely. Let me show you. If I use YXs YX is equal to ten and set this file, here you can see, it's relatively moved ten pixel in YXS W this image tag, we can use butt tag, circle, rectangle, et cetera. Let me show you. Now I want to draw a line over the image from this point to this point. For this, I'm going to use a butt tag. I'm going to use draw attribute, D, D equal two inside the double codes, ten, ten pixel, comma, 60 pixel. It's mean this point, I want to draw a line from this point to this point, our end X point value is 90 pixel and our i point value is 60 pixel, and we also need to provide a stroke color to this path. Otherwise, we cannot see the path. I'm going to use stroke property. Stroke equal to red. If I set this side, you can see the line is overlap the image. 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 BG. Thanks for watching this video. 15. 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. Here you can see, overall, we have total seven properties, stroke, stroke width, stroke opacity, stroke line gap, stroke line join, stroke dash array, and stroke dash opposite. So in this tutorial, we are going to learn these seven properties. So let's start the practical and try to understand how it works. So finally, I'm back to my computer screen. Here you can see side by side, I open my visual studio Creator and my browser using if server extension, and I already created TML document. And inside my SVG tag, I already created a rectangular shape without stroke. As you can see, its field color is green. So let's start the using properties. Our first property is stroke. So I'm going to use this property. Stroke and our stroke color is red. If I set this file, here you can see a red stroke. Using color name, we can assign a stroke color. Not only that, we can use hexa Valu RGVvalu let me show you. Now I'm going to open a new tab and I'm going to search color xa Valu. Here you can see a website, TL color course. I'm going to click on this website and here you can see a lot of colors. If I click on this chart section, here you can see a lot of colors with their xa Valu and I'm going to use something like this color orange. If I click on this color, it's redirect to a page, and here you can see the hexa value. If I copy this value and use it here and if I set this file and show you my estimal page, here you can see orange stroke color. In a similar way, we can use RGV value for our stroke property. Let me show you. If I back to my estimable color page, here you can see some colors. I'm going to use this blue color variant for my stroke. I'm going to copy this value, and I'm going to tie R GB. Then I'm going to replace this value. And if I save this file and show you my browser, now you can see the blue stroke. 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 want to say we can use three types of values, RGV, hexa code, and color name. And now I'm going to show you our next property, which is stroke weed. I'm going to type stroke We. Using this property, we can control thickness of this stroke. Here, I'm going to type three. If I set 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 set this file, now you can see the stroke thickness. Now it's look very thin. For now, I'm going to use two value. And next our third property is stroke opacity. Sum type, stroke opacity. With this property, we can control the transparency of our stroke. If I use zero value and set this file, now it's completely transparent. If I use one value, now it's completely visible. 0-1, we can use any dh value. Let me show you sound root 0.5. If I set this file, now you can see it's semi transparent. Now you can see the background green colored through the stroke because it's 50% transparent. For now, I'm going to use one value. Now our next property is stroke line gap. For this example, we need to create a line. Let's create a line using line tag. Line. I'm going to give a class to this line, class line. We already learned in our previous videos how we can draw a line. We need to use X one value. First, we need to provide the X one value X one equal to 20 and Y one, equal to 20. I'm going to start this line from this point, and now we need to provide the finishing point of this line. I'm going to type X two equal to 80 and Y two equal to 20. Now I'm going to use this line class. I'm going to copy this class name and I'm going to call it here dot line. Inside the calibraces, our first property is true. And our stroke color is red. If I set this soil, you can see the line. Now I want to increase the stroke thickness, so I'm going to use stroke weight property. I'm going to use two for this stroke. Now you can see this stroke thickness. Now I'm going to use our next property, which is stroke line cap, some type, stroke, line cap. Basically, stroke line cap have three value, but square and round, but is the default value of the stroke. If I set this file, here you can see there is no changes. But if I use square value and set this file, now you can see it's changed the stroke with a little bit. Basically, it's increased the line width. Let me explain to you what happening here. Here you can see a stroke line using butt 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 squared property, here you can see two pixel above and two pixel down. With that, it add two pixel both of the side. It's overall increase the line with four pixel, two pixel in lit side and two pixel in right side. But if I use but property, it do not add stroke both of the side. This is the basic difference between butt and square property, and our last property is round. If I use this property and save this file, now you can see the stroke corner, it's rounded. 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. Let's use the property. So to type, stroke, Line join. Basically, we have total three value for this property. Mire round or Bible. First, I'm going to use mitre. If I set this file, here you can see there is no changes because it's the default value. But if I use round value and set this file, and now you can see the round effect in every corners our third value is Bb. Let me show you. If I set this file, now you can see there is a small cut in their corners. If I use this Zell, it's going to cut the join edges. We can use this property only in joins, not the line edges. Now I'm going to use our six property, which is strobe array. So to type strobe array. If you remember this SS boers style like dotted, dst, et cetera. Similarly, stroke desk array property work. We can create the desk effect, use this property. Let me show you. Suppose I create a two pixel dst and then we need to provide the gap size and our gap size is suppose three pixel. If I set this file, now you can see the des throw. Suppose all the dots are two pixel and all the gaps are three pixel. And now I want to increase the gap size. I want to increase this value seven. If I set this file, now you can see the distance between these pixels. I also want to increase the pixel size, five pixel. If I set this file, now you can see the das size. Suppose now you want two pixel dak size and two pixel gap size. For these, we can write this value in this way, type two. If I set this file, now you can see the pixel size is two, also the gap size is two. Similarly, if I use one pixel and set this file, now the pixel size is one, also gap size is one. Not only that, we can use decimal value for this d array. Let me show you. I'm going to use 0.6. If I set this file, now you can see the desk size. Let's make it little advance. For now, our des size is five and our gap size is two. Once again, our desk size is three. If I set this file, now you can see this stroke then I give another space two. If I set this file, now you can see it look pretty advanced. Here you can see our first desk size is five and our space size is two, then our second desize is three and space size is two. Now it's clear for you, how we can use this property to create different stroke effect. Thence come our last property, which is stroke dash ose. So to type, stro dash Oset. Stroke dash oste means you can move the dash points a little bit to the left side. Otherwise, right side. Let me show you. Just focus of the corner of this rectangle. I'm going to use one property. If I set this file, now you can see the corners. It's move little bit. And now I want to move this dash three pixel. If I set this file, now you can see, dash and moves, three pixel lift. So these are our seven stroke properties. Our first property is stroke. We can set any color using this property, and our second property is width. 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 line join property, we can control the join effects. We can use round effect, we can use up cut effect, et cetera. And using stroke dash array property, we can create dash in our stroke, and using dash upset property, we can move the dash. And our last property is stroke line gap. We can use this line cap property basically in lines, not in the shapes. Now it's clear for you, what are these stroke properties? Thanks for watching this video. Stay tuned for our next tutorium. 16. SVG Fill Properties Tutorial: Hello, guys. Good to see you back. In this tutorial, we are going to learn about field properties. Let's see the properties. We have total three property related field, fill, filoposity and field rule. Let's try to explore it practically how it's worked. Here you can see, side by side, I open my Visual Studio coor and my browser using Live Server extension. As you can see, I already create a TML document, index dot TML. Inside the estimL document, I create a D plus container. Inside this container, I create a Wigtag with hundred by hundred view box. Inside this igag I create a grid to understand the attributes. Then I create a polygon shape. Here you can see the shape. It looked like a sir and I also give this polygon shape a class, which is shape, and here you can see using this class, we style this shape, stroke, red color, fill nun. If I do not use any field color, if I remove this non keyword and set this file, here you can see it fill our shape color with black. This is our first property, which is fill. Here we can use any type of value, RGV value, hexa value, otherwise colored name. For now, I'm going to use a color name, which is green. If I set this file, here you can see, it's fill our shape with green color, and now I'm going to use RGV Value and I'm going to use yellow color. If I set this file, here you can see it fill the shape with yellow color. Here we provide RGV value. In a similar way, hexav work. Let me show you. Now I'm going to use hexavalu. So first, we need to use has, and I want to fill the start color with blue, Sumo type, 0000 FF. If I set this file, here you can see the chef fill with blue color. Let's talk about our next property, which is fill opacity, SummotypeFll, opacity. We can control the transparency using this property. If I set zero and set this file, here you canc is completely transparent. And if I set one and then set the file, here you can see, now it's completely visible. 1-0, we need to use decimal points to control the transparency. Let me show you. If I use 0.5 and set this file, now it's semi transparent. If you want to reduce this transparent more, than just type 0.2 and set the file. Now it's less transparent than previous one. Similarly, if you want to increase the transparency, just type 0.9 and set the file. You can control as much you want and our last and third property is fill rule. Let me show you. This property work only on complex design. I want to say when shapes overlapping each other they work. I draw this complex star shape using single polygon element. Here you can see total five spike. But between all the spike, here you can see a different shape. We can control this shape color. We can transparent it. Let me show you. This filual property comes with two value, non zero. So first I'm going to use this value, non zero. If I set this file, here you can see there is no changes because it is the default value of field rule, but there is another value, which is even odd. Let me show you. If I set this file, now you can see it transparent our medial shape, but did not remove all the shape colors. This is a use case of field rule propriety. I hope now it's clear for you. Thanks for watching this video. Stay tuned for our next tutorial. 17. 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 try to understand what is it. Here you can see, I already create an STML document. And here you can see a D class container. And inside the container, I create a SVG tag, and inside the VGTag I already create two rectangle shape. Our first rectangle color is green, and our second rectangle color is the Uulu. As you can see, it's overlap each other. And now I want to rotate both of the rectangles. For these, I'm going to assign a class. For our first rectangle, our class name is green, and for our second rectangle, our class name is yellow. In our style selection, I'm going to create the selector. I'm going to create the selector, dot green. First, I want to rotate the green rectangle. For this, I'm going to use transform property. Transform and here I'm going to use rotate value, and I want to rotate this rectangle 20 degree. If I set this file, here you can see it's rotate the green rectangle. Similarly to rotate this yellow rectangle, we need to create another selector, dot yollow. Also I'm going to use this transform property. Rotate 20 degree. If I set this file, now you can see the result. But the problem is we need to do extra job for this. First, we need to rotate green rectangle, and then we need to rotate yellow rectangle. But to resolve this problem, we can use grouping 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 tag, G. Inside this G tag, I'm going to paste these rectangles. That's it. Also, I'm going to take a class for this group, which is group. So now it's create a group. I don't need to type different CSS for that. I'm going to remove one CSS, and I'm going to replace this selected name with group. If I set this file, here you can see, there is no different. If I change the rotation degree, 30 degree and set the file, here you can see, it's move to react element together. Now I'm going to use another property which is transform ausin Transform asin sent. If I set this file, now you can see, it's rotate 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, ate. If I set this file, now you can see red stroke, both of the t element. If I use group class, it's going to effect every element inside the group. 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. 18. SVG Defs, Symbol & Use Elements: Hello, guys. Good to see you back. In this course, we are going to learn SVG Dips symbol use elements. Without wasting your time, let's start the practical. Here you can see, side by side, I open my visual studio cod eator and my browser using life server extension, and I open a SDML document which I create 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 code. 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 Dnm is shapes. Then after G tag, I'm going to call Utag. Let me show you. Inside the Stag, our first attribute is link, 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 book. As you can see, we use a ID, so you need to provide has tag. Now we need to pass two attributes, X attribute and Y attribute. Using this attribute, we can define new position to these shapes. Let me show you. X equal to 30, Y equal to 20. If I set this file, here you can see it's create another shave exact similar to this shape, and we can place this shave anywhere in this view box. Similarly, if I want to create another shape, I'm going to duplicate this line and I'm going to change the coordinates -30 -20. If I set this file, here you can see it's create another shape in opposite direction. Remember, this coordinates our work relatively to this group tag. If you want to style two shaves differently, it's not possible with G tag. For this, we need to use another tag, which is deep tag. First, we need to move this G tag inside the deep tag. Let me show you. I'm going to tie deep here. I'm going to move this G tag inside the deep tag. And you don't need to change anything inside this G tag. It's remains same. But if I save this file, some strange thing going to happen. Let me show you. Here you can see our exact group of shape is vanished. Now we cannot use this shape directly. For this, we need to use us tag, and now we can style these 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 use tag. Class A, Class B. Now I'm going to create this selector inside this style section A, inside this cols, I'm going to use a property named stroke dash array. Here I'm going to pass too. If I set this file, you can see the difference between two shapes. One shape come with solid border and another shape come with dash border. Similarly, if I want to change stroke color, yes, we can. Stroke Blue. But before I set this file, we need to remove stroke from the origin shape means group shape. If I set this file, now you can see Blue stroke in class A object shapes. In the same way, you can style class B shapes. Let me show you. I duplicate this file and I'm going to change the class name B. For B class, I'm going to use red stroke. I'm going to change stroke a gap. Five. If I set this file, here you can see the difference between two shapes. Let's jump into our last tag, which is symbol. We can use the symbol tag like group tag. Let me show you. I'm going to replace this group tag with symbol. There is a difference between group tag and symbol tag. Basically, symbol can create a different viewbox. Let me show you. I'm going to duplicate this symbol and also I'm going to change the ID shape two. If I set this file, here can see whatever style we apply in our group class, now these are all unappliable. Now I'm going to change the view boox. Let me show you. I'm going to use view booxPperty. Equal to inside the double codes, zero, zero, 50, 50. Basically, it's going to scale our shape. If I set this file, her you can see the difference. This is the basic difference between symbol and group. We can change viewx if we use symbol tank. If you notice, here you can see I did some little mistake. We do not use ID shape two in this section. I'm going to call this ID shape two. If I use this file, now you can see this viewox property only work on ID shapes, not to the shapes two. Let's change the viewbox once again 150 by 150. If I set this file, now you can see the result. It scaled down our symbol object. We can change the viewbox differently. Let me show you. I copy the viewbox property and paste it here, and here I'm going to change 50, 50. If I set this file, now you can see the difference between view boox. And if you want to zoom out this view boox, just increase the value of this view boox 200 by 200. If I set this file, here you can see the object view boox. I hope now it's clear for you, thanks for watching this video. Stay tuned for our next tutorial. 19. SVG TextPath Element Tutorial: Hello, guys. Good to see you back. In this tutorial, we are going to learn about text path element. If you remember, we learn text element and path element in our previous tutorials. And if you want to create any object using text and PAT, and then we need to use a new tag, which is text path. So without wasting your time, let's start the practical. Here you can see side by side, I open my visual studio coritor and my browser using lip server extension, and I already create a TML document. And inside this TML document, I create a bg tag. And inside this SVG tag, I set a view box hundred by hundred. 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 C, then inside the double codes, we need to provide the command. Next, we need to provide Xxs and YXs which is 20 YX is 50. This is our starting point. Also, I'm going to take endpoint for this path. Let me show you. Our endpoint is 90 50. Also I'm going to use stroke propriety. Stroke equal to rate. If I set this file, here you can see a line, and now I'm going to give arc to this stroke. For this, we need to use a command. A, and then I'm going to provide the coordinates 30 and also YXs is 30, and then we need to provide X rotation value. For now, I'm going to set it zero. Also, our large arc value is zero, and then we need to provide suit flag value, which is one. I already told you in our previous videos how we can create arc using these attributes. If I set this file, here you can see arc. For now, I don't want any color, so I'm going to say feel color nun, feel equal to none. Finally, we create the arc shape, and now I'm going to use Text tag, let me show you. Inside this Text tag, we need to use another special tag, which is text Bath. Let me show you. Inside this text Bath, I'm going to type a name, add one Minch. If I set this file, you can see nothing in our view box. Because we do not attach this text with this path. First, we need to give a ID to this path, ID equal to arc ARC. Now we can use this ID and now we can assign this ID in our text path. Let me show you for the pontruse xlink HRDF X link colon HREF equal inside the double codes, and inside the double codes, we need to provide the path ID, hastag ARC. If I set this file, here you can see the text, add one MgOur text move according to this curve. Not only that, we can use CSS property with this text. For this, we need to use class equal to text. Now I'm going to create the selector of this text, dot text. Inside the arises, first, I want to change the font size. Font size 12 pixel. If I set this file, here you can see the result. Reduce the text size. And if you do not want to show this path, you want to show only this text. In that case, you need to use dip tag. Let me show you dips. If I move this path and if I move this path inside this dips tag and set this file, now you cannot see the stroke, you can see all it takes, if you want to change the arc position in opposite direction, just you need to change Swift plug value one, two, zero, and then set the five. Now you can see we move this arc in opposite direction. For now, I'm going to use one Vale. And set the file. If you play with X coordinates or Y coordinates with R, let me show you. I'm going to use 40. If I set this file, now you can see different curve, and we already learned about it in our previous videos. If we change this shape, according to shape, our text going to change this position. So if you want to link this path with this text path, you need ID, and then you need to use Ling HID attribute to link this path with text. I hope now text Bath element is clear for you. Thanks for watching this video, stay tuned for our next tutorial. 20. 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 type of gradients we have. Here you can see we have two type of gradients in SVG, linear gradient and radial gradient. As you can see, linear gradient is directional, maybe it going lap to right, top to bottom, or maybe diagonal, but our radial gradient come with circular from. Let's start the practical and in this tutorial, we are going to learn linear gradient. Here you can see side by side, I open my Visual Studio codeor and my browser using lip server extension. I already create a HTML document, index dot HTML, and I already use wisitag view Wox hundred hundred and here you can see a grid structure. It is very helpful to understand the coordinates. First, I'm going to create a rectangle shape. I'm going to use Rec tag. For starting point, we need to provide XXs and YXs X equal to ten and YXs equal to 30, then we need to take within height. W 80 and height equal to 60. If I set this file, here you can see a rectangle shape and now I'm going to give a stroke to this rectangle. I'm going to type stroke, equal to rate. Now you can see this stroke in our rectangle. For now, I don't want any color, so I'm going to type feel equal to none. Now I want to fill this rectangle with gradient color. It's mean more than a one color. For this, we need to use definition tag means depth tags. Inside this depth tag, I'm going to use a new tag, which is linear gradient. Let me show you. Also, I'm going to take a ID for this tag, ID equal to inside the double codes, L, under scoe G, means linear gradient. Inside this linear gradient tag, I'm going to use another tag which is stop. You need to close this tag in that way. Inside this tag, we declare our color. But first, we need to take attribute named opposite. Here we declare from where our color going to start and I want to start the gradient color from 0%. For color, we need to use another property which is stop colored. I'm going to use green color. Then I'm going to duplicate this line, and I'm going to change the opposite 100%. Also I'm going to change the color blue. Its main, it start from zero position and end to hundred position. In our zero position, it start with green color. But in 100 position, it end with blue color. Now I want to see the gradient effect in our rectangle. But first, I'm going to assign a class to this rect elements shape. Now I'm going to create a selector in our style section dot shape. Inside the carlirass I'm going to use a property named film. And then we need to use URL function. And here we need to provide the gradient effect ID, which is underscoG. I want to copy this ID, hastag undercoG also need to remove field property from this place. If I set this file, here you can see a gradient. Here you can see it starting with green color and end with blue color. If I play with Offsite value, let me show you 80% and set this file. Here you can see 80% area filled with blue color. So in that way, it's w. For now, I'm going to use 100 person. Next, we have another property which is stop opacity. Let me show you. If I use this property, using this property, you can provide transparency in this color. If I use zero value and then set the file, here you can see is completely transparent. If I use one value, here you can see full color. We can use value 0-1. I'm going to use 0.6. If I set this file, here you can see, now it's semi transparent. Now blue color is 60% transparent. But for now, I'm going to use one value. Now you 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 Xx Zu and YXSVuhe. Here we need to use two type of xs and YXs X one, Y one, X two, Y two. Let me show you X one equal to, but don't need double codes. I'm going to pass zero person for Y one, also I'm going to use zero person. And for N coordinates, X to value is 100% and Y two value is 0%. If I set this file, here we can see there is no changes because I create same direction of this gradient color, and now I'm going to change X to value, zero and Y to value 100. If I set this file, here you can see it changed the direction. Now it's going top to bottom. And if you want to blue color in top for that, we need to change the values, zero person and Y one is 100%. If I set this file, now you can see blue color come first and then green color. If you want to show the color diagonally, for this, we need to change the value. Y one is zero, Y two, 100%, X two, 100%, Y two, also 100%. If I say this file, now you can see our gradient colors work diagonally. In lip and top corner, you can see green color and you can see right bottom corner, blue color. Now it's clear for you how we can create linear gradient color. For this, first, you need to create the effect. And then you need to assign a ID to this effect. You can use this ID in field property value. You can apply this gradient in any type of shapes. Not only that, we can use multiple color in this gradient. I want to duplicate this line. Now I want to use orange color. And I want to feel this color in 50% position. If I set this file, here you can see the effect. Here you can see it start with green, then come orange, and then come blue color. You can use any color in any percentage. If you want to say opacity in this color, you can use stop opacity propriety. This is it for this tutorial. In the next tutorial, we are going to learn radial gradient. Thanks for watching this video. 21. SVG radial Gradients: Hello, guys. Good to see you back. In this tutorial, we are going to learn about radial gradient. In our prefers tutorial, we already learn linear gradient. Let's jump into the Visual Studio code and start the practical. As you can see, side by side, I open my Visual Studio code editor and my browser using live server extension, and I already created a SML document, name part two dot is TML. And as you can see, here we already create rectangle shape. Now I want to apply gradient color in this shape using its ID name. I want to fill this react shape with radial gradient color. For that, as you know, we need to fill it with ID name, RG. For that, I already fill this react shape with this ID, RG Rg stands for radial gradient, and then I'm going to create the radial gradient inside the deep tag. Let me show you how. Inside this deep tag, I'm going to type radial gradient. I think I did some spelling mistake DI ENT. Now in this radial gradient, we need to assign this ID, the field ID, RG radial gradient. Hemo type ID equal to radial gradient RG. Now inside this radial gradient, I'm going to assign the first color. Here, I'm going to use stop tag. Then we need to mention the opposite position. I'm going to use Opsete attribute. Opposite at Is the double quotes, 0% at 0% position, I want to apply stop color. Stop color. Stop color equal to, and I want to apply green color. Then I'm going to duplicate this line. At 100% position, I want to apply red color. If I set this file, you can see the result. Now, in set this react tag, you can see we have radial gradient color. It's start with green color and end with red color, and our green colors start from the center. Let's set another color at 50% position. I'm going to duplicate this line, and at 50% position, I want to apply blue colour. If I set this file, you can see the result. So this is how you can add as much colored you want. And if you want to change the gradient position, yes, you can. I don't want to paste this gradient center. I want to move it at that position. To move the gradient center point, we need to use Cx and Cy attributes. So Hemotype ch equal to 30%. And then I'm going to provide CY position. CY equal to 40%. If I set this file, you can see the result. We successfully move the gradient position. We can place the gradient center point anywhere in our react tag. And if you start your gradient from the exact laptop corner, just pass 0% XX value and 0% YXs value, and then set this file, you can see the result. Not only that, also you can control gradient radius. So first, I'm going to move it at 50% position, YXS and 50% position XXs. Then I'm going to use another attribute called R, R stands for radius R equal to, I want to make gradient radius 20%. Basically, I'm going to reduce the area of gradient. Uppst this file, you can see the result. If you want to extend your gradient radius for that, just you need to pass more than 50% value, suppose I'm going to pass 90%. After I set this file, you can see the result. For now, I'm going to use 20%. As I'm going to change gradient starting color. I want to replace green with white. After stifle, you can see the result. Now let's play with focus point value. I want to change the focus of this radial gradient. For that, we need to use a attribute called H A X because I want to change the focus from x deduction, equal to and I want to apply 10%. Up to set this pile, you can see the result. This is what it creates a change the focus 10% at excess direction. Still, it is a radial gradient, but we just change the focus point. Now it look like flashlight beam, and to create different gradient effect, you need to play with these values. Suppose I'm going to make radius 40%. Also, I'm going to change the ex value, and I'm going to set it 20%. If I set this file, you can see the result and similar to Fx position, also we have FY position. I'm going to tie FY attribute equal to, and I'm going to make it 40%. After set this file, you can see it move over focus point upward. Now, let's talk about the last attribute rotated radial gradient, which is spread method. For that, I'm going to duplgate this line and cont out previous line. At first, I'm going to remove AX and AY attribute. Then also, I'm going to remove the radius value. Then I'm going to set this file again. Then I'm going to call this attribute sprayed method. Hemotide spray. This attribute come with total C value, pad, reflect, and repeat. If I use pad, it is a default value, Sonu type pad. After I use this value, if I set this file, as you can see, there is no changes, and then I'm going to use the next value called repeat. If I set this file, you can see the result. If I reduce the gradient radius, let me show you R equal to 20% and this set this file, now it's more clear for you how its work. Now it fill the container with repeatable gradient colors. Here you can notice the layer of repeated gradient. Now let's apply the last V of spread method, which is flat. I'm going to replace repeat with flat. Urate this file, this is what it creates. Now it's create reflecting gradient pattern all over the rectangle box. I would like to suggest you try this different combination and create different gradient effect. If you play with this value every time, it's going to return a different result. This is it for this tutorial. Thanks for watching this video. Stay tuned for the next tutorial. 22. Adobe illustrator to svg: Hello, guys. Good to see you. In this tutorial, we are going to learn, how can we draw any complex shape without using ASV. For these, we need to use any vectorgraphic application. Like Adobe illustrator, oral draw, otherwise, you can use any other vectographic application. And in this tutorial, we are going to use Ado V Illustrator. Using Adobe Illustrator, we can create complex geometrical shapes, and then we can convert this shape into aSVG docomin. So let's jump into the Adobe Illustrator software. Finally, I open Adobe Illustrator application. Then we need to create a new file. To create a new file, you need to go File Mino and click on New. Then you can see a lot of option. We are going to create file for web development purpose, so we're going to select web. Then here you can see lot of resolution. These are all web page resolutions, but I'm going to create my own resolution. I'm going to create 200 by 200. This is our Vwvox area. If I Tacon, create option, as you can see, it creates a Vevox area by 200 by 200 pixel. This is our view boox area. In this view boox we can draw any kind of shape. To draw a shape, at first, I'm going to select this tool. It is pin tool. Using this pain tool, we can create stroke line. Let me show you. Suppose at that position, I want to create our first point. This is our starting point and at that position, I'm going to create another point. This is our end point. As you can see, it creates straight line. In that case, our pain tool work as a line tag. And remember, this is our excess direction, and this is YXs direction. Also, using Pentool, we can create cubic bezier line. Let me show you. So our cubic sier line starting point is this point and our cubic busier end point is that point. At that point, if I click on it and drag my mouse, as you can see, it creates a bezier line. This is Cubic Bzial line. Now, according to these view boards, our first tag is line tag and our second tag is put tag. As you know, using Put tag, we can create any complex shape. Let me show you. Now I'm going to draw complex shape. We're going to start at that position. Then I create some points and covert this point and join this point. Now you can see here we create a complex geometric shape. Now I want to fill this complex shape with a color. For that, first we need to select the arrow option, then we need to select this geometric shape. After that, from here, we can select any color. Suppose I want to fill with green color. As you can see, now our complex shape fill with green color. If you want to change the stroke color of this complex shape, yes, you can. Just select the complex shape. Then you need to go option. This time, you need to select the stroke option. Now you can see our stroke is selected and I want to assign to the stroke red color. After select the color, you can see the result. In VG, we can draw this shape using Path tool, otherwise, polygon tool. We already know that. And now I'm going to show you how you can create a rectangle shape. For that, you need to select this option, this tool, rectangle. Then you need to select the starting position and pick on it and drag your mouse. After drag your mouse, as you can see, it creates a rectangle shape with green field color. Again, I want to change the field color. For that, first, you need to select the field option, then I'm going to fill with blue color. This is how we can create rectangle shape, otherwise square shape. If you want to create a ellip shape, for that, you need to select the EllipeTol. Using Elliptol first, you need to select the starting point, then you can drag your mouse and create Ellipshape. And for this Ellipshape, I'm going to use yellow field color. Now, I would like to convert this image, convert this Adovillustrator image into a igigraphics. For that, you need to select the file option. Then you need to select Save as. Upper savers option, first, you need to provide in which folder you want to save your file. This is the folder, I want to save my file, and then you need to select in which format you want to save the file. Here you can see option, save as type. From here, you can save it as Illustrator file as PDF file. As you can save it as svg file. I'm going to use this option, VG. Then I'm going to use the Rd board, use R boot area. If we do not use the Abood area, then you're going to take gray area as artboard. I'm going to use only Rd board. Then I'm going to click the Save option. After select Save option, here you can see a lot of option. You don't need to change anything, you need to select more option, and from the more option settings, you need to go Advance option. And here you can see an important option called CSS properties. And if I open this dropdown menu, here you can see presentation attribute, style attribute, and style elements. For now, I would like to save this file using style elements. And then I'm going to press Fok. And and if I show you my current working directory, as you can see in my current working directory, there is a Igifle called Untitle 01, and now I'm going to set the same file in different Sass property. Let me show you. Again, I'm going to click on File Menu, then I'm going to praise Sabas, and I'm going to select the Atwood area, and I'm going to rename the file Image two. Image two. Then I select Sab option. But this time, I'm not going to select style element. This time I'm going to use style attributes, and I'm going to set this file. And now if I show you my current working directory, as you can see now you have to talk to AWG image. For my first image, here I use style elements properties. And for the second image, I use style attributes. And now I'm going to open War of my image using my browser. So here I'm going to open Chrome browser and inside this Chrome browser, I'm going to open this image. As you can see, you can see the exact image, what I create in my Atov listed softare and you can see the extension. It's an AWG image. And now I'm going to show you the source code and you can understand what is the difference between these two image. Both the image going to return the same result. There is no changes, but if I open both the image in my code editor, let me show you first, I'm going to open and title dot one is WiGi then I'm going to open image two dot one is Vigi. As you know, for wig two image, Image two, we use style attributes. In this image, as you can see, first it use VBox stag, as I told you, we create a view boox 200 by 200. Then we create a line tag. Then we create a put tag and using put tag, we create a curved line. Then we use a polygon tag to create the complex geometric shape, and then we use a react tag. At last we use circle tag. Remember, when we set this file, we use style attribute. That's why it use inland styling method. But if I show you my first image, where I use style element, as you can see, it used the same tag, but it do not use inland styling method. It use line element, butt tag, polygon tag, react tag, circle tag. All the tags are same, but for styling, it use style elements. It used class name to style the elements, and it do not follow the Inland styling method. That's the difference between two file, but both the file going to return the same result. Remember, if we use similar fill color and similar stroke color, in that case, it's going to use the same class name. It's going to assign same class name both the element. But if we change one of the property, otherwise fill color, otherwise stroke color, then it's going to use different class name. In that case, as you can see, it's at one. And all the attributes and points you can notice in these tags, you are already familiar with that. You already know X one point X Y one point, X two point and a y two point. This is our starting point and this is the end point. You are familiar with points, height width, radius, circle Y and circle X, et cetera. I'm not going to explain it here. This is up to you what kind of format you are going to choose CSS attribute, otherwise, CSS element. But personally, I will recommend use CSS element because it is more organized and very easy to eat it. So in this tutorial, physically, I try to teach you how we can convert ctrographic shape into an SVG image. Otherwise, Adobe Illustrator software is a huge topic. We cannot cover this topic in one video. If you remember this gris structure which I used in every tutorial to calculate the points, I create this grid structure using AdoVillustrator, and I just extract the SVG code and use it. So this is the simple introduction of adv Illustrator sofa, and there are other software and online tool. That can convert victor graphic into a SVG image. Here you can create complex images using Ado Illustrator Softa and you can convert it into an SVG image. In our upcoming tutorial, we are going to create a complex image using AdoVillstrator software. So this is it for this tutorial. Thanks for watching this video. Stay tuned for the next tutorial. 23. Svg ClipPath animation: Hello, guys. Good to see you back. In this tutorial, we are going to learn what is Kipput tag in SVG. Let's try to understand what is Kipp tag. I back to my Adobe Illustrator Softare. Here you can see two shapes. As you can see, our first chef is heart shape and our second chef is circle shape. If I overlap the shape and select both the shape, and then I press right here you can see option, make clipping mask. If I press, here you can see it cut the overlapping area according to the heart shape. Now the circle shape is visible only inside the heart shape. If I move the circle shape inside the heart shape, here you can see different results. We can move the circle shape inside the heart shape, something like that. Not only that, we can scale down it and animate it. Similarly, we have Kept tag in VIG. Before I start the practical, let me show you one thing. Here you can see a hard shape inside the view boox and I already extract the Wig code from this image. As you know, we need to use Put tag to create this shape. Let's jump into the visual studio code editor and try to understand how it's work. Here you can see side by side, I open my Visual Studio code editor and my browser using light server extension and I already create a STML document. This is our hardship which is created by this butt tag, and I already assign ID to this butt tag, which is hard. First, I'm going to create a circle before the butt tag. I'm going to tie circle. As you know, to create a circle, we need to use three attributes. Our first attribute is Cx, CX equal to 40. Our next attribute is CY, CY equal to 35, and our last attribute is radius attribute. For radius attribute, we need to use R, R equal to for now, I'm going to use 35. If I set this file, here you can see this circle. By default, it's come with black color and you know that. Now I'm going to move this circle inside the cliput tag. I'm going to type clip PT. I'm going to move this circle inside the clipper tag. I'm going to set ID to this clipper tag. Let me show you ID equal to my clip. If I set this file, now you can see our circle is disappear, and now I want to show this circle on the inside the heart shape, not outside the heart shape. For that, we need to use a tag, which is use. I'm going to tie use. And then we need to use some attributes to create this mask. Our first attribute our first attribute is clip path, equal to inside the double codes, URL. Then inside this parenthesis, we need to provide the clippT tag ID, has tag, my clip. Now we need to link this clip path with this hardship. For this, we need to use another attribute, and you know that, which is xlink HRD. Let me show you. Colon HRDF equal to inside the down codes. We need to provide this but tech ID, which is hard. I'm going to type has tag hard and also I'm going to provide a field color, which is red. If I set this file, here you can see the result. It clip the circle shape according to the heart shape. This is the main use case of clip but tag. We can group the circle inside this heart shape. We can animate the circle inside this heart shape and many more. Let's animate the circle shape inside this heart shape, and I already type some CSS code for that. Let me show you. Here you can see, I create a key frames name open your heart. Inside this keyframe, our heart going to start from radius zero and its scale up to 60 pixel radius. And here we select our circle shape using CSS selectors. Here you can see inside MyClp ID, we have a circle tag. That's why first I use My Clif, and then I use circle tag. And then I call our animation, which is open your heart, I want to run this animation for five second duration, and I want to play this animation for infinite time. That's why I use infinite value. I hope you have already basic knowledge about SASS animation. If I set this file, here you can see the animation. Every five second duration, it's run our animation. I hope now you understand what is the usage of flip tag. Thanks for watching this video, stay tuned and stay tuned for our next tutorial. 24. 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 Vigiimage. Suppose if you want to change object size and their path, just using a clique, then we need to use JavaScript for that. Here, you can see inside our view box, we have a rectangle shape, and also you can see a button below the view boox. And now I want to scale this rectangle size by clicking this button, something like that. For this, we need to use JavaScript. Let's jump into the visual studio coordtor and try to understand how we can add JavaScript in wigi image. Here you can see side by side, I open my visuals to codaor and my browser using b server extension. As you can see, I already create a external document and inside this EML document, I create a class container. Inside this deep, I create a SVG image. Also you can see a rectangle shape inside this VG image. Which ID is g. Then outside this container deep, we create another class center. Inside this deep, I create a button. Which ID is button. Also you can see this button in my browser. And now I want to scale my rectangle shape when I take this button. For these, we need to use JavaScript. As you know, we need to use Script tag for that. Let me show you. Scrap. Inside this script tag, I'm going to create a function and our function name is scale size. First, I'm going to use function keyword and our function name is scale size. Inside the parenthesis, for now, I don't want to pass any parameter. Then inside the carvers, we need to select the ID of this rectangle. Document, dot, get element by ID, inside the parenthesis and inside the double course or ID name, which is a and now I want to scale the width of this rectangle. We need to scale this with attribute. I'm going to use a function, dot, set, attribute. Instead the parenthesis, instead the dole codes, first, we need to pass the attribute name and our attribute name is with. Comma and then we need to pass the value and I want to scale up to 50 pixel, so I'm going to pass 50, then semicolum to end this line. Similarly, I want to scale the height of this rectangle, so I'm going to duplicate this line and this time our attribute name is height. So I'm going to replace with height 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 n click. And inside these double codes, we need to pass the function name, which is scale size. So I want to copy the function name and paste it here. And now I'm going to set 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, there you can see now our rectangle with this 30 biixL and height is 20 pixel. Whenever I click this button, it scale the rectangle. Now it's Ws this 50 pixel and height is 40 pixel. 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 the shape in YXs. Or that you need to change the YXS value. Let me show you. I'm going to duplicate this line once again. But this time, I'm going to select Y attribute here. Y. I want to move this rectangle 30 Mixel at YXs direction. If I set this file and then click this button, here we can see first it scale our rectangle and then it's move our rectangle in YXs direction. I hope now it's clear for you how we can use JavaScript with XVGimages. Using JavaScript with CSS and using JavaScript with VIG, they are similar process. Thanks for watching this video. Stay tuned for our next tutorial, and then we will start our exciting exercises and projects. 25. Moving car Animation: Hello, guys. Good to see you back. From this tutorial, we are going to start our project. This is our first project, and our project name is moving car. Here you can see a car. It's a complete SVG image. This is not TML page, and you can see it in my 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 car stopped, 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. As you can see, inside my current working directory, there is a Viz file, the fine name is Jeb Cabrio I open this name as VG file in my browser, and here you can see the image. Now I'm going to jump into the Adoviillstrator software. Let me show you. Here you can see, I also open the same SVG image in AdoVillustrator. Now I'm going to create a new SVG file. For that, first we need to create a new AI file. I'm going to click on this file section, and then I click New. I want to create our viewport area with full SG resolution. That's why I'm going to use 19 20,080 resolution. This is our view Wok area. Now I'm going to drag this car in this space. I'm going to scale up this SVG image a little bit. And now I'm going to set this file as a AVG is. For this, I'm going to click on file section, and then I press Save as. I'm going to set this file in my current working directory, and also I'm going to change the fine name, which is moving car underscore car. Now I'm going to select the file type, which is VG. Then I select Us Artboard option, and then I press Save. I would like to go with style element properties. I'm going to press Okay. Here you can see in my current working directory, there is another VG image, which is moving underscore car 01. If I open this image in my browser, here you can see the image. In this exercise, I don't want to work with TML page. I directly work with SVG image. Let's jump into the visual studio coordinator and try to create the animation. So finally, I'm back to my visual studio codiator I also open moving car SVG file. And here you can see we have total three put tag. Our first butt tag is for our car body. Our second butt tag is for car front wheel and our third butt tag is for car rear wheel. First, I'm going to assign a class name to our car body, class equal to car underscoe body. I'm going to create a selector using this class name. I'm going to copy this name, and here I'm going to use style tag. Is this style tag, dot, our class name. Is the CaliverF I want to change the car body color. For that, I'm going to use field property. For body color, I'm going to use red color. If I set this file and reload my browser, here you can see, we successfully change the car body color. 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. We need to use animate transformation tag inside the pt tag. For that, we need to use closing butt tag. P. First, I'm going to type the tag name, which is animate transform. 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. Our attribute name is transform. If you're familiar with CSS animation, then you hear this sound a lot of times. Our next property name is attribute type. And our attribute type is XML. We already know that our SVG image is 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. I'm going to type rotate. And then we need to pass from value and two value from 360 degree and in our two value to zero degree. Then we need to provide the duration time DUR equal to, and I want to run this animation for three second three is, then we need to provide the repeat time of this animation. For that, we need to use another property which is repeat coum. Equal to, and I want to repeat this animation for 1.35 time. This is totally depend on you. How much time do you want to repeat your animation? If I set this file, it's going to rotate our wheel, but we do not provide the hub point of this wheel. That's why it's going to retain a different result. Let me show you. If I reload this file, here you can see the image. It's rotate our wheel according to zero X xs point. We need to pass the exact coordinates of this wheel hub to get this exact value of this hub point, we need to back to the Adovillstrator application. So once again, I'm back to my AdoVillstror application. Now we need to find the exact hub point of this wheel. I'm going to select this wheel. And here you can see the Xs point of this wheel and YXs point of this wheel. I'm going to copy the XXSPoint. If you notice you can see up the decimal point, it start with seven. It's mean it above the 0.5. We can use 753 point for that. As you can see our Y xs point is 500. Let's back to the visual studio codaor and assign the XS point and YXS point. So we need to provide the XXS point in this place. 753 and our XS point is 500 and also we need to assign the same value in that position. If I set this file and then reload my browser, now you can see it rotate our wheel in the exact place and it run our animation for three second, we need to follow the same procedure for our rear wheel. First, I'm going to close the P 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 point for our rear wheel. 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 Xxs and 500 YXs. Let's back to the codeditor. Our XXS coordinate is 917 and our YXS coordinate is 500. Also we need to replace in two position. If I set this file and then reload this browser, here you can see it rotate our two wheels in same direction. If you want to change this direction, and then you need to start from zero and 2360 degree. Just you need to reverse the coordinators, that's it. We successfully done our hub of the job, and now we need to move the whole car from right to left direction. How is it possible? Here you can see a group tag means G tag, and our G tag contains all the three put tag. We need to move the G tag from right to lept direction. Once again, I'm going to copy the animation tag. So put tag, and before the closing G tag, I'm going to paste it. For this animation, we don't need from and to value, so I'm going to remove it. And also 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 car position. That's why I use translate I don't want to repeat this animation, so I'm going to use one. And then we need to provide the car starting point and car end point and car endpoint. For that, I'm going to use a property named values. Values equal to inside the double codes. First, we need to provide the starting X coordinate and Y coordinates. By default, our curve position is zero. I want to start this car from 400 pixel distance, our X x value is 400 and our Y Xs value is zero. Colon. We need to provide the endpoint. For our endpoint, I want to stop this card in absolute position. That's why I'm going to pass coordinate zero and also Y coordinate zero. If I set this file and reload this browser, hey, it's not work. Maybe there is a mistake. Hey, I forgot to provide semicolon after endpoint value. If I set this file and reloat my browser, hey, it's still not works. Let's find out the problem. Let's change the duration time for second. Also, I'm going to change the values. Just I change the starting point value. If I set this file and reload my browser, here you can see now it's work. I run our car and also it routed our wheels. When our cars stop, it also stop the wheels. We successfully move our car from one point to another point. I hope now it's clear for you how it's worked. Thanks for watching this video and stay tuned for our next project. 26. Svg path tracking animation: Hello, guys. Good to see you back. This is our second exercise related SVG animation, and our exercise name is Path tracking animation. Let's see the example, what can we do with this animation? Here, you can see the world map, and now you decide to send a shipment from New York to Kolkata. And by this path, the ship will reach the destination. If I reload this browser, you can see the animation. You can see our container ship follow this path and reach his destination. As you can see, the red dot is running over the blue path. So let's start the practical and try to understand how we can create this example. Here you can see, I'm back to my Adovillustrator software, and I also select the paint tool. And also, you can see, I turn up my field color. I just use stroke color, and our stroke color is blue. And our view of resolution is 1920 5,080. So at first, I'm going to draw a curve stroke, something like that. That's it. This is the path which I'm going to use in our project. If you want to increase the stroke width, yes, you can, select the path and then I'm going to use two PT value for our stroke. Now it's look perfect. Now you need to extract the AVG code from this image. For that, we need to click on the file option and then saves. Then you need to assign a name for this file. I'm going to use Demo. And also you need to select the file type, which is SVG. Then I select Ue Artboard option, and then I press Save. Here you can see a lot of options. Everything remains same. You need to use CSS property style element, and then you need to press Okay to save this file. Let's back to the Visual Studio Creator and see what type of attribute we get from this SVG code. Finally, I'm back to my Visual Studio Creator, and here you can see my directory, there is a VG image named demo dot VG. If I open this image, here you can see some codes. As you can see, our viewfo size is 1920 5,080. Inside the SVG tag, there is a PAT tag, which I create in Adovillustrator software, the PAT class is ST zero. Also you can see the CSS property of this PAT. And if I open this image in my browser, you can see the result. It is just a SVG Path, nothing else. So once again, I'm back to my result studio creator. At first, I'm going to create a TML document named index dot HTML, index dot HTML, and also I create the basic structure. So let's create the butt tech animation. First, I'm going to use SVG tag. So to type SVG and inside this Vg tag, we need to define the vivoC size. And then we need to define width and height to this SVG image. So first, I'm going to define width, width 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 butt tag. But I'm going to use this butt tag. So I'm going to copy the butt tag. And paste it here. As you need to style this path. For this, I'm going to use style tag. As you can see, our path class name is t0s type dot ST Zero. Then inside the Carver says, 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 set this file and open this file with p server, here you can see it creates the same stroke path with blue color. And now I need to create a red dot, which is going to follow this path. For that, we need to use circle tag. Let's back to the Visual Studio code edited and try to understand how it's worked. So first, I'm going to create a circle tag after the PT tag, circle, and I'm going to use inland styling method for this circle. So to use style tag. Our first property is fill and our fill color is red. I'm going to use hexa value for that. Capital FF 00, 00. As you know, this is the hexa value of red colored and our second property is stroke. I'm going to type stroke here. For stroke, I'm going to use white color. As you know, to create a circle, we need to use radius value. I'm going to use R equal to and inside the double course, our radius value is 8.5. If I set this file, and then I show you my browser, here you can see a red dot at laptop corner. Now we need to start animation which can move our red dot from this point to this point, following this path. For these, we need to use a SVG animation property and the animation property name is animate motion. Inside this circle tag, I'm going to use animate motion tag, animate motion. First, we need to define the path of this animation. For this, I'm going to use path property. Path equal to inside the double codes. I'm going to use the same path, so I'm going to copy this path, and then I'm going to paste it here and our next attribute is duration attribute. I'm going to use DR equal to six second, our next property is fill equal to, I'm going to use freeze value, FRE Z E. Now we need to just close the animate motion tag. That's it. Let me explain all this thing once again. First I create a AVG tag, which view foot size is 1920 5,080. Then inside this VG tag, first I create a butt tag, and this is the coordinates of this put tag, and we already style our put tag using this class. Then I create a red dot using circle tag and our red dot radius value is 815. Then I use a SVG animation tag, which is animate motion. It going to animate our red dot. And now we need to move the red dot according to this path. For that, I use butt tech attribute. And inside the buttek attribute, I use the same value. If we do not use same value, our red dot, don't going to follow this path, and then we provide animation duration time, which is six again. And our animation field mode is freeze. It's mean when the track is complete, it's going to freeze our red dot. So if I set this file and then I show you my browser, and then I delt my browser, here you can see we perfectly execute our butt tech animation. After tracking is over, it's going to freeze our end of this path. I hope now the Path tech animation concept is clear for you. Thanks for watching this video. Stay tuned for our next exercise. 27. 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 a title with a stroke? Here, you can see some text on your screen. If I go on this text, you can see the animation. We called it Title rapping Animation. 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 Creator and my browser using light server extension, and I already create a TML document. At first, inside the body tag, I'm going to create a deep tag. So to type, TV our deep class is SVG rapper rapper. Inside this deep container, I'm going to create SVG tag. I'm going to say height Ot to this SVG tag, height equal to inside the double codes, 60. And width equal to inside the dole codes, 320. Also you need to provide the Min name space. Let me show you. Sometime this declaration is necessary and sometimes not. Then inside the SVG tag, I'm going to create a rectangle. For this, I'm going to use rec tag, RCT. Also, I'm going to assign a class to this rectangle. The class name is shape, and now I'm going to declare height and width to this rectangle. Height equal to 60 and width equal to 320. Then I press arrow to end this tag. If I set this file, here you can see the image. As you know, by default, it came with black fill color. Here you can see it creates a rectangle which height is 60 and width is 320. Then inside the SVG tag, I'm going to create another dip tag, Dev and also I'm going to assign a class to this dip text. I'm going to type a text in this container, your text. Text. If I set this file, you can see the result. So we successfully complete our ATL portion. And now we need to work with style section. So first, I'm going to create the style tag inside the head tag. So type style. Inside the style tag, first, I'm going to select ML and body tag. So type TML, body. Then inside the arises, first, I want to set a background color. I'm going to use background property. For Value, I'm going to use RGV value RGB. Then inside the round is, I'm going to type 20 2020. I going to set dark gray color in our background. If I set this file, you can see the result. Now I'm going to set a height to this body and this TML tag. So to type height property, height 100%. Then text align center, and I'm going to use overflow hidden. If I set this file, now you can see it horizontally align our content center. Now I'm going to starle this parent container. Which class is Swig rapper. So I'm to type vg rapper. Then inside the Cali res at first, I'm going to use position property, position relative. Top 50%. I just want to enter this content vertically. That's why I use this property, and then I'm going to use transform property. Transform, translate Y -50% and our margin value is auto Also our rapper with this 320 pixel. If I set 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 Shape class dot shape. Then inside the Cariss at first, I'm going to transpar into this rectangle shape. For this, I'm going to use field propriety. Feel transparent. If I set this file, there 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 our stroke color is red. If I set this file, now you can see this stroke, and also I'm going to increase the stroke width, which is eight pixel. If I set this file, you can see the result. And now we need to work with stroke array property and stroke desk osite property. Let me show you sum to type stroke array, 140 pixel to 540 pixel. Using these values, we can control our stroke dash size. Also stroke dash gap. Next property is stroke ds opposite, and our stroke desk posite value is minus 474 value. If I set this file, you can see the result. Also, I'm going to use border property for this shape, sum to use border. Border, five pixel border type is solid and border color is black. If I set this file, it still exists under the stroke line. That's why you cannot see the result. And now I'm going to use transition property for animation duration. So I'm type transition. For stroke width, I'm going to use 1 second. For stroke dash posite I'm going to use one again, once again, and for stroke array, I'm going to use on again duration once again. If I set this file, here you can see there is no changes. I want to apply this transition when I over my cursor into the text. Now I'm going to style this text. For this, inside this style tag, I'm going to use the text class dot text. Then inside the Cariss at first, I'm going to change the font size and our font size is 22 pixel thence come and then I'm going to change the linehight property. I'm going to type line height and our linehight value is 32 pixel. And I also need some space between these letters. I'm going to use letter spacing property, letter spacing, and the value is eight 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 set this file, you can see the result. Now I'm going to move this text above the line. For that, I'm going to use top value, top -48 pixel, and our position is relative. If I set this file, you can see the result. Now I'm going to use hover selector to apply this effect. So I'm going to use dot SVG rapper class. Colon hover. So when I over this VG rapper container, I want to change the stroke dash array property and stroke dash osite property. For that, we need to select the shape, shape. Then inside the arises, at first, I'm going to change the stroke with value, so type, stroke, with. I'm going to use two pixel value for our stroke. And our next property is stroke dash opsite our stroke desk opposite value is zero, our last property is stroke dash A. And our stroke dash error value is 760. If I set this file and then I over my cursor into the text, here you can see the effect. So we successfully create the title wrapping effect. To create a perfect dash array size, you need to work with stroke dash error property and stroke dash offset probity. Just you need to remember these values are very important. If you 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. Thanks for watching this video, stay tuned for our next exercise. 28. Wavy text animation enhanced 90p: Good to see you guys. Once again, I'm back with a new exciting project. In this project, we are going to create irritable wav text animation with 360 degree rotation. As you can see, it's give you text waterwV effect. Not only that, our content is also irritable. We can change the text directly from the browser. We can select our content from the browser and also we can remove it. And we can put any text content here. In our guess, I'm going to put hello world. For this project, we need to use SVC filters. So without wasting your time, let's start the practical. So finally, we are in result studio code editor, and as you can see, we already create index dot t file, and also we create style dot Sass file and we already link our style file with this t file. At first, inside the body tag, I'm going to create H two tag, H two. And inside this two tag, I'm going to type some text. For now, I'm going to type your text. As you can see, we already opened this file with if server in our browser. Let me open the browser. Here you can see in my browser your text. Let's back to the Visual Studio code editor. But I want itable content. For that, we need to use a attribute, and our attribute name is content itable. Here I'm going to type content itable, and we need to make it true. If I set this file and back to the browser and click on this text, here you can see we directly edit our text. You can put any text here. Suppose I want to type name. Now we can edit our text through the browser. If I reload this file, as you can see, is back to the old contain your text. Let's back to the visual studio boot again. Now we need to jump into the style file. At first, I'm going to style our body tag. Body. Is that the calibre or first property is margin. Margin, zero. Our next property is padding, padding also zero. Our third property is display, and I want to use flex vi display flex, Justify content center. Also, I want to align the items. That's why I'm going to use aligned item property, align items center. With that, we need to set minimum height. Man height hundred VH. Also, I'm going to say it background color. Background for background color, I'm going to use RGV RGB. For red, I'm going to pass 49. Also for green, I'm going to pass 49, and for blue, also, I'm going to pass 49. If I set this file, as you can see, it's provide dark gray background color. If I show you my browser, here you can see in my browser, we said dark gray background color, and also we align our content middle of this page. Let's back to the coordinator again. Now we need to style our H two tag, H two. Inside the cali resis, our first property is color. Color, and I'm going to use white color. White. Our second property is margin. Margin zero. Our next property is padding. Padding also zero, and I'm going to use font family. Font, family, sensory. I'm going to use sensory font here and also I'm going to use font 08. Font, wait. I would like to go with the bolder font. I'm going to select 900. And then I'm going to select font size font size am. If I set this file and back to the browser, here you can see the result, your text. And if you want to edit it, also you can. You can put any text here. Suppose I'm going to pass Hello World. We can edit content directly, but if we reload this browser, as you can see, it's back to the old content, and now we need to jump into the most important part of this video, which is VG filter. Let's back to the Visual Studio code and there's back to the index table file. And here I'm going to create a VG filter. At first, I'm going to take VG tag, VG. Inside this VG tag, I'm going to take filtered tag. Also, I'm going to set a ID to this filter. ID equal to waive. Then inside this filter tag, first, I'm going to use FE turbulence filter, FE turbulence. And then we need to use some attribute. Our first attribute name is type. Type equal to inside the double code our type name is turbulence. Our next attribute name is base frequency. Shamo type base frequency. Base frequency equal to 0.005. Our next attribute is num octave. Num octave, equal to five. I'm going to say it num octave five. I'm going to set this file. Next, we need to create another filter, which is F displacement map. So here I'm going to type FI displacement map. Fact. A, we need to pass two attribute here in equal to source graphics. Our next attribute is scale. Scale equal to 50. So we successfully create our AVG filter. Now we need to apply this filter in our body tag. So I'm going back to the CSS file and inside this body tag, I'm going to use a property name filter. Filter URL, and here, I'm going to use this ID wave. I copy this ID, and here I'm going to pass hass tag our ID name. If I set this file I show you my browser, here you can see in my browser, the displacement result. Here you can see how this effect restrict our text. Let's back to the CSS file because we need to align it middle of this page. Here, I'm going to style another tag, which is SVG SVG, inside the Cali resis, I'm going to set high the W W zero. Height, also zero. If I set this file and show you my browser, now you can see it's Align middle of this page, and now we are going to jump into our final part, which is animation. We need to rotate our content 360 degree. Let's back to the code iter. Now inside the H two tag, I'm going to take animation property. Animation and our animation name is animate. I want to run our animation for 22nd. This is our animation duration. And our animation direction is linear. And at last, I want to run our animation infinite time. So here I'm going to use infinite Vado infinite. And now we need to create the keyframe for this animation. So here I'm going to use keyframe keyword at the rate keyframes. And our animation name is animate. Then in that the calibers is in 0% position wins our start position, I want to use transform property. Transform and here I'm going to use rotate rotate 360 degree. Then in our end position means 100% position. Once again, I'm going to use transform property. Transform, rotate. And now I want to rotate it zero degree. If I set this file and back to my browser, let me show you. Here you can see our final effect with the animation. Not only that, also our content is irritable. We can edit directly. So here I'm going to pass hello world. Hello world. So this is it for this tutorial. I hope you like your project. Thanks for watching this video. Stay tuned for our next project. 29. SVG Text Masking with Video: Hello, guys. Once again, I came back with a new exciting exercise. In this exercise, I'm going to perform SVG test masking with video. In this exercise, we are going to learn how can we use SVG text and make it a clipping mask? You can show anything behind the text. It may be video, maybe image, or anything, but I would like to go with video. Let's start the practical and see how can we create this mask? So finally, I'm back to my visual studio coordinator. As you can see, I already create a TML document, and I also create style dot CSS file. Here you can see in my current working directory, there is a video, video.p4, and I'm going to use this video file for this exercise, and I already open this file using light server extension. At first, inside the body tag, I'm going to create VG tag a VG, and we need to set heighten wed to this SVG image. I'm going to use height property, height equal to 100%. And with equal to 100%. I'm going to use the full page of our browser and inside the SVG tag, I'm going to use textag to create the text. So to type text, and our text is SVG mask. If I set this file and show you my browser, here you can see in my browser, there is nothing because we cannot set any field color to this text. I'm going to assign field color and position to this text. For this, we need to pass X coordinate X equal to 50% and Y coordinates equal to 50%. This coordinate is going to put our text middle of the page, and also we need to provide field color to the text, so I'm to use field property, equal to rate. If I set this file and show you my browser, here you can see the text is Vig mask, but it is not vertically centered. We need to center it vertically. Let's go to the visual studio crator once again. Then jump into the CSS file and I'm going to select the body tag. Instead the Cali vss, I'm going to set height. 100 VH and merge in zero. If I set this file, and then I show you my browser, here you can see it vertically and horizontally align our text center. Let's style this text and make it better. I'm going to style the SVG tag. Snotype SVG inside the Cali resis. Firsts, I'm going to play with font size. Font size 15 EM and our position is obsolete, and top value is zero. Also, lift value is zero and height, 100%. If I set this file and show you my browser, here you can see the text is WiGimsk. Let's change the font family of this text. I'm going to use MonstertFont for this text, and I already copy the link from the Google front. Soon to paste it here. It's totally up to you what kind of font you want to use. Then back to Style Sass file, and I'm going to use font family property, font family MonsorOwise, Sansaif. If I set this file and for you my browser, here you can see, we change our font style. But if you notice here you can see, our font is not still medal in our page. For this, we need to use text anchor property. Let me show you. So inside my text tag, I'm going to use this property text anchor equal to medal. If I set this file, I show you my browser, now you can see our text is weld align. But there is another problem. Our text is not responsive. For that, we need to use mediaquery. Let me show you. Back to the style CSS file, and I'm going to use mediaquery ored media, screen, and I'm going to use Maxi probability, Max, With I want to break it for dek of size, so I'm going to use 1,200 pixel. Is going to apply a new CSS property when our browser resolution is below than 1,200 pixel. When browser below than 1,200 pixel, I want to decrease the font size. I'm going to select the SVG tag and inside the liver says, I'm going to use font size property. Font size four EM. If I set this file and show you my browser, here you can see our browser with is greater than 1,200 pixels. That's why it's written 15:00 A.M. Font size. But if I reduce the browser size, here you can see our font shrink down to the 4:00 A.M. Size. If I increase the browser size, you can see the result. Let's set a transition to make the transformation beautiful. I'm going to use transition property here. Transition transition duration is 1 second, and then we need to pass the transition property. Why do we need to apply the transition effect? I want to apply it in our font size. So to copy the font size, I'm to paste it here. If I set 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 font smoothly change its size. So our hub job is done. Let's add a video to our table page. I'm going to use video tag here. And inside this video tag, I'm going to use some attributes, something like autoplay, or next attribute is place in line, mutate, loop, and preloade. Inside this video tag, I'm going to use source tag to link this video. So to type, source, SRC and our video file name is video.v4. If I set this file and show you my browser, here you can see the result on your screen. Now I need to use two more SVG tag, Diptag and Musk tag. Let me show you. I'm going to type Diptag here. Das inside the Diptag I'm going to create Musk tag, Musk. As I'm going to assign ID to this mask, ID equal to, and our ID name is Musk. And also need to position this mask, so I'm going to use X equal to zero, and also YXs position is zero. Also I'm going to say height and width to this mask, height equal to 100%, and also need to provide width and width equal to 100% too. Then I'm going to move this text tag inside the mask tag. If I set 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 dep tag in our previous tutorial, I don't going to explain it once again. So inside the mass tag, we need to create a rectangle. So I'm going to use rec tag. I'm going to use same high weight property for this rectangle. So I'm going to copy the coordinates, and I'm going to paste it here, and also need to use the same rectangle shape outside of this dep tag, something like that. If I show you my browser, now you can see nothing. Now we need to select our rectangle shape in our CSS. I'm going to type SVG rec. Then inside the Carli resist, I'm going to fill the rectangle with white color. I'm going to use field property, white. Then I'm going to use mask property, mask, colon, URL. Inside the parenthesis, here, we need to provide this ID, mask. So I'm going to copy the ID, and I'm going to type hashtag or ID mask. If I set this file, it should work. Let's get to the browser and see what happened. Here you can see our SVG video must work perfectly, and if I reduce the browser size, it's also worked perfectly. Now it's clear for you how we can perform SVG taste masking. Thanks for watching this video. Stay tuned for our next exercise. 30. 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 VG Path tag. So let's jump into the web browser. As you can see, there is nothing on this page. It's completely blank. But when I scroll my mouse, you can see it drew a picture, I draw a star shape. This VG trick is related to scrollbar. So when I scroll my browser, it complete the shape. So let's see how we can create it. Side by side, I open my Visual Studio Creator and my browser using Lifesaver extension, and I already create a TML document named index dot HTML. At first, inside the body tag, I'm going to create the Vg tag. SVG. Also, I'm going to assign ID to this SVG tag, ID equal to my SVG. Then inside the head section, I'm going to use style. Inside this style tag, first, I'm going to select the body and our first property is height, height equal to 3,000 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 set this file, here you can see the scrollbar. Then I'm going to start the SVG image. Hashtag, my SVG, and that the calibers is our first property is position. Position fixed. I'm going to use fixed position for this example. Then top 15%, for the SBG image, I'm going to use 400 pixel width, width 400 pixel and height, 210 pixel. Also I'm going to use margin on lap side, so I'm going to type margin p -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 these properties. Next, I'm going to create the star shape using butt tag. So Path closing path I the butt tag. Our first property is feel. Feel equal to none. I don't want any field color for the star shape. Then our next property is stroke. Stroke equal to rate. And also, I want to set this stroke width. So I'm going to use stroke width property Width equal to three. And also, I'm going to set ID to this path. ID equal to star. So let's create the shape using PT coordinates. As you know, to create a shape using put tag, first, you need to use D attribute, Dequal two instead the double codes, our starting point. We need to provide the starting point, 150 pixel, and also need to provide the point. And our point is 200 pixel, and our next point is L 225 pixel. And also endpoint is zero pixel. If I set this file, as you can see, it draw a line. Hey, there is a mistake in width spelling. I forgot to provide D between I and T. If I set this file, now you can see the width of the stroke. This is our starting point. 150 pixel YXs and 200 pixel Xxs. This is our next point. To create a star ship, I'm going to create another point in this place. For XXs I'm going to pass 300 and for YXs I'm going to pass 200. If I set this file, you can see, it's create another point in that position. And now I'm going to create another point something in that position. For this, I'm going to pass, 150 XX and 50 YXs. If I set this file, as you can see it creates the line, and then I want another point in that position. So in Xs direction, I'm going to use L 300 and in YX direction, I'm going to use just 50. If I set this file, now you can see the point. And now we need to complete this shape. So we need to draw a line from this point to this point. And as you know, to back to the start point, we need to pass Z value. Just want to pass Z. If I set this file, now you can see it complete our star shape. So we successfully complete the drawing pod. But if I scroll this page, it's not going to draw the image. For this, we need to use JavaScript. At first, I'm going to create the script tag. After BG tag, I'm going to type script. Then inside the script tag, at first, I'm going to get the ID of this path element, which is star, er star equal to document dot, get element by ID. Inside the parenthesis, our ID name is star and colon to end the line. Next, we need to get total length of this shape. For this, I'm going to create another variable, er nth. Equal to star dot, I'm going to use get total length function. Now we have the total length of this star shape. Next, we need to play with stroke dh array value and stroke dash oposie value. Star, dot, style, dot, stroke dash array equal to length. Then semicolon to end this line. Stroke array mean, this is the start position of this drawing. Using stroke desk Osete property, we can hide this star shape, and next, I'm going to use stroke dash OsetePperty. I'm going to replace stroke dash array with stroke desk opposite. Using this, we can hide this star with upsetting dash and remove this line to show the star before this cold raw. Now we need to find percentage of this scroll. For these, we need to use Window Add even listener function. Let me show you so type window dot, A even listener. Then inside the parenthesis, our event name is scroll, when I scroll the web page, I want to call a function and our function name is my function. Now we need to create a function which can calculate this scrolling value. So I'm going to create this function. At first, I'm going to use function keyword, function and our function name is my function. Inside the parenthesis, I don't want to pass any parameter, so I leave it black. Then inside the Calibra, at first, I'm going to create a variable, and our variable name is scroll percent. Equival to inside the parenthesis, first, we need to join body scroll of value with Document Scroll value. Let me show you. Document dot, body, dot, scroll to plus, with that, I'm going to add that I'm going to add document element scroll of value, document dot, document element, dot, scroll to, and we need to divide it with height value. Inside the parenthesis, document dot get element, dot scroll height and from scroll height, we need to minus the client height. I'm going to type minus document element client height. This calculation going to return the cold percents. As you can see, when I set my file, it's already hide my shape and now I need to draw the shape when I scroll down. I'm going to create another variable, and our variable name is draw, equal to length, multiply by scroll percent and semig to end this line. If you want to reverse the drawing, when you scroll upward for this star dot, style, dot, strokes opposite, equal to length minus braw. If I set this file and scroll my page, as you can see, it perfectly draw our shape. If I scroll it upward, as you can see, it reverse the drawing. If I scroll downward, it draw our image, and if I scroll upward, it's reverse the drawing. I hope you like this project. Thanks for watching this video, stay tuned for our next project. 31. SVG Loader Animation: Good to see you guys. In this section, we are going to create all the loader one by one. Here you can see total eight different type of SVG loader and I'm going to create all the loader one by one. I'm going to start our projects with this loader. Let's see how we can create this loader. So finally, I am back to my Adovillustrator software, and I create a view booard area 200 by 200 pixel. As you can see, inside this viewpoard area, we have to turn two shape, a complete gray ring circle shape. With that, as you can see, there is a little piece of circle. And now I need to rotate this red piece of circle according to the circle circumface. Now the quoi is how we can create this shape. As you can see, I already create a similar size of viewport area here I'm going to create a circle without field color. Then I'm going to middle align this circle shape, something in that position. Then I'm going to increase the stroke value to pixel. It's up to you what kind of stroke weight you want. Then we need to convert this stroke into a outline path. For this, you need to select the stroke and then you need to go to the objecte section, and here you can see option path. Just click on outline stroke. Now it converts our stroke into a shape, and now I'm going to change the color of the stroke, something like gray color. Then I'm going to duplicate this circle shape in that position. For this, I'm going to praise Control C, Control sheet V. Here you can see in my layer section, we have to two shape 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. I'm going to draw a line from this point to this point and dipint to this point. I'm going to select all the shapes and line together, and then I'm going to praise ship aim to activate Shape Builder tool. I'm going to cut this turtle from this point, and also I'm going to remove the stroke lines. And then I'm going to fill the 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 set this image as a Vigimage. For that, you need to go file section and then praise Save as. And here you can see file type option, AVG, use artboards and then praise save. 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 save my SVG image. That's why I don't going to save it again. Let's back to the visual studio codator and try to understand how we can create this loader. Finally, I'm back to my Visual Studio codator and I already open TML document named index dot SDM. Also you can see a AVG image in my current working directory named loader dot SVG. If I show you the SVG code, you can see it clearly. As you can see, our view wok size is 200 by 200 and as you can see, we have to do two path in our SVG image. Our first path is for complete circle and our second path is for hub part of this circle. Now I'm going to copy the whole code from this file. And then I'm going to jump into the index dot STL file. At first, inside my body section, I'm going to create a div class loader. Inside this div, I'm going to paste all the SVG code, something like that. If I set this file and show you my browser, you can see the SVG image in our browser. But it look pretty huge. We need to scale down it, also we need to position it middle of this page. So once again, I'm back to the visual studio coriator and I'm going to type style tag here. Style. At first, I'm going to style the body. Instead the Cali ressF, I'm going to use margin property. Margin zero. Then I'm going to use padding property, padding also zero. And then I'm going to set a background color. I'm going to use RGV value. RGB inside the parenthesis, our Rvalue is 66. G value is also 66, and B value is also 66. If I set this file and show you my browser, here you can see it creates a dark gray background color, then I'm going to scale down this loader size. For this, I'm going to select Loader class. Loader inside the Cariss height, 300 pixel, weed, also 300 pixel. If I set this file and showing my browser, here you can see we successfully scaled down our image. And now we need to align this SVG image, center of this page. Inside the body selector, first, I'm going to use display property, display flex, Justify content, center, text align center. If I set this file and show you my browser, here you can see you horizontally align this image. Now when to assign a margin to centered it middle of this page. I'm going to use Margin top value. Margin top 300 pixel. If I set this file and show you my browser, here you can see we middle our loader successfully, and then come the main part of this tutorial. We need to animate this loader. For this, we need to rotate this red shape in the circle Sargumpas. Let's see how we can rotate this shape. Now we need to animate this path. At first, we need to create the closing path tag. Inside this butt tag, we need to use another tag, which is animate transform. So to type, animate, transform. As I'm going to close this tag, and also we need to use some basic attributes. Our first attribute is attribute type. Equal to XML and also need to provide attribute name equal to transform our animation type is type, equal to rotate. Then we need to provide animation 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 zero and then we need to provide the center point of this rotation. We need to pass Xxs and YXs. As you know, our VD view works height and W is 200 pixel. To find the center point, we need to divide within height with two. So if I divide it 200 by two, it's written 100. This is for X xs and similarly for Y xs is written 100. This is our X xs point and this is our Y axis point. This is the starting point of this animation and also need to provide the end point of this animation. I'm going to use two value two, equal to inside the double course. And first, we need to provide the rotation angle. And I want to complete this rotation, so I'm going to use 360 degree. And also, we need to provide the center point. So our excess direction is 100 and also YXs direction is 100. And then we need to provide animation duration time. So I'm going to use der value, der equal to 0.8 second. And also, I'm going to run this animation infinite time. So I'm going to use repeat count attribute. Count equal to inside the double codes, indefinite. If I set this file and then show you my browser, here you can see on your screen our loader works successfully. If you want to make this rotation more faster, you need to decrease the duration time. Let me show you. Now I'm going to use 0.4 second duration. If I set this file and show you my browser, here you can see our rotation speed is increased. I hope now it's clear for you how we can create this SVG loader. Thanks for watching this video. Stay tuned for our next exercise. 32. 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 Tarvulens wave effect. If I reload my browser, as you can see, after 2 seconds, it performed Tarvulence effect animation. 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 open my resource studio Creator and my browser using lip server extension, and I already create a TML document named index dot TML. Also I create a CSS file 40 style dot CSS. I already link this file with this STL file. Next, I'm going to use SVG tag inside the body tag, So ty SVG, then inside the SVG tag. For now, we don't need to specify any view box because we'll create this VG for a filter. So here I'm going to use filter tag. Filter. We have total 17 different filter in SVG. But for this tutorial, we are going to use only two filters. First, I'm going to use Tarulns and then I'm going to use displaced pen map. But before, I'm going to assign a ID to this filter, ID equal to noise. With that, we are going to pass coordinates, position and Y position, X equal to inside the quotation, 0%. Similarly, Y equal to inside the codes, 0%. With that, we are going to pass filter width and filter height, width equal to 100%. Also height equal to 100%. Let's use our first filter, which is AE Tarvulens. Sum tie FE tarbulens. Now we need to use some attributes. Suppose our first attribute is base frequency, summon tie base, Best frequency equal to instead the doll codes, I'm going to pass total two value, 0.02, and our second value is 0.03. These are two different values. It's going to effect the waveform of the star lens. You can experiment with these values. It is up to you and our next attribute is result, sum time, result. Result equal to noise. And also we need to pass another attribute which is num octave, type, num octave, equal to one. Also, I'm going to use a ID for this filter, ID equal to Travolens. Then I'm going to complete this tag. Let's use turbulence filter with an image and see how it so. Software is VG tag. I'm going to create another dip. Deep and our dip plus is container. Inside this deep container, I'm going to insert image. Image, IMG source and our image name is, as you can see, OceansunPmo OceansunPmo. If I set this file, you can see the image in our browser. This is for a SML part. Let's jump into the CSS file and style this image. At first, I'm going to style body tag. Body, margin left, zero, margin right, zero. And also I'm going to set height to this body. Height equal to hundred VH. I also I'm going to set the position position relative, and then I'm going to style the SVG tag. So to select SVG Is the CarirassPosition, position equal to absolute. And then next, I'm going to style our container D. So I'm going to copy the cast name and back to the style file. Container inside the calibre says, I'm going to use display grid property, display grid. Our next property is grid template columns. G template columns. Here I'm going to use repeat repeat one. For our grid cell size, I'm going to use auto val. I'm going to use auto Valu Also I'm going to align this item center align item center. And also I want to set height of this container, height equal to 100 VH width equal to 80% and margin zero or two. If I set this file, nothing is going to happen here. So let's apply the filter in our image tag. Sumo type IMG inside the car says, I'm type W W equal to 100%. For image, I'm going to use 100% with. If I set this file, and now you can see our image is responsive, and now I'm going to apply this starl filter on this image. As you can see, for this, I'm going to use this ID, noise. So here I'm type filter, URL, hastag noise. If I set this file, you can see the result. As you can see, if we use only turbulence filter on this image, it is draw some trazywy pattern on this image. So with that, we need to use another filter, which is displacement map. So type FE, displacement map, with that, also, we need to use some attributes. Our first attribute name is in, in equal to inside the double course, source graphics, subtype, source graphic, our second attribute name is N two, N two, equal to inside the double course noise, and our third attribute name is scale. Scale equal to 20. If I set this file, you can see the web pattern on this image. Source graphic is our image, and using noise, we can link this to filter. After combined these two effect, it's written this result. This is it for this tutorial. In the next part of this tutorial, we are going to perform animation using JavaScript. Thanks for watching this video, stay tuned for the next part of this tutorial. 33. Image Turbulence & Displacement Part 2: Hello, guys, good to see you back. This is the second part of this tutorial. In this part, we are going to run the animation using JavaScript. Basically, I'm going to use GSP animation. At first, I'm going to link this file with CDN, and then I'm going to create Script tag. At first, we need to select the turbulence effect. For that, I'm going to use this ID, turbulence. I want to create a variable t El element equal to document, dot, get element by ID, inside the parenthesis, inside the single course turvulens. Then semiconal to end this line. After that, I'm going to create a timeline. So TL timeline equal to Mu timeline max. Inset the parenthesis and insert the cimsis we need to set pause equal to true true semicolon to end this line. It's mean when I load my browser, it's not going to perform the animation. It's going to perform the animation when I call, and now we need to just change the attributes using JavaScript. I'm going to type tal dot two function. Inside the parenthesis, at first, we need to pass the element means turbulence element. So I'm to type EL. We need to pass the duration, which is three second, and then we need to pass the object, and I want to change the attribute, sum ro type ATR, colon. Is the continuous, I want to change the base frequency, sum type, base frequency here. With that, also we need to pass the base frequency value. Inside the single course, zero, zero. At last, we need to pass another value, which is delay and after two second delay of browser loading, it's going to perform the animation. I pass two and semicolon to this line at last, we need to call another function, which is play function. Sound to type tl dot play. So we go on to end this line. If I set this file, as you can see, after two second, it perform our animation. Once again, I'm going to reload my browser. As you can see, after two second, it going to perform my animation and it take three second to complete the animation because our animation duration value is three and our animation DA value is two second. So in our two function, basically we pass total four parameter. At first, our selected element, then animation duration, and then we need to pass the attribute value, and at last, we need to pass the animation delay time. This is it for this tutorial. Now you can create your own turbulence effect with AVG. So thanks for watching this video, stay tuned for our next tutorial. 34. Svg map reuniting animation: Hello, guys. Good to see you back. Once again, I'm back with the new SBG animation project. And in this project, we are going to create reuniting animation effect of your country map. Let me reload the browser for demonstration. After I reload my browser, as you can see how each of the states of the country returned to its own position. As you can see, it's create a beautiful reuniting effect. I did this project on Gandhi's one 50th birthday. Not only that, if I hover my cars on this map, also we can fill this map with tricolor. This project will take a lot of time. I will show you the part of this project on how to complete this project. First of all, you need to download the SVG map of your country. I'm from India, so I download Indian Map and I kick this website mapwgi.com. Here you can see each state of India marked severatey also you can see the name of the states when you hood on it. I'm going to download this map for this project. So let's start the practical and see how we can create this project. As you can see, I am in my browser and I'm going to click right click on it. After I select the elements section in my ozone, I'm going to hob my curser every states in this country and I'm going to select one of the state from it, and I'm going to select this little state Misoam. After select this state, as you can see in my elements section, this path already have a title, Misoam. Also, it have a ID, NI N. So this ID is very important. Using this ID, you can run animation on it. So I copy this ID. And as you can see, I open this whole C file in Visual Studio code editor. And as you can see, every state of this country created by PuTTag. And now I'm going to find the same Mzurum state using its ID. So I press Control AF, and here I'm going to paste the ID name. And here is it. So at first, we need to create the motion animation for this state. So here at first, I'm going to add a closing put tag, and inside this Pt tag, I'm going to use the VG tag, which is animate transform. For moving animation, this tag is very important. And also, I'm going to assign a ID to this tag. ID equal to this tat is misoram so I'm going to type MZ, and then we need to pass attribute name attribute name, equal to, and our attribute name is transform. And then we need to pass attribute type attribute type equal to XL. And now we need to pass animation type. Type equal to translate, and then we need to pass the duration value for animation, Dur equal to four second, and now we need to pass the exact location from where we need to start the animation, and I want to start this animation from this place. Inside the values, I'm going to pass X xs and YX is 50 40, this is the starting point and from point, I'm going to pass 00 and also we need to pass another attribute for this animation, which is repeat cow. So here I'm a t, repeat count equal to one. I want to run this animation for only one time. If I say this file and back to my browser and reload this browser, as you can see, it's worked perfectly. Here you can see how this state returning to its own place. Using this animation and the value, you can create reunite effect of your country. And if you want to change color of your state, when you over on it, for that, you need to use some properties. Our first property name is on Mouse. And here, I'm going to pass a color viel. I'm going to type this dot style dot feel equal to, and our color name is gray. When I ho my cursor on it, it return gray color. With that, I want to add a mouse out effect. Here I'm going to type on mouse out, equal to this dot style dot feel equal to green color. With that, I want to add a stroke color on it. So here I will type this dot style dot, stroke, equal to red. Let's set the file and back to the browser. Here you can see our animation works perfectly. And if I ob my car on this state, it return gray color. And if I mouse out from it, as you can see, it's turned into green color, and also it add a stroke color on it, which is red. So I hope now stellar for you how I create this whole project. One by one, you need to create the animation effect for every state. If you are from United States then you need to do the same thing for 50 time. I hope now it's clear for you. Thanks for watching this video, stay tuned for our next exercise. 35. What are SVG filter: Hello, guys. Good to see you back. Again, I'm back with a new tutorial related WiGi in this tutorial, we are going to learn VG filters. Most of the advanced SVG animation effects made with filters. Also, we can create image effects with that. In this tutorial, we are going to explore the basics of VG filters. At first, we will learn what are AVG filters and how they are different from CSS filters. Then we use filter element and learn about filter primitives. With that, I'm going to show you some demonstration how we can use it practical. What exactly is SVG filters? Before we start SVG filters, we need to understand CSS filters. As you might know in CSS, we have certain functions and we can use it for blur, drop shadow, color operation, et cetera. Also, we can control hue saturation brightness using CSS filters. These filters are mostly applied in images. These are all CSS filters, and to use those filter, we need to work with filter function. But CSS filters are pretty limited. We mostly use them on images, and also the functionality is pretty basic. If you want more functionality, otherwise complex functionality, we need to use SVG filters. And here is the interesting part. CSS filters are subset of SVG filters. CSS filters are very easier to use, and it's come with simple functionality. For example, in CSS, we can blur images, but the blur is uniform. Same amount of blur is all direction, but in SVG, we can do the same blur with the different value Xxs and YXs. Also we can control the edges of the image blur. You might think SVG filters are only work with SVG element. That's not true. We can apply it any SML elements. To create this, we need to start with filter element. And also, we need to use some special functions called filter primitives. To get started, you need to start with SVG tag, and then you need to add filter element inside the SVG tag, and don't forget to add an ID to this filter tag because this ID work as a reference of this filter, and inside this filter element, we need to add primitives. These are all SVG filter primitives. That we can use inside the filter tag. Finally, we need to apply the filters while we want to apply it. Suppose I want to apply this filter on an image tag. In that case, we need to type attribute name filter, equal to inside the down Os, we need to type URL, and inside the round ress we need to link the filter with the ID, and there are a lot of primitives that you can use in your filter. And if you notice, you can see a prefix or Obin. This prefix stands for filter effect. These primitives allow us to create simple effects like blur, drop shadow, lightning, et cetera, and also it can give you protoshok grad effects, bending mode, compositing, displacement map, and no. From the next tutorial, we're going to start the practical. This is it for this tutorial. Thanks for watching this video stay tuned. 36. SVG Filter implementation: As you can see, side by side, I open my Visual Studio code editor and my browser using if server extension. I already created a TML page named index dot HTML. And inside this body tag, we declare a SVG tag with 750 and height 500. And also the view Box area is S. Next, we need to create a filter element. So inside the SVG tag, I'm going to type filter. Also, we need to assign an ID to this element ID equal to D. Inside this filter element, we are going to add a filter primitting. But at first, we are going to create another element where I'm going to apply this filter, and our element name is image. Here I'm going to type image. Here I'm going to use a attribute exceed. Link ON HREF. Equal to inset the double course, we need to provide the image path. You can see in my current working directory, there is an image, 01 dot JPG. I'm going to link this image. Here I'm going to type 01 dot JPG. If I set this file, you can see in my browser will link our image successfully. If you want to set within height, yes, you can. Just into type. Weight, 100%. Also the height. High, 100%. Also if you want to specify the starting position, yes, you can. For that, just you need to pass Xs and YXs X zero. Also YXs zero. If I set this file, you can see the rhythm. Basically, my image resolution match with this dimension. That's why these attributes are not going to effect so much. Then back to the main topic and create the filter. As you can see, it's a band filter now, but I want to apply this filter on this image. For that, we need to use an attribute and our attribute name is filter. Filter equal to is at the double course. We need to type URL. URL is at the roundresss now we need to link this image with this filter with the help of the ID. Here I'm going to type Hastag Demo. If I set this file, as you can see, it's completely blank. Now you cannot see the image because the filter is applied. Also, the filter is black. Let's go and add some primitives. At first, I want to apply a overly color on this image, and then we are going to do a blending mode. The first primitive I'm going to use for solid color, which is AI flirt, this one. So here, I'm going to type A flirt. And for primitives, you need to use self closing tags. If I set this file, by default is going to return black color, and now I'm going to add a third color. Or that, and I need to pass an attribute, flood hyphen color. Equal to inside the double course, I'm going to pass a hexa VH Dag double zero S double zero. If I set this file, you can see the result. It's written green color. If you want to control the opacity, yes, you can. For that, you need to use another attribute and the attribute name is flood Opacity. Flood hyphen Opacity. Equal to, for 100% opacity, we need to pass one. If I set this file, you can see 100% opacity. Next, we need to use another tag, which is result. So hemo type result. Result. Is the double course, I'm going to pass flood. This primitive can be combined to other primitives and to combine with another primitive, we can use result attribute as a ID. We can use the ID to another primitive to combine both the primitives. Next, I want to add another primitive for blending mode. For that, we are going to use this primitive, FE blend, filter for combining images. Here I'm going to type FE blend. Now here, in this particular instance, we need to pass two sources. Our first attribute them is E equal to the double quote source graphic. Graph Source guppix basically means the image right here. If I set this file, you can see the result. After type the source Guppy, we can see our image again. Now I want to brand this source Guppy with this primitive a flood. Here, we need to pass another source Guppy. I'm going to type into equal to inside the double codes, flood. So we link our second source Grape with this result. Next, we need to pass the blending mode. Here, I'm going to pass mode, equal to inside the double codes, color burn. If I set this file, you can see the result. Hey, it's not work. Let's use a different color and then apply it. I'm to pass a different color. It's a blue color. If I set this file, as you can see, now it's work. It bend the color with the image. This is how we can use SVC filters. This is the first example of VC filter. In the next tubrial I'm going to give you another example of VC filter. 37. SVG feColorMatrix Filter: Hello, guys. Good to see you back. Once again, I'm back with another tutorial related primitives. In our previous tutorial, we already learned about how we can use primitive with VG fitters. And in this tutorial, we are going to learn this primitive, A color matrix. This primitive is specially used to filter for color transform. This filter Apple matrix, transformation to change the color of input pixel. You can use it for color manipulation like grayscale conversion, color shifting, et cetera. And in our practical example, I'm going to show you how can we convert color image into a grayscale image? So let's study practical. So as you can see, side by side, I open my Wizz Studio code editor and my browser using Light server extension, and I already create an ML document named index two dot TML. In our previous tutorial, we already learn about how we can use SVG filters. So at first, as you know, we need to assign an ID to our filter. So I'm going to assign the same ID name, AI color matrix. So I copy this and I'm going to paste it here. Then we need to apply this filter in our image. So here I'm going to pass has tag and our ID name AI color matrix. If I set this file, as you know, it's going to return blank. Because our filter is blank, that's why it returned blank. As I told you, I'm going to use this filter for gray scale conversion. So I'm going to call this filter, AI color matrix, and I'm going to close this tag. At first, inside the color matrix, I'm going to use type attribute Type equal to, and inside the Dule codes, I'm going to pass saturate after set this file, you can see the result, but we do not pass any values. We can control the color saturation of this image using this filter. So for that, we need to pass the values. So I'm type value equal to instead the double codes. First, I'm going to pass 0.9. After set this file, as you can see, there is minor changes. You cannot identify the changes because here you need to pass value between 0.92 0.1. So if I pass 0.1 and then set this file, as you can see, it nearly desaturate our image, but it's not completely desaturate our image. If I pass 0.0 and then set this file, now you can see, now it completely desaturate the image. Here you need to pass value between 0.021. If I pass one, and this this file, now you can see our image is completely saturated. You can see all the colors. But if I pass 0.5 and this up this file, now this filter reduce the saturation of the colors in the Vigi element, and it reduced 50% color because here we pass 0.5. Not only that, we can apply the same filter in AVG elements. So here I'm going to create a react element. And first, I'm going to assign with with equal to hundred. Also, I'm going to assign height, height equal to 100. Then I'm going to assign color. I want to fill with blue color. So here I'm going to type style attribute. Style to apply the color, as you know, we need to use field probability. Fill Blue. Then I'm going to apply the filter. To apply the filter, as you know, we use we need to use filter attribute. Filter, colon, and we need to pass URL. Then you set the URL tag. First, we need to pass hashtag, then we need to apply the filter. But before I apply this filter, let's set the fine. Up to set this file, here you can see the result. Here we create a react element with blue color. And now I'm going to apply this filter, AE color matrix. So I copy this ID filter ID, then I'm going to pass it here. Apra set this file, as you can see, it reduced the blue color value 50%. And if I pass one, just one and then set this file, you can see the result. And if you make it completely desaturate, just into pass zero. Now it make it completely desaturate. Now, there is no color in this image, also in this react element. So this is how we can use it. Now, let me show you another example. Another usage of this filter. So we are already learned how we can use this filter for saturation purpose. And now I'm going to use the same filter for custom color. So again, I'm going to type filter tag. Also, I'm going to assign an ID, and this time our ID name is custom color. Then I'm going to close this tag. Then inside this filter, I'm going to use FE color matrix primitive. A color matrix primitive. He type A color matrix. I don't need this closing tag because I need this single tag. And then here I'm going to pass an attribute, and our attribute name is type. Basically, we can simply just copy this primitive and I'm going to replace it here. Then I'm going to change the type. Here I'm going to pass type called matrix. This time we use this primitive with matrix type, and now we need to pass the values. But this time, the value attribute contains a four by five matrix that define the color transformation. Basically, you want to say, here we need to pass total four row, and we need to pass to five value in each row. Each row of the matrix correspond to one of the output color channel. Our first row going to stands for red color. Our second row going to stands for green color, our third row going to stands for blue color, and our fourth row going to stands for Alpha. So without confusing you, let me pass some value. So in our first row, I'm going to pass this value, 0.5. Then I'm going to pass zero. Our next value is zero, space, zero and zero. If you notice, you can see in our row, here we pass total five value. This first row represent the red channel, red color channel, and here we pass 50% red color. Then in the second row, here I'm going to pass green colored channel, and I want to apply 100% green colored. So first, I'm going to pass zero, then I'm going to pass one, space, zero, space, zero, space Z. As I told you, every row going to contain five different value. Our second row represent green channel, 100% green channel, but our first row represent 50% red channel. Then in our third row, her I'm going to pass blue channel value. So to pass zero space, zero, space one, space zero and zero. Next, we need to pass the Alpha value. For Alpha value, I'm going to pass zero space, zero, space, zero, space one, space, zero. As I told you, our last row stands for Opacity, Alpha Valu. And now I'm going to set this file, and I'm going to apply the same filter to this image. So I'm going to duplicate this image and comment out previous line. And this time, I'm going to copy this filter ID and replace with this filter. If I set this file, you can see the result. As you can see, it adds a new filter layer to this image. And if you increase the otherwise decrease any channel value, let me show you. Suppose I want to increase red channel value. I want to make it nine, the set this file, you can see the different result. So this is how it sued. For now, I'm going to use 50% red channel. At the same way, you can change green channel Value. Suppose here I pass 0.5 and rest this file, now you can see different effect. Basically, if you want to become expert on it, you should have knowledge of basic photo editing. Also, you should have knowledge of Subta like Photoso. Then you can understand this value very well. So this is how we can use this primitive. I hope now it's clear for you. From the next tutorial, we are going to learn the remaining ones. So this is it for this tutorial. Thanks for watching this video. Stay tuned for the next tutorial. 38. FeComponentTransfer: Hello, guys, good to see you back. Once again, I'm back with another tutorial. Related is WiGiFlter and in this tutorial, we are good to learn this filter, AI component transfer. This filter element implements color manipulation on each colored channel separately. As you know, we have three color channel, red, green, and blue. With that, also we have another channel called Alpha. As you know, we can control transparency using this color channel. The four color channel in these elements are FI funk RFI funk G, FFunkV and FI, funk A. So to use this filter, we need to use this color channel inside this filter. And while performing color manipulation, the elements should only have one child element of each type, and we have only one attribute which is in, and it is used to store input for the given primitive. And in our elements, we can only total four type table discrete Gamma linear. So without wasting your time, let's start the practical and see how we can use these filters. As you can see, side by side, I opened my result studio code editor and my browser using light server extension, and I already created an estimate document named index table. So in this TML tag, we have a SVG tag, and here we set with the height, and also we said the view box. For now, it's an empty filter, but we set an ID demo. Also inside this SVG tag, we link an image, and you can see the image in my browser. Now I'm going to create this filter. So inside this filter tag, I'm going to use this primitive, which is A component transfer. Then inside this privitive at first, I'm going to use Alpha element. So HemotypeFV SNC AF Alpha. Then I'm going to close this tag. First, I'm going to use at first, inside this element, I'm going to use type attribute, T Tip equal to inside the Duel codes, and I'm going to type table. As I told you, we have to tell for type. So first, I'm going to use table type. Then we need to use another attribute which is table value. Equal to is at the tobon codes. Here we need to pass the values. For Alpha value, I'm going to pass zero space, zero space one, space one. And then I'm going to create another channel, which is u channel. So I'm going to do begin this section, and I'm going to replace A with B and Hemotype zero, one, then I'm going to pass zero, one. Next, I'm going to apply the green colored channel. So again, I'm going to be this line and replace B with G, and I'm going to change the values. First, I'm going to type one, space one, zero, zero, and at last, I'm going to apply red color channel. So I'm going to replace with R and change the values. First, I'm going to type zero space zero, space one, space zero. I'm going to set this file. And now I'm going to apply this filter in this image. And for that, as you know, he into type URL. Then you set the round presses, I'm going to use IDs. Somebody use this ID, so I want to pass hastex sign, and then I'm going to pass the ID name dim. If I set this file, you can see the result. As you can see, it apply the modified color channel in this image. This type of mapping can be useful for custom colored transformation or effects within Vrapis you can play with this value to chase the channels. So this is it for this tutorial. I hope now it's clear for you. In the next tutorial, we are going to learn another primitive. So thanks for watching this video steadied. 39. SVG feComposite Filter: Hello, guys. It's good to see you back. Once again, I'm back with another tutorial, and in this tutorial, we are going to learn another SVG filter primitive. We are going to focus on AI composite. Now the question is, what is Fi composite? A composite is used to combine multiple images or graphics element. It allow you to specify how different source images or elements should be composite together to produce a final result. The AI composite element is typically used within AVG filters to apply complex image processing effects. For example, you can use AI Composite to perform operations such as combined two images using arithmetic operator like add substract multiple or overlay. It is a very powerful tool for creating advanced visual effects in AVG. And it's come with some operator like over in, atop, out, ZO lighter or arithmetic. Now, before I start the practical, I want to show you some examples. As you can see, I open Adobe Illustrator software, and in this software, here I create two element. At first, I'll create a circle element and above the circle element, I create a star element. Now I'm going to perform some operation using Pathfinder. Some Pathfinder operations are pretty similar with AI composite primitive. So I'm going to select both the element and from the path finder, I'm going to select this option minus back. Up to select minus back, you can see the result. Next, I'm going to select another option, which is up select crop, you can see the result. This kind of operation, we can do using a few composite. Also, we can perform this operation and this operation and this one minus fon. Let's start the practical and see how we can use it. So as you can see, side by side, I open my Visual Studio code editor and my browser using light server extension. I already create a SVG filter, and we assign an ID to this filter is Composite filter. And before I create the SVG filter, at first, we define the SVG image, and her set with 400 pixel and height 400 pixel. Then inside this depth stag, we create the filter, Composite filter. Then we use AV image tag to load the image. He use two AV image tag. First one is for background image. Circle shape is our background image and star shape is our foreground image and also we store them as background result and foreground result. Then we use AI composite primitive, but we do not use any operator value. In AI composite, here we need to use total three attribute, operator attribute, in attribute, and in true attribute. At in attribute, Hen need to pass the first source of image and into attribute, her need to pass second source of image. Then finally, we apply this filter to an image element that display the background image. You already know about that, how we can apply filter in our image. Now I'm going to apply all the operators one by one. At first, I'm going to apply over operator. This is the default operator. After step this file, as you can see, there is no changes, then I'm going to use in operator. After set this file, you can see the changes. The part of this source graphic which is defined by in attribute that overlap the destination graphic, which is defined by into attribute, and in operator replace the destination graphic. Now I'm going to use another operator, which is out. After I set this file, you can see the result. The parts of the source graphic defined by in attribute that fall outside the destination graphing, define in into attribute. Basically, drop the circle area from the star, and then I'm going to use another value, which is a top. After set this file, you can see the result and you can see the effects. Next, I'm going to use another value ZR. After set this file, you can see the result. These operations are pretty similar with Adobe Illustrator Pathfinder. That's why I start this tutorial with Ado V Illustrator to give you the idea what kind of operation we are going to conduct. Our next value is lighter. I'm going to replace ZR with er. After set this file, you can see the result. Now we have one operator remaining, which is arithmetic operator, and it's come with total four values, K, K two, K three, and K four. Here, I'm going to use arithmetic. Then we need to pass the four values. First, I'm going to pass K. K equal to inside the double code, I'm going to pass 0.1. Then I'm going to pass K, K equal to 0.2. Then I'm going to pass, K three equal to 0.3. And last, I'm going to pass K. K four equal to 0.4. Up to set this file, you can see the result. This is what we can do using if you composite primitive. I hope now it's clear for you how we can use this one. So thanks for watching this video. Stay tuned for the next primitive. 40. SVG feConvolveMatrix Filter: Hello, guys, it's good to see you back. Once again, I'm back with another tutorial related SVG filter primitives. And in this tutorial, we are going to learn AI convolve matrix. AE convolve matrix is an SVG filter primitive that allow you to perform A two D convolution operation on an input image. This operation involves combining each pixel in the image with its surrounding niorsUsing a carnal matrix to produce a new pixel value. And if I talk about it attributes, its gaialten attribute. In what kernel matrix, divisor, bias, targex target Y, H mode, preserved Alpha, kernel unit length, et cetera. Now let's talk about the syntax. A convolve matrix, and these are the attributes we need to use in this syntax. We don't need to use all the attribute at once. According to our needs, we can use these attributes. If I talk about these attributes, our first attribute is in its store input for the given primitive. Our second attribute is order. It tests the size of the matrix to be used by the filter element. By default, it is three by three. Then come erneel matrix. It defined the list of numbers that from the Kernel matrix. The kernel is a simple edge detection filter, known as Svaloperator for detecting vertical edges. Our next attribute is divisor. It is defined the sum of values of the kernel matrix. By default, it is set to one. Our next attribute is bias. I set the range of the filter. By default, it's set to zero. Then we have target X and target Y. Now let's start the practical. First, I'm going to apply this attribute Kernel matrix. Let's jump into the visal studio code. So as you can see, side by side, I open my Visual Studio code editor and my browser using live server extension, and I already create an TML document named index dot HTML. So in our body tag, we have a Wig tag, and here we say with 100% and height and height 400. And then we have Diptag inside this dip tag, we are going to create the filter. But before I create the filter, let's explain what we did here. First, we use a react tag. So as you can see in this react tag, we set with 500 and height 300 and here we say stroke color, and also we say fill color dark green. And then we use group element. And in this group element, we put in text, hello world. And here I said, form size 34 pixel and font family Vardana. And as you can see, our text color is white color. He we use a hexa value. Now let's create the filter and try to see what it physically going to return. So you said this deep tag, I'm going to type filter tag. Then I'm going to set an ID to this filter, ID equal to convolve. Then inside the filter tag, I'm going to use the primitive, which is FE convolve matrix. So ty FE convolve matrix. I think I did some spelling mistake. It's AI, it should be AV not FR. Then close this tag. Then inside this, if you confirm matrix, I'm going to use a attribute which is carnal matrix equal to and have to pass values, some carnal values. And by default, as I told you, our carnal matrix going to take 33 grid value, 33 grid structure value. Let me show you how in our first row, I'm going to pass one space five, space minus one. Then in our second row, I'm going to pass minus one space zero, space four. Then in our third row, I'm going to pass zero, space zero and minus one. The first row of cardinal matrix is 15 minus one. This value corresponded to the weights used for the first row of pixel in the convolution operation. The second row value is minus one, zero and four. These are weights of the second row pixel. Basically, we are going to perform some pixel manipulating using this primitive. This one is very advanced level primitive, even I don't have proper knowledge about it and the third row representing the weightage for the third row of pixel. And now I'm going to apply this filter in my react tag, and the text. Here, I'm going to use the filter attribute. Filter equal to inside the double codes, I'm going to pass the URL, URL, then inside the round presses, hashtag, I'm going to pass this ID. Also, I'm going to call the same filter in my text. So I'm going to copy the filter section and in my text tag, after Y value, after Y attribute, I'm going to paste this filter. I'm going to call this filter. If I set this file, you can see the result. Now, if you look at carefully in my text, as you can see, it reduces the sharpness of these text. It looks like our text is shaking. Also it effect in my rectangle shape. It would be more clear if I reduce the font size. If I make it ten pixel and then serve this file, you can see the result. Now you can see now you can see it destroyed the pixel of this text. This is what we can do with this filter. Now, let's add an image and try to apply this filter to this image. After group tag, I'm going to paste the image source code. I already copy the code from our previous tutorial. Then I'm going to remove this URL ID. I'm going to set this file. After I set this file, you can see the result. This is our image. Now if I apply this filter to this image, so I'm going to copy this filter ID, and here I'm going to use Haztexine and then paste the code and then paste the ID name. After step this file, if you notice it effect our image a little bit. Let's play with the values. I'm going to change the values, Kernel matrix. First, I'm going to pass in our first row minus seven. Our next value is minus, I'm going to make it minus ten, and the third value is, I'm going to make it -15. Then in our second row, I'm going to start with minus ten. Then our next value is also ten. Then our third column value is minus one. For the third column, I'm going to remain it same. After step this file, let's see what it going to return. After step this file, now it's more clear for you. After change the value, now you can see it little bit blur our image. Each value in the Kernel matrix effects how the convulsion operation combine the input pixel values to produce the output pixel values. If I pass positive values, then it enhance the features negative values while negative values may surpass them. The center pixel of carnal matrix basically multiply with the surrounding pixels and it creates a new pixel and then it return the pixel. Just you need to keep in mind, SVG filter I convolve matrix can be quite powerful, but it may require some experiment to achieve the desire effect. This is it for this tutorial. I hope I can give you the little introduction how we can use AI Convol matrix filter. Thanks for watching this video, stay tuned for the next tutorial. 41. SVG feDiffuseLighting Filter: Hello, guys. It's good to see you back. Once again, I'm back with another tutorial related VG filter. And in this tutorial, we are going to learn this primitive, A diffuse lighting. Diffuse lighting filter primitive likes an image using Alpha channel as a bump map. Using diffuse lighting, the side of the object facing the light are brighter and the sight facing away are darker and in shadow. And with diffuse lighting, we are going to learn three other primitive, I distance light, if point light, and I spotlight. And also we need if composite primitive. Together using this privative, we can create different light effect, distance light, point light, spotlight, et cetera. Now let's talk about some attributes. These are the attributes that we need with diffused lighting in surface scale, diffuse constant, kernel length, kernel unit length, et cetera. The in attribute identify input for the given filter primitive. Our next attribute is surface scale. I represent the height of the surface. Its value is multiplied by the Alpha value. Default value is one. Next attribute is diffuse content. It is a non negative number, whose default value is one, and then we have Kernel unit length. It tells the intended distance between successive columns. Let's start the practical and see how we can apply it. As you can see, side by side, I open my studio code editor and my browser using LipserEtension, and I already create an TML document named index dot tamal. So in our body tag, we have a VG tag, and in this VG tag, at first, we set up a canvas, and our canvas varies 440 pixel and height is 140 pixel. Then I create a circle and our circle color is green, and I type no light because in this circle, I'm not going to apply any light. Then I create another circle. This is the circle where I'm going to apply the lighting. Then I create a filter and set an ID, light me one. For now, my filter is empty, and there, I'm going to apply AI point light. So we need to use this primitive, I point light, with AI diffuse lighting. At first, inside this filter tag, I'm going to create a diffuse lighting primitive. SamotieFE diffuse was lighting, and then I'm going to use some attributes. Here I'm going to type in in equal to inside the double codes. As I told you, this in input identifies input for the given filter primitive. I'm going to identify it as a source graphic. Then our next attribute is result. Result equal to inside the double codes, I'm going to use light. Third, we need to pass another attribute called lighting color. Lighting color. Lighting color equal to white. Or I'm going to set this file. Then inside this primitive, we need to use another primitive, which is AE, point light primitive. I'm going to use this primitive hemotypFEPoint light. Sorry, we don't need this closing tie. And then we need to pass some attribute. First, we need to pass XX is value. X equal to 150. Then we need to pass YX is value. Y equal to 60. This is going to define point light source. Also, we need to pass Z is. He type Z equal to 20. And now we need to use AE composite primitive. This is going to combine original graphic with the lighting effect. Let me show you how. So here, I'm going to type SE composite. Again, we don't need this closing tang. Then we need to pass some attributes. So here, I'm going to pass some attribute. Our first attribute is in attribute. I equal to here I'm going to pass source graphic. Source graphic is our original graphic, so I'm going to copy source graphic. Then we need to pass another attribute which is called, which is N two. It equal to, here we need to pass again source graphi which is light. Then we need to pass operator, operator, and we are going to use arithmetic operators. Operator equal to arithmetic. And now we need to pass K, K, K three, and Kour value to ensure that the original graphics is combined in a way that preserve its original appearance while applying the lighting effect. As I told you to combine it, we need to pass four value K equal to inside the double codes one. Then I duplicate this line, our next value is K two. And K two equal to zero. Then I duplicate it again, K three also equal to zero. Then I duplicate it again and K four equal to zero, and I'm going to sub this file. Now I'm going to apply this filter in this circle. For that, we are going to use its ID name. Light me one. So inside the IRL, I'm going to use haste sign and then I'm going to paste the ID name, Light me one. If I set this file, you can see the effect. This is what a point light look like. Now create another lighting effect, which is distance light, a distance light. Here, I'm going to type a comment. The light source is a a distance light element, and I'm going to create the AI distance light. I'm going to copy this section and paste it here. At first, I'm going to replace this name. A point to a distance light. Then just we need to replace this privity. A point light with distance light, and next, we need to use some attributes. Our first attribute name is first attribute I'm going to use is AzemaT sumo type az I AUT H. AzemaT equal to is at the double codes. I'm going to pass 214. Now, what is the usage of this attribute? It specify the direction angle of the light source in the XXsplne. Basically, it specified direction angle of light. Next, hering to pass another attribute, elevation. Elevation equal to 20. Basically, it specified the angle of the light source above the XY plane. Also, we need to change the filter riding. I'm going to replace Light M one with Light M two. Then I'm going to apply this filter in this circle. Before I set this file, let's zoom out this page. Then I'm going to set this file. After set this file, Ops is overlap with each other. We need to change the position. Here, I'm going to make it 28280 pixel, and I'm going to set this file. Also, we need to move this circle. Here, also I'm going to pass CX Value to 80 pixel. After set this file, you can see the result. You can see this is how it's. Now, let's create the lust light effect, which is A spotlight. We already create point light, distance light, and now we're going to create AI spotlight. Again, I'm going to copy this section and I'm going to paste it here. At first, I'm going to change the position of this text. Here I'm going to move it up to 390. Then also, I'm going to move the circle at xx direction 390 pixel. Then I'm going to replace the ID of this filter. I'm going to replace Light M two with Light M three. Also, I'm going to replace it here. Then I replace the text, FI distance light with FI spotlight. Next, inset DFE diffuse lighting filter, I want to remove this primitive. I don't need this primitive now. This time we need to use another primitive called F Spotlight. Then inside this primitive, we need to pass some attributes. First, we need to pass XX is attribute, YX is attribute and Zadixs attribute. XX is equal to three, 60. Then we need to pass YX. Yx is equal to here we need to five, and for Xerxes, equal to, I'm going to pass 30. And then I'm going to pass another attribute called limiting cone angle, limiting co angle equal and I'm going to pass 20 degree. Basically, it's defined the cone angle that limits the spread of the spotlight. Next, we need to pass three other attributes, which is point at x equal to 390. Then we need to pass to duplicate this line, point at Y. Point at Y equal to 80. Next, I'm going to pass point at Z. Again, I duplicate this line and I'm going to replace X with Y with Z. We need to make it capital otherwise it's not going to work, so I'm going to pass capital later and pointed z equal to zero. Basically, these three values specify the target point that the spotlight is detected at. If I set this file, here you can see the result. This is what it creates after using this spotlight. Our first circle appears with no light effect. Our second circle diffuse lighting effect using a point light and giving it a three d dimensional in our third circle, we use distres light, and it's going to provide it uniform three dimensional and in our fourth circle, we use spotlight and it focus and it provide focus three dimensional look with more dramatic lighting effect. To use other lighting effects, we use AI diffuse lighting primitive. This is it for this tutorial. Thanks for watching this video, Sytune for the next tutorial. 42. SVG feDisplacementMap Filter: Hello, guys. Good to see you back. Once again, I'm back with a new tutorial about a Vigi primitive. And in this tutorial, we're going to learn a new primitive, which is AI displacement map. It is the most popular and useful privative in Swig filters. This filter privative in SVG is used to create a displacement effect on an image by using the pixel values from a displacement map image. This effect can distort an image in various ways, such as such as creating ripple effects or shifting parts of the image based on another image's pixel value. And if I talk about its syntax, it looks like that. First, we need to type A displacement map, and then we need to use this attribute in. Here we need to provide the source duping. Then we have another attribute in two, and here we need to pass the displacement map image. Then we have scale, and here we need to pass scale value. Then we have X channel selector and Y channel selector attribute. As I told you, it takes total two input to create one result. The image contained to displace specify NA into attribute, and in our in attribute, we defined which displacement effect we are going to apply. And in our scale attribute, we define the amount of displacement. Higher values result in a more pronounced effect, and this attribute is used to XXs displacement. Here we can use one of the value. We can use R value, red value, green value, otherwise, blue value. Also, we can use Alpha value. In the same way, we have YXS displacement, and to make the concept more clear, let's start the practical. So as you can see side by side, I open my visual studio code editor and my browser using if server extension, and I already create an estimate document. For now, our document is completely blank. So inside our body tag, first I'm going to take a Igitad a VG. Then I close this tag. At first, we need to define SVG with height and Vevox area. So to type with equal to 200. Also, I'm going to take height equal to also 200. Then I'm going to take another attribute, which is view boox. View works equal inside the double codes. First, we need to provide Z x is zero, YX is zero, then we need to provide the area. I want to pass 220 by 220. Then inside this SVG tag, first, I'm going to create a circle. To create this circle, as you know, we need to provide some attributes, and our first attribute is CX, Cx equal to inside the double codes hundred. Our next value is CY, CY equal to hundred. Inside the double coat hundred. Then, and then I'm going to provide stroke color to this circle, stroke stroke equal to, and I want to use green color. And I motoset this file. After set this file, as you can see, we don't have any circle in my browser because we forgot to provide radius. So Hemotype are equal to he said the Dole codes hundred. And I'm going to set this file. After set this file, here you can see the result. As you know, by default, SVG fill our element with black color. And now it's time to create the filter. So here I'm going to type filter tag. I'm going to assign an ID to this filter, ID equal to, and our ID name is DisppendFlter. And now I want to apply this filter in my circle. To apply it, as you know, we need to use style tag. Style equal to I'm going to use filter property. So the doll coats, Hemotype filtered. Filter Colon, URL. Then inside the Dual code, we need to pass the ID of this filter, has tag, and our filter name is displacement filter. If I set this file, it's going to disappear our circle. So after set this file, as you can see, it disappear our circle. Then inside this filter tag, I'm going to create the primitive. And our primitive name is AI displacement MX. I'm going to pro this tag. Then inside this primitive, I'm going to use the attributes. First, I'm going to use into attribute in two. For now, I'm going to leave it black. Then I'm going to use in attribute in here I'm going to pass source rape. So inside the double codes, I'm going to pass source rape. Then we need to use scale attribute. Scale equal to inside the double goes, I'm going to pass 50 scale value 50. With this, we need to pass two other attribute X channel selector and hte channel selector. Soto type, channel selector. X channel selector equal to, and I'm going to use R profile Rul pass R in capital. Then I'm going to duplicate this section. So copy it and paste it here, and here I'm going to pass Y channel selector. And this time I'm going to pass BV. If I set this file, nothing is going to happen. Basically just it, scale this circle, nothing happened too much. As I told you, using in attribute, we can specify the input image, and our input image is this circle. But in our into attribute, we need to pass the displacement map image. Whose pixel values are going to use to modify the input image. So here I'm going to use another primitive, which going to modify the source image. So another primitive I'm going to use, which is turbulence, AE turvulens. Before the displacement map, I'm going to type FE turvulens. Also, we need to provide some attribute to the primitive. First, we need to declare the type T equal to is the double codes turvulens LENC not ANC. Don't worry. We are going to learn AI turbulence primitive in our upcoming tutorial. In this tutorial, we just focus on AI displacement map. So the next attribute I'm going to pass, which is base frequency. Best frequency equal to inside the double codes, I'm going to pass one. And the next attribute I'm going to pass, which is num optics and num optics equal to Istide the double codes, I'm going to pass two. And the last attribute we need to pass in a turvulens is result. Result equal to and helm to pass turvulens. And now we need to link this primitive. We need to link I primitive with displacement map using into attribute. So here, I'm going to pass turbulence. And I'm going to set this file. Utter set this file, here you can see the result. This is what it creates Utter Ap DFI turbulence effect in II displacement map. As I told you, it takes total two inputs to create one result. Let me show you another example with real image. So if I show you my current working direct crit, there is an image name one dot JPG. So I'm going to use this image. So here, I'm going to link the image. And I already applied this filter. And before I set this file, I'm going to change the WIG image week. And also, I'm going to comment out this circle. I don't need this circle for this example. And this time, I'm going to make AWG WD is 500 pixel and height is 333 pixel. Also, we need to define it in our view work area. So here I want to pass 500 and for height, I'm going to pass 333, and I'm going to set this file. After set this file, as you can see, it's not working. So at first, I'm going to change the base frequency value from the A turbulence. I'm going to make it 0.05. Let's certify and see is it what proper or not. Yes, after set this file, as you can see, it starts working. We can manipulate the diment using base frequency value, num optics value, let me show you. So if I change the num optics value, so I'm going to make it three and then set this file, you can see little changes. Then I'm going to change the scale value. If I make it 200, let's see, and set the file. As you can see, this is what it return. So for now, I'm going to make it 50. With that, if I change one of the channel, suppose Y channel selector, I'm going to use green value, G. This at this file, you can see the different result. So you need to experiment with that to get the different result. So this is how we can use Disperspon map. Using displacement map, we can create various wavy effect in our elements. And don't worry. We are going to create animation project using this filter. I hope now this primitive is clear for you. Thanks for watching this video. Stay tuned for the next tutorial. 43. SVG feTurbulence Filter: Hello, guys, good to see you back. Once again, I'm back with a new tutorial related SVG filter primitive. And in this tutorial, we are good to learn AI turbulence primitive. The AI turbulence AVG filtered generate noise, which is helpful in simulating several natural phenomena like clouds, fire and smoke and generating complex texture like marvel or granite. And the noise can be used to distort image and text. Purlin turbulence function is used to generate purlin noise. Most of the amazing VG filters made with this privity, I turvulns. Using it, we can create fire, smoke, any complex texture, et cetera. And if I talk about its syntic first to type A turvulens then on to use attributes. Type attribute, best frequency attribute, num octave attributes, CT attribute and slitch tiles. Now, let's talk about this attribute. What can we do with this attribute? Our first attribute is type attribute. It come with two value, ravulens otherwise fractal noise, and the default value is turbulence. Then come brisk frequency. Its effect, the size, and the grain of generated noise. Default value is zero, then we have numb octaves. It defines the frequency or details of noise, and its default value is one. Then we have. It provides a different starting number for the random function. Last, we have stitch tiles. It is used to create a stitching effect when you have two adjacent areas of noise. It defines the behavior of piling noise at the border and corners. So it come into all five different attributes. So let's start the practical and see how we can use this attribute. So as you can see, side by side, I open my visual studio code editor and my browser using if server extension, and I already created an TML document name index dot HTML. So as you can see in our body tag, we have a WG tag, and inside this AUG, we set height 200 pixel and 200. Then inside the deep stag, we create a filter, filter ID, turvulens filter. Then inside this filter, Hero use Fitervuls privity. We use type attribute, base fgency attribute, num octaives attribute and set attribute, but we do not provide any value to the attribute. Then we have a react tag. We have a rectangle tag. Here we say with 200 pixel and height 200 pixel. It's a square box, and as you can see, it filled with red color. At first, I'm going to apply this filter in this rectangle. So here I use filter attribute, and I'm going to copy this ID. Then I'm going to type URL. Then I set the rounddresses. We need to use the astec sign and we need to pass the ID. And if I set this file, as you can see, it hide our rectangle element. Then one by one, I'm going to add attribute values. First, I'm going to provide type value, type. As I told you, it come with two value turvulns and factional noise. Tarvulens is the default value, so I would like to go with factional noise. Then we have base frequency. The default value of base frequency attribute is zero. But here I'm going to use little amount of base frequency, which is 0.05. Next, we have num octaives. As I told you, the default value of num octave is one. But here, I'm going to pass three. At last we have C, and here I'm going to pass two. If I set this file, you can see the result. This is what it creates. Here it creates a little cloudy, noisy and smoky effect. And if I change the values little wet, you can see the different result. Suppose here I'm going to change the base frequency value. I'm going to use 0.5, not 05, and then set this file, you can see the base frequency result. At the same, if I change the num Octive value, three, two, five, and sets value three, and set this file, here you can identify little changes. So for now, I'm going to set base frequency 0.05. And you can see the result. And if I use the default tight value Tarvles so to replace factual noise with Tarvles and then at this file, you can see the result. This is what it creates. As I told you, most of the time we use this primitive with another primitive, which is a fee displacement map, and we already learn about it in our previous tutorial. So if I call another primitive, AI displacement map and set num Optics value two, and CT value five and the this file, you can see the result. I'm not going to explain you how we can use AI displacement map because I already covered it in our previous tutorial. In this tutorial, I just try to focus on AI turbulence only. So this is how we can use this primitive. And if you want different results, then you need to experiment with this value. So I hope now it's learn for you how we can use AF turbulence. Thanks for watching this video, Stay tuned for the next tutorial.