Learn SVG From Scratch and Create Awesome SVG Animations | Safak Kocaoglu | Skillshare

Playback Speed

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

Learn SVG From Scratch and Create Awesome SVG Animations

teacher avatar Safak Kocaoglu, Computer Engineer. Front-end Developer.

Watch this class and thousands more

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

Watch this class and thousands more

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

Lessons in This Class

33 Lessons (3h 56m)
    • 1. Introduction

    • 2. What is SVG?

    • 3. Why You Should Use SVG?

    • 4. Installation Tools

    • 5. Your first SVG

    • 6. How to style SVG?

    • 7. Drawing SVG using Figma

    • 8. Create a Pizza using SVG

    • 9. SVG Dash Array and Dash Offset

    • 10. CSS Transforms

    • 11. CSS Transitions

    • 12. CSS Animations and Keyframes

    • 13. Creating a SVG Button Animation

    • 14. Creating a SVG Logo Animation

    • 15. Creating a SVG Loading Animation

    • 16. SVG Handwritten Signature Animation

    • 17. Drawing a shape in Figma

    • 18. Adding Text in SVG

    • 19. Animating SVG with CSS

    • 20. Adding Icons to Project

    • 21. Editing Social Media Icons

    • 22. Animating Social Media Icons

    • 23. Transforming Icons for Animation

    • 24. Editing Complex SVG in Figma

    • 25. Animating SVG Spaceship

    • 26. Animating SVG Character

    • 27. Reshaping and Animating a Character

    • 28. Envelope Project Introduction

    • 29. Drawing Envelope in Figma

    • 30. Animating Envelope SVG

    • 31. SVG Menu Introduction

    • 32. Creating SVG Menu Elements

    • 33. Animating SVG Menu Elements

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

Community Generated

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





About This Class

If you are a developer or a designer and want to improve your visual skills, here is a creative SVG class for you. Nowadays, it's not possible to impress someone by creating boring regular web pages and applications. All you need to do is adding some creative animations to your website. And using SVGs is the best and the easiest way to create your own drawings and animate them on your web applications.

In this class, you are gonna create incredible vectors by using a free design tool which is called Figma. After that, we will dive into CSS animations and learn how to animate elements, how to use transform, transitions, and keyframes. And finally, we are gonna create our own projects and learn about advanced techniques of SVG animations.

And after this course, you will be able to draw and animate your own icons, shapes, and vectors. And you will be more confident in front-end development.

Meet Your Teacher

Teacher Profile Image

Safak Kocaoglu

Computer Engineer. Front-end Developer.


Hello, I'm Safak. Here are a few things you might need to know :)

I am a full-stack web developer has 5 years of experience. My job is creating well-designed interactive web and mobile applications and sharing my experiences with the students. If you are interested in web design,  web animation, front-end development, and creating useful web APIs, I recommend you to check my courses out. 

See full profile

Class Ratings

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

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

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

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


1. Introduction: Hi there. If you're a developer or a designer and want to improve your visual skills, this course is perfect match for you. Nowadays, it's not possible to impress someone by creating, pouring curricular webpages and applications. It's not the 20 tens anymore and uses really care about visualization. And using SVG is the best and easiest way to create your own drawings and animate them on your web application. In this course, we are going to be creating awesome real-world projects that will be an inspiration for your imagination. They are going to begin with the basics of the SVG. Learn how to create shapes using an HTML file and how to use SVG properties. And then you're going to see how easy to create incredible vectors by using a free design tool, which is called Figma. After that, we will dive into CSS animations and learn how to animate elements, have to use transforms, transitions, and keyframes. And finally, we are going to create our own projects and learn about advanced techniques of SVG animations. If you're a beginner at animations, Don't worry, everything in this course is from scratch. You don't have to know how to add CSS or JavaScript. The only prerequisite is understanding how HTML and CSS called SWACH. And after this course, you will be able to draw and animate your own icons, shapes, and vectors. And you will be more confident in from that development. Let's join this journey and learned something new today. I hope I will see you in the first lesson. 2. What is SVG?: Hello, welcome to the first lesson. I want to talk about SVG a little bit. Before starting. It's good to know what the SVG exactly is, how to use it and why to use it. Svg stands for Scalable Vector Graphics. Okay, We now the crop it. But what's the scalable vector? I hope to image here. One is the PNG file, and second one is the SVG file. I'm gonna move this into my Figma software. And don't worry, I will explain how to install this and use this program. It's not our concern right now. Okay. Let's make them same size. As you can see, I choose the PNG image. So I'm going to zoom in, zoom in, zoom, zoom. And now you can see there is deformation here. It's getting blur and colors are changing. Here is white gray, darker, gray, darker, and here is the same. So I'm going to SVG, I assume in some, in, as you can see, it's totally sharp. There is no blur. Now colors changing. You can zoom this in forever, it will be saved. And here is the same, really, really sharp that because SVG is a vector waste crappy. There is no certain size, there is no sizing cruel, and it gives us some advantages. Let's go to next lesson and discuss about them. 3. Why You Should Use SVG?: Svg has become a one-off two main graphic tool for developers. If you want to take, you can go and a big company's website and see how often they use SVG. I will go to Facebook. As you can see, it's sweetie. I'm going to tell better. Okay, they hide at this, but we can see from source Cut, see this icon is SVG and any other websites, they all use SVGs, but why we are using SVG files? Firstly, as I mentioned in the previous lesson, it's scalable vector graphics. We can zoom in or out. No matter how much you zoom in or out, it will be always sharp. That's the first advantage and the huge advantage. And the second one, they are per XML and you want to use really sharp peaks in your Kurt, use them PNG or any other files can be a little bit expensive imaging, you'll have a website and in this side there are maybe 20, maybe 30 images. And with every new request, you have to call them from your server or any other URL. But when you use SVG is just a XML code. User browser reads this and creates an image. Now request, no waiting. It's on the screen immediately. And the third one, they are editable. But I mean by that, imagine you saw a beautiful graphic on the Internet and downloaded it. But you decided subparts of the scrappy didn't suite on your design, or you want to remove this part or change the color or whatever. If this file is JPEG or PNG, usual, open the Photoshop, try to correct them. If you are not professional, you will have some problems. You have to use some masks, some techniques, color them again. But with the SVG file, you can open the file with Figma and say, Okay, I don't want this part. Climate change, this color, move this item here, rotate this one. It's dead easy. We will do a lot of examples in the future. Don't worry, you will draw everything. You will create your own SVG file. And number four, it's animatable and this is the best part of the SVG is I mentioned how easy we can edit them so we can use it as an animation also, we can change color. We can move them, rotate, timescale them just by using CSS. And it's the huge opportunity create an interactive webpages and call your customer's attention. So in this lesson, we'll learn how awesome as VGS and why we should use it. And I am so excited to get started with coding and see what we can create SVG files if you feel same, Let's jump into the next lesson. 4. Installation Tools: Before starting coding or drawing SVGs, we need some softwares, and one of them is the Figma. And I know most of you know about 50k or VSCode, bad powder, others, I want to make this lesson. I will explain you how to install these softwares, have to use them. If you want to skip, you can go to the next lesson. And for the others, I came to figma.com, as you can see is our drawing and editing SVG tool. So I will come here and say download two options here. I will say for a Windows because I have Windows and I'm downloading as we are waiting this, I can go to Google again and right here we ask out and the first result. Okay, this is our code editor. It's really popular, It's really useful. It has tons of useful plugins. I highly recommend to use it. Of course, you can use any other code editors. You can even use Notepad or something that you can download it. I will download for Windows. I will stop the recording and I'll see you in the installation. Okay, I'm clicking Figma setup. And it will take just a couple seconds because it's web browser-based software. Okay, That's all. To use Figma, you have to connect your account. You can log in here or create one. I will login. Okay, is our welcome page. So I'm going to ask out. I will say install. Okay. And that's all. I will launch this program also. And we can see the welcome page. Perfect. So in this lesson, we installed two amazing tools for SVG, and we also completed our first section. From now on, we'll start with basics of SVG saw. Let's go to the next lesson. I will see you there. 5. Your first SVG: Hello, Welcome to the second section. So we're going to be learning how to create SVG files in the HTML code. I opened my basket. And I'm going to create here index HTML. I will write here dark and enter the top button. And we created our first HTML. So I will change the title first as we recurse. Let's say here hello and see with our live server. Okay, it works. So I will create here SVG. I opened as VG attack. And they will say with pixels and the height at 1000 pixels, It's our first SVG and I will create the rectangle. To do that, I will write here pack and closing here. And Firstly, I should indicate my starting point. As you know, we have two dimensions screen and we have x and y axis. So I will choose a point from there. I will say X 50, it means is 50 pixels from left. And why 50 pixels? It means is 50 pixels from the top. So it's somewhere like here. It's the our starting point. And after that, I will say my width of 100 pixels and a height of 100 pixels. I will save this. And ta-da, it's our first shape. And size is a 100 pixels go. And for the first shape, it was easy to understand IT, but you might be a little bit confused after all of those shapes. So I prepared a new HTML file. I named it as agreed. And I draw some axis here for x and y axis. And in the CSS file, I position all of this. So we will see right now and I will explain clearly, let's say or Boom. Okay. As you can see, we have a credit system here. Every greets pace is 50 pixels that you can see here, 50 pixels, here, 50 B cells here, 50 pixels, all of them. You're here. And we will position our shapes on the discrete system and you are going to be understanding our routine clearly. Okay, I created SVG again, and I will create a rectangle. And this rectangle, I'm going to choose this point. As you can see, it's three unit from the left and two unit from the top, which means x is a 150 pixels, and y is a 100 pixels. And I will say with 100 pixels and a height of 100 pixels again. And as you can see, that 50 pixels, 100 pixels and our sizes bounded pixels. And right now you can see better, I think. So I will change here. I will save 50 pixels and 50 pixels. And right now I will close this and let's create a circle. I will create a circle tag. And for circle also we will choose our points, but it will be our center of the circle, so center X. So let's choose 1234. So it will be 200 pixels. Don't forget, aerospace size is 50 pixels. So far, center y, it will be 200. And also here, here, here, and it will be this point. And I'm going to choose my radius. I will save 50 pixels. And out circle is ready. It starts from 200 pixels to a 100 pixels. And our radius is 50 pixels. I will decrease the radius, and it will be smaller. I will increase. As you can see, it's really easy. Okay, let's create an ellipse, and we'll say ellipse. And again, our CX center of x will be 300. For y it will be 300. And radius eggs right now, because it's not circle, it's an ellipse. We have two radius, it will be a 100 pixels and for Y, 50 pixels. Okay, as you can see, is 300. I'm trying to explain every time because it's our first lesson. So from here to here also, and here is our center and our x, our x radius is a 100, 1212, as you can see, it's a 100 for why our radius is 50 pixels, as you can see, 50, 50. So I'm going to create something different. It's called polygon. I will write your polygon and close this tag. And what is polygon does? It creates any other shapes. We can choose more than two points and we can connect them and we can create something different. So I will say here points. And our starting point will be a hundred, four hundred thrifty. So it will be 123456789 here and 1, 2, it will be here, our starting point. And for second, I gave a space and right here to a 100 and 450. So it will be it was a hundred and fifty, two hundred four. It will connect these two points, but we need one more point. So it's going to be here. So I will say a hundred and fifty and five hundred. I will say it is. As you can see, I created at triangle. If I say here 600, it all go there. A 100, it's going to go there. Let's take this back. And polygon is like that. Let's go to next one which is lied. I open at line tag and close it. And I will say our first x point. So it will be 300 and Y1, it's going to be 50. And I will choose second. And the SVG, you will connect that. And 2, 3, 4, 5, 6, and 1. It's going to be this point. And I'm going to create something like that. It's going to be this point. So I will say here X2, 400 and Y2 going to be a 100. If I save this, we can't see anything because it's just the line. There is no size. So we can't see it because we can't give any color inside this because there is no insight, there is no size. So what I have to do is queuing a truck here, I will say a stroke. So it's going to be blue. And right now we can see our line. If I say a red clover like that, I can make this longer. So I think you understood the point. How to create shapes, rectangles, circles, ellipse, polygons, line, and for this lesson, it's enough lighting. Let's go to the next lesson. I'll see you there. 6. How to style SVG?: Okay, previous lesson, we created this awesome shapes and we are going to play around these shapes. But before starting, I will go to Extensions. And I want you to install this awesome extension here, SVG, it allows us to write our styles are SVG, units are properties and values easier. So let's go to our grid system and you will understand right now what I mean. As you can't see it's black. And one, I give you another color for this rectangle. As you know, we are doing with background color in this CSS about for SVGs is a little bit different. I'm going to say here if hill. So I'm going to write my color and right now my shape is read. As you remember, we gave a stroke for a line and I will do the same thing for the circle stroke. It's going to be blue. And right now we have a border here, but we can see because of the black color and I will say fill none. I don't want to add a color insight. So we have on this truck right now. And I can arrange this width of the stroke. I can say stroke width is five pixels, 25 pixels, something like this. And for the ellipse, color is going to be, let's say orange. And at the same time, I will give a stroke which is black. Goo. And for polygon right here, I will give an opacity. If I say 0, it will be disappear. If I say one, it will be totally appeared. If I say something between 0.5, it's going to be a little bit transparent like this. And for the line, I will give you again a stroke width. I will say 10 pixels. Cool. And apart from these, all these shapes, we have a path. But I will explain you later because it's not efficient to write path manually. We will do this all the time, power drawing something in Figma. So that's all for this lesson. 7. Drawing SVG using Figma: And in the previous lessons, we draw our shapes in the HTML file. But right now let's try to freak my, I will open our software and here you can see your last works. I will remove this one. We don't need this anymore. This plus button, and we open a new project. And this project, it's our working area. And here we have some properties that we can change our items. And here we have assets and layers. So I will click this. This is our frame tool. And I can create any frame here and there are some templates here. You can choose an often for iPhone element. As you can see. For desktop and Surface Book, as you can see, a size are here, except is I will create something manually. I just created a custom frame. You can arrange your width and height here. I will say for 100 pixels and for a 100 pixels. And I'm going to zoom in and move vertically. And I will send to this in this work area, you can move this for m anywhere you want. So this is our frame tool. Go here and say rectangle, I will create a rectangle. You can choose it and there's a fill here. You can choose any color like this. And click this again. You can use some border here, corner radius. As you can see, I will just scroll this. And as you can see, we have bird to read this. And I can arrange this sizes here. And let's create a line. It's that easy. As you can see, it has just a stroke. You can increase this stroke here. That's all an arrow like that. For ellipse, I created light that I can make this circle. And that's all. If I click this icon, I will not see it anymore. But it's still there. If I click this minus button, I will delete this. So there is no feel anymore. So I'm going to add a stroke. As you can see black. We can change this, something like that. And I can play with this stroke width. Cool. You can create a polygon like that. There is a star here. Let's change the color and terrorism image here. We don't need this. Let's create something with a pen. I will just draw something is just like Photoshop and Illustrator. You can draw whatever you want. I made this shape. If I click here and say Band Tool, I can move my edges. I can move them like that. I can create something like that. It's a little bit weird, but okay. And I can give of course truck. I don't want a stroke. I will just add a fill. Color will be something like that. And we have a pencil tool. So you can draw something custom like that. And you can increase this with, Okay, let's create a text. I will say inside this one. I'm going to write here, hello, hello. And here we have text options. I chose my text and I will increase font size. And I can change the color here. Perfect. So I'm gonna move this rectangle under the circle. It's under the circle, but I can move this above the ellipse, which is our circle. So right now we see our rectangle first. If I move this ellipse, oops, ellipse here. And right now we see ellipse first. So I can move this ellipse and rectangle, but I want to move them together. So what I'm going to do is choosing 10 of them and holding Shift button and choosing another one. Right now they're together. I choose two of them. And for this shape and hello text, I can move this and holding Shift button and choose these text. Right now they are together. So I can also choose them, as you can see here. If I say control and G buttons or Command and G buttons, they will be in the group. As you can see, they are inside the group, rectangle and circle. So whenever I click this shape, two of them will be chosen. I chose R group. Okay, let's do this shape and text also. I choose my shape and control G and its R group 2. I am moving time together and here I can click twice and rename it. I'm going to say we're cheap. And as a text and group 1, I will say circle and rectangle. It's really important to rename them because we are going to use them inside our index.HTML and we will see them as an ID. I can change the name here. I will say pencil for this, for example. So I want to export them. I will come here and choose here SVG. And there is an option here. I will say include ID, attribute. It's really crucial to use this button because we will use all of these names into our HTML file. I will click this and say Export untitled and export. I'm going to save this. And I'm going to come here. I will delete them. We don't need them anymore, and we have SVG file here. Let's move them inside our folder. So this is our SVG file. I will copy them and paste inside our body and our permit Live Server. And as you can see, are all items are here. And as you can see, all ideas are the same. Circle and rectangle, pencil, rectangle one. I can change any ID here. Why these ideas are important, because we can use them in our CSS file. For example, I will say here, rectangle. If it was a class, I will use dot, but it's an ID. So I will use this one. So let's say Phil. I will say yellow. So I changed my rectangles color right now. If I say plague is changing and I will give you an opportunity here, 0.5. As you can see, 0.1. And I can move this on the x axis, transform translate X ten pixels. As you can see, it's shifting to write to any pixels, something like that. So you can see how easy to use Figma SVG files in the index HTML, you can shape every single items inside your SVG file. So are we drew our shapes. Let's go to the second part and draw something better. 8. Create a Pizza using SVG: Right now let's create some ten can see something creative. I will create a frame again, 500 pixels. I will create a pizza. So far my pizza dough, I will use a circle like that. Let's resize them. 400. Okay. I will change the color. It will be something like real bread, pizza dough or something like that. Okay, It's not realistic, but okay. So I will rename this as a doll. And for inside, I'm going to create something with a pen here. Here. Something like that. Okay? And this is the part of the pizza which we can add any ingredients on it. Okay, I will choose this. As you remember, I click here and choose Band Tool, and I will reshape them. I will do something custom move like this. Here, like that. I didn't want to use another circle to use pen tool and it's more realistic IT. Okay. I'm done. I will choose this. I don't want any stroke. I will delete this and I will give you a color. I'm going to choose something like yellow or orange. Something like this is okay. I'm gonna make this a little bit bigger. I will center this, something like that. Okay, cool. I like it. So I'm going to rename this shape. I will say Enter. I want to add some ingredients. First of all, pepperoni. Let's give it a color, something like direct credit. I will make this bigger. Okay? And inside these pepperoni, I'm going to add some dots here like that. If you want to copy and paste this, you can do this with Control C, Control V or Command C, command V. But I will do this something different. I'm going to use Alt button and I will just move it like that. I will make this bigger. I choose, Oops, I choose this one. Halt and MODIS. Okay, Cool. As you can see, our dots are here. I will change this color. Oops, I choose this red one also. I just want to choose the small ones. And I will make them white. So I can rename them P circle. And for the small ones, I will make them a group. And I will rename this group as p dots. And I will choose this dots and circle, and I will group them again. Remember control or command G. And I will rename this pepperoni. So I can move this pepperoni as a group. So I will move this alt button and I will move like that here, here. Here, Here. Cole. After this lesson, I am going to order a pizza. It, it really looks nice. Okay. I will choose this all pepperoni and make them a group. And I will rename this as pepperoni is cool. So I will make our mushrooms. I choose circle or a rectangle. Now it's better I think. And this rectangle, I will give some corner powder, sorry, corner radius. And here I choose ellipse, like that. Maybe move here. I'll make this bigger and bigger. Okay, nice. So I will choose to halftime. I can say group, but there is one more thing I wanna show you. There is a Create component here. If you click this, these two items are a component right now. I can move this like a group. I will move this here and makes smaller and something like darker. And inside this island to put this. Okay, let's enter them. Good, so this is our mission. As you can see, we have two components. I will choose them and make a group. And I will rename this as a mushroom. So I will move this mushroom here and create coupled times. As you can see when I want to choose a mushroom, I choose in our item by mistake. To avoid that, you can go to enter and click this lock button. And four, same thing for tall. So even I click them, I can't move because I locked. Okay, Let's do one more. My shop here. Okay. Let's rotate this. So as you can see, when I want to change the size, all of them are changing because it's a component. I will rotate this year. Okay, I don't want to be a perfectionist that much. So I'm going to create a pepper here. I will give border-radius again. And color will be something dark green. So I will move inside and I will create a couple more times. At first, Let's make them a group. And say my shoes. Pepper. I will move this. I will play around the sizes here like that. Okay? I think I will make this paper's also and peppers, cool. We have a delicious pizza here. Let's export this. I choose SVG. Make sure this one is selected. Cool. Let's ex parte. Okay, I will come here and move to code editor. As you can see, our pizza is called right now. Our papers, all the single peppers. As you can see, they're named as a pepper. So what Figma does is changing these names as 2, 3, 4, something like that. I want to name them the same name. So I will choose all of this and delete these numbers, girl. So I'm going to copy this and paste inside my body. I will delete this first. Cool mushrooms. Our pepperoni is, you can choose all of this. And for example, come here and say, add pepperoni at mushroom, at pepper. And when you click them, you can add some ingredients or remote that you can do this something interactive. But I'm not gonna do this right now. Instead, I will give some styles in our CSS. Let's late this as a pepperoni is, if I say display none. As you can see, we don't have pepperoni anymore for mushrooms and for our peppers. And right now it's empty. As I said, let's assume that we have buttons and then we click, I will add peppers, and I collect my Zoom button. And I click pepperoni button. As you can see, something interactive. It's really a small example, but it's really useful. I just wanted to show you how useful SVG is, okay? And here we have p dots and circles and 0 member. And this P circles, same name. So Figma added some numbers. I manipulate these numbers. I will choose whole of this. I'm doing this with Control and D, By the way. I did that because I want to change something inside the circles. As you remember, it was red. If I say here, fill black and our pepperoni is our black right now, it's stretched out. Let's make this brown. So I want to add a capacity for mushrooms. And right now they are a little bit transparent. Loud. Can I change more? Let's go two papers. As you can see, there's a property called transform here, and we transform these items inside the SVG. We can do that inside our style CSS also. But when you do that in Figma, it automatically adds this transforms, Let's say paper here. And I will make them chili peppers, something like that. So if I say Transform, Translate Y and it will move on the y-axis like that. It's going to be really, really useful in our future projects. And for now, I hope you understood everything about Figma as wages and how we can change our styles in our style CSS. So in this lesson, it's enough. Let's go to next one and talk about SVG V box. 9. SVG Dash Array and Dash Offset: Okay, welcome back. After that VBox lesson, let's do something fun. I'm going to create here SVG with 500 pixels, height 500 pixels. And I will create a rectangle here. X 0, y, z. And sizes will be 300 pixels. Actually, let's make them a 100 pixels. Okay, we see better now. So I will delete this color now. I'm going to give it a stroke here. Truck with five pixels. And right now I'm going to give something new. Stroke, dash array. I will say 10 pixels. Stroke dash array gives a stroke which has some space around it. If I make this 15 lines and spaces, our beaker now, now it's Speaker. I will say a 100, and now lines are 100 pixels and spaces are 100 pixels. Also. I will make this to any pixels. And I'm going to write here stroke dash, offset, five pixels. Right now it moves from initial point. Let me show you It's 0 right now. And our point is here. I'm writing five pixels. And now it moves counterclockwise. I'm saying 10, and it moves more to any 25, 30. Let's take them back. When I write here minus. Now it shifts clockwise. More and more. It shifts like that. Let's increase here. Let's say 500 and here 0 and now, and now I will write here ten and increased slightly. As you can see, I created a manual animation. It will move like that, 200 to a 100. And imagine at the same time, we increase here. And as you can see, our line is getting longer. And now I'll delete this. I don't want to shift a 100 to a 100. Now be almost completed. And opposite animation at ten hundred, nine hundred eight hundred, six hundred. Like that. It's really useful. We are going to use it most of our projects. It's easy to use and allows us to animate our items painlessly. So after all these basics or SVG, I tinker rate to create something awesome. Let's rest a little bit and then get started with the CSS animations. 10. CSS Transforms: Hello, welcome to the first section. In this section we are going to be covering CSS animations at all points. It's not going to be in that section as it's not a CSS course. But we are going to be learning what exactly we need to make our SVG projects. If you want to learn while two-tail CSS animations, you can check my other course also. So after this information, Let's get started with the transformers. Transform our laughs you to reshape your items or move their positions. Let's create some examples. Between body tags. I'm going to create an item deal and style CSS here. And for these two, which will be a 100 pixels, height will be the same. And background color will be while it, or something softer. Okay, so I'm going to center this item. To do that. You can come here and say position absolute, top 0, left 0, bottom, and right 0. And then you say margin auto, it will be centered. And the other solution is, I'm going to delete them. And for our body, I'm going to say display flex, align items center, and justify our content center. It's the usage of two Flexbox. You can use either way. It depends on you. So let's get started. I'm going to come here and say Transform. Firstly, I'm going to choose translate X. And I'm going to write here a 100 pixels. As you can see, it shifts on the x-axis, a 100 pixels. It was like this. And if I say minus a 100 pixels, and right now it shifts to left. And four translate why? It moves on the y-axis. It goes down. Let's make this 0 first. And say minus 100 pixels. Right now it goes up. I can delete this y and indicate my x and y in this same for our slate. And now it's moving about access. If I say here 50 pixels, like that. I can use translate set also. I will say a 100 pixels. If I save this, we can see any changes. As you can see, I am deleting and adding again. Nothing has changed that because we can't see the z axis here. You don't have any perspective. To handle this. I am going to buddy. And I'm saying perspective, let's say 1000 pixels. And right now we can see it's morning. If I say 500 pixels, it's bigger. If I say 400 pixels, bigger, three hundred, two hundred. And right now it almost covers all the screen. This perspective indicates how close we are to this item. If I say a 120 pixels, that means we are a 120 pixels far from this item. If I increase this number, for example, 500, it means we are 500 pixels, five from this item. In other words, if I increase this item, we will see this item from far and we see these changes parallely. So in a nutshell, it allows us to see changes of two z axis. So I'm going to come here and open access HTML. I created this HTML file to see our axes properly. As you can see, there is a y axis, x axis, and z axis here. The Move, the item, it goes behind or front off to that axis. So I'm going to write the same thing here. Our styles still same. I added these properties here. It's not our concern right now. So I'm going to come here and say items again. So it's middle of the screen right now. I will come here and write translate X a 100 pixels. Translate phi a 100 pixels minus a 100 pixels. And for set, as you can see, it moves behind the z axis. Let's make that 0 first. And then to a 100 pixels. As you can see, it's bigger right now. Let's try to rotate. I will say 45 degrees. Right? Now our item rotates on the set axis, 0, 45. If I write here rotate set, nothing has changed because it's rotate set by default. If I comment this out and say rotate x, it's going to be rotating this axis, which means it will go to behind or in front of two z axis. As you can see, we can see any treaty affects here because we don't have any perspective. For 0. For 45, something is changing, but we can't see and the rotation. So I will change this perspective again. And right now we can see it's moving beyond to Z axis, which means it's rotating around x axis. If I say here, 55, it moves small, 65. And right now it's almost disappear. If I say 92 degrees, we can't see it because it's totally protected on the x-axis. And there is nothing to see. According to our perspective. I'm going to change the second phi 2 here, rotate y. But before let's make this 0 initial value and rotate by 45 degrees. And right now it rotates around the y axis, 55, 85, and 90, and it's the same. Let's take this back. If I say minus, it's going to rotate from another site. So rotate four looks like that. I'm going to write here, scale. For one is our default value. Nothing has changed. If I say here too, right now, it's two times bigger than normal size. For a TRE. It's three times speaker 4. And of course we can write here, let's say 2.52.8. I want to make this smaller. I say 0.9, right now it's small. 81, It's really small right now. You don't have to use the 0. You can delete it. It's exactly the same thing. And lots more is skew. I'm going to write here is Q x. I'm going to use decrease again. I'll say 30 degrees. And right now it's clearing on the x-axis. If I say minus, it will go the other side. I'm going to delete this and right skew why? As you can see, it's carrying on the y-axis, something like that. I don't indicate XOR y. I can write here for x 30 degrees and for y 30 degrees. And right now it's moving on the x and y-axis at the same time, 10. Let's make this a 100, something like that. And more or less, Transform works like that. So how we are going to use this? Let's delete this. And right here, item hover. I wrote here hover pseudo-class, and I will say transform rotate 45 degrees. And right now I'm animating like that. But there is a problem here. It's happening instantly. I want to make this more smooth and slowly. So how we are going to solve this problem? Let's go to next lesson and see this whole issue. 11. CSS Transitions: Okay, our item here, and in style CSS has you remember we have hover pseudo-class when we're Howard is item, it's rotating part instantly. So how am I going to solve this problem and give a transition? I'm going to come here and open index.html. I'm not going to use access HTML NMR. Okay? So I'm going to paste these properties here. I will give you them. Okay. Let's make time disappeared. So we have four properties here. As you can see, we have a transition right now, it's slower and it has some timing function here. So I'm going to explain these properties right now. First one, transition property. This is the property which we want to give a transition. As you can see here, it's transformed. Ran this item transforms. I will use this transition. If I say here. Something else, like opacity. For example. If I go there, opacity is moving instantly. If I write here opacity, right now, it's going slowly. So it's the name of our property. If I say here, again, rotate 45 degrees. It's working only for opacity. And I'm going to do is I will say comma transform. Right now. They are both working. I say here, all my, all properties work like that. Okay. I'm going to delete this for now. Let's explain second one, transition duration. You already get this item. It's just a duration, as you can see, 1 second. So it's going to be a faster like that. I can write here 0.50.1, much faster. Okay, let's make this 20 seconds again. And delay. If I write here for our example, 1 second, it will start after 1 second. As you can see, it's starting after 1 second. I will write here 0, or I can delete. This doesn't matter. So next one is transition timing function. We can consider this as our effect. If I do this linear, it's going to go with the same speed. I'm going to write here is. And right now at the beginning and the ending, it's going to be a little bit slower. I can write here is in I will make here 360 degrees. And right now, let's try again. Linear like this. No changing is Like that. Is in, when I hover, the beggining is slower and then speed up. If I write ease out, it's going to start faster. And at the anding, it's going to be slower. I can write ease in, out and at the beginning and ending will be much slower. And I can delete this all properties here. And right in the one-line, I will say transmission. And first our property name, I will say all duration is two seconds. I change u at 0 second, or I can delete this. It's not required Saj, All right, timing function is so it's exactly the same thing. So transmission works like that. But there is a one important part here. I will open again our axis layout. I wrote here, rotate x, as you remember, our perspective here, 500 pixels. So when I rotate this, it's rotating from the center. As you can see, the center of the item. I will write here transform origin. If I say top. So when I hold this, as you can see, top is at same place and the rotating starts from the top. It's not centered anymore. If I write here, bottom, the bottom will be steady. And it will rotating from the bottom. Here will not move. If I say center, as the default, the rotating starts from the center. I will write here rotate y. I will comment this out. It's by default for our kink like that. On the center. It's the same. So I want to do this on the left. I will write here left. So left side is steady. And starting from this point, I will write here, right? And right now, this point is steady and it starts from dried. So I'm going to write here rotate only. As you remember, it means rotate set. If I don't write entity, it rotates light that from the center. I can write here and is specific point, let's say top left. And it's rotating like that. Our initial point is here right now. So I want to do this here. We'll say bottom right. So it's going to start from bottom right. You can give any specific position. Time pixels, two pixels. And right now, it starts from ten pixels from x and 200 pixels from, why? Something 20 pixels here. As you can see, it's not left and top anymore. Okay, recovered also how to use transform origin. It's really important because sometimes they are using 3D animations and we have to change origin time to time. It's really important to use this, especially for SVGs, because we are going to be using transform origin all the time. So if you understood everything, Let's go to next lesson and learn about CSS animations. 12. CSS Animations and Keyframes: So let's talk about CSS animations. I'm going to paste this all properties here. And I will explain one by one. Okay? First one is animation name. It's the custom name that you can create and give your animation. But first, let's create keyframes. Before giving any animation. We are writing here keyframes. And after that, our name. And inside this, you can indicate any specific time. If you Right here from it means your starting point. And after that, you can indicate another time. I will say two, which means handoff the animation. Okay? I will say here, transform, translate X 0 pixel. It's my initial position. And coming here and pasting again and say a 100 pixels. Right now it's animated and it starts from 0 on the x-axis. And slightly, it's going to write a 100 pixels. If I say minus a 100, it starts from minus going chloride again. Okay, Let me explain other properties. We have animation duration here. It's our duration. I can increase or decrease this like that. 0.5, it will be faster. Let's make this 2 second. And I'm gonna give an animation delay. I wrote here 1 second. It means it will start after 1 second. I will write two seconds. It's going to wait two seconds and turn back. And we have animation timing function. We already learned about dysfunctions. Previous lesson is, is in, is out, it's slower at the ending. In, OUT. And one more thing I forgot to talk about class lesson. There is taps. I will write here five. So it's going to write in five steps. If I say too, like that. Let's make this linear again. And here we have our animation iteration count. It decides are many times we're playing this animation. By default, it's one. We can change this. Let's say two. As you can see, it placed twice, let's say tray. So it's going to play three times. If I write here infinite, it's going to narrow or stop at will work all the time. It's really efficient. And we have animation direction here. It's normal by default. I can say reverse. And right now it starts from ending, which means starts from two and going to from. If I write here alternate. And right now it's smarter. So what is alternate task? It starts our animation and after ending, it caused from again, and it's using the same animation. And there is an animation film mode here. If I say this forwards, it's going to stop after iteration count, but our iteration count is infinite, so it will never stop after one animation. It stops there, never comes back. If I say there is none, as you can see, it's coming the middle. If I say forwards, after animation, it's going to stop and stay there. Okay? So we can delete them and write in the one line like transition. I am going to write animation. Name example. Two seconds. Infinite. And ys. If I say alternate, as you can see, it goes back with the same animation for this alternate is really, really important. So what about these keyframes? I'm going to delete this infinite for now. So we use hear from and to accept this, we can use and in numbers here, any percentage. I wrote 0, 0%, and a 100 percent. So it's exactly the same. Think I can give also any specific moments. Let's say 50 percent, which means middle of the animation. I will add another transform here. Rotate 45 degrees. Right now in the middle of two animation. It rotates 45 degrees, and again, it goes to rotate 0. If I want this rotating to stay there all the time. After middle of the animation, I showed right here the same rotation. Like that. Something wrong here. Because I wrote here two transforms. It should be in the one line. And here give a space and write another transform. It's really easy to use. You can do anytime here. And any property. For a 10 percent. I will say background color, tomato. And right now from 0 to 10 percent, the background color changes to tomato. And Dan, again, this pinkish color for 2%, let's say opacity 0. Let's try again. As you can see, it disappear there. Let's add 32 percent. I will say border-radius, 50 percent. So it's going to be circle. That's refresh. I'm going to comment this out. I didn't lie capacity here, so I'm going to add one more quarter percent. I will give a border. Five pixels, solid and black. Cool. Let's say 60% transform, translate y and a 100 pixels. So it's going to go down and come back again. Like this. I can give more example. I can write whatever I want any moment I want. That's why these animations are really useful. Let's say scale two. So it's going to be bigger. Cool. And don't forget that if you want, this property works all the time. You have to write same property to other percentage. Oops, I made same mistake again. I will keep space and scale to refresh something like that. Let us write here infinite and play our animation all the time. Okay? So far we have learned about transforms, transitions, and animations. I hope you understood the logic, how they work, and what properties we can change with animations. If you're not familiar with animations, it might be a little bit confusing. But the more practice you do, the more you will understand and you will be more confident. So if everything is okay, Let's go to next section and create some awesome projects. I'll see you there. 13. Creating a SVG Button Animation: Firstly, I'm going to create SVG here with an hired for in the CSS file. I'm going to give a border for SVG for you. Here, verities, SVG x out. So I'm going to center them. As you remember, we have two solutions for that. You can go to SVG and say position, absolute and all size 0 and margin alter. Or you can do this called the body display flex, align items center. And just why Content Center for is totally centered right now. So inside this SVG, I'm going to create a rectangle. It's gonna be somewhere here. So I'm gonna say x, a 150 pixels wide and 50 pixels. And higher. It can be a hundreds. Of course weight. It can be 200. Something like that. If our high is a 100, I'm gonna give this to a 100. So it's going to be a middle of the SVG. I'm going to plate this color wheel num. And I'm going to add a black stroke with five pixels. Okay? I'm going to expand the VS Code so you can see better. Good. So I'm gonna write here something new. I'm going to create a text inside SVG. To do that, I'm going to open a text pack. And between this, you can write here and words or whatever you want. And here I'm going to give an ID text. Let's give for rectangle also. Correct. For this text, I'm going to say x 250. So it's going to be middle of our SVG. And y also 250. As you can see, it's our starting points. So this text starting from 250 pixels from x and y. So a half, I'm going to center this. I'm gonna write here text Anchor. If I write here middle, it starts from the middle right now, but it's only on the x-axis. I'm going to zoom this in like this. For now, our starting point, not the beginning of this text is middle of this text, but as you can see, it's still not centered on the y-axis. Let's solve this problem. For y-axis, I'm going to write here alignment, baseline, and middle again. Then I do this. It's totally centered. Let's make this smaller again. Okay. I'm going to delete this border. Actually all these SVG, we are not going to use it. Let's use text here. You can view and a font size. That's a 50 pixels. Font-weight, bold. And for rectangle, I'm going to say stroke dash RA 50. As you remember, if we decrease this number, it's gonna be something like that. You can arrange this number for yourself. And for me, 50 is okay. So I'm gonna give an animation here. The name of this animation will be mu, duration 1 second and ease. And I'm going to say alternate and infinite. And for this animation, I'm going to write keyframes. To I'm not writing here from I'm just using two because I don't have any initial position or any property. So I'm going to say stroke, dash offset. Lets say 50, and something like that. If I delete this, alternate, as you can see, an animation plays one time and it comes back the initial state. If I write this, it will play for both side. I'm gonna make this font a little bit smaller, maybe 40, and increase the stroke width. Maybe six. Okay, it looks good. Of course you can change any properties here. Let's make this to any change, a 100 and 150, something like that. It looks good also. And this one, you can change dash offset and a 130, Something like that. What I mean here you can change everything. You can play around this animation, stroke dash RA and dash offset. And you can find for yourself. For me, it looks really nice. So it was our first animation, our first project. It was really simple one. It's really good example for beggining. We are going to use all of these properties next project. So let's go to the next lesson and see what's the next project. 14. Creating a SVG Logo Animation: Welcome back. In this lesson, we are going to be building this logo. So I'm going to open Figma. And then I'm creating first frame. I will change size here, 100 pixels and 200 pixels. And right now I'm going to create a rectangle. It's going to be our frame. As you can see, it's same size. So right now I'm going to delete this fill color, but I need a stroke, I will increase this. It can be five. And color something like green. I'm going to rename this rectangle. I will say react. Okay, inside this rectangle, I'm creating a circle. And it's going to be a 100, 75. Let's center this. And I'm going to keep this color. And additionally, I will give a stroke. So it's going to be something akin green but softer. And this width will be three. Good. I will copy this color and paste inside fill. It will look like this. And after animation we will delete color or stroke. Let's give it a text inside this, I will write here. I will increase size and text firmly, font-family. Some tinnitus is good and color will be white. That center this like that. Cool. So I will choose this frame and export. And then we are going to be building our animation. I will choose SVG and make sure it includes your IDs. If you don't check this outline tags, you will not see your font family. So we need this. After checking that, I will export our frame here. And I'm going to go to my folder and mood is SVG to my HTML. I'm going to copy this and paste in body tax. Okay? So we have ID here, react, forgot to you for a circle. Here. We didn't give anything. We can change here, doesn't matter. I will kill this circle path. It's going to be our, let's say text. Okay, For our rectangle, I will says stroke dash array. And I will just try a hundred, three hundred, four hundred, something like that. But how can we be sure that we totally completed this dash array? We don't know the exact number. To solve this problem, we need app.js file here. I'm going to create a JavaScript file. And we're going to measure how many dash arrays we need. I will close this angle to index.HTML. I will define this JavaScript file before body tag. We'll say script and insight this I will say source and app.js. Don't worry about these JavaScript. It will not that much heart. You will understand that critique. So I'm gonna write here console log and write something to my console so we can see whether our app chairs works or not. Okay. I'm going to say Inspect. I'm going console here. And as you can see it works. Don't worry about these error. It's not about our work, it's about my Chrome extension. Some of them, there is something wrong. Some of them don't care about this. So our file works. I'm going to relate this. And I will create variable here, say const item. I'm going to choose our rectangle here. To do that, I will write document query selector. And I will give here at IIT, what was our ID in SVG? It was wrecked. I will write these there. So what this function does is just selecting our item. You can select an ID and a class or an attack here. Let's write this on the console and see what we have. As you can see our item here. We have every properties here with height feel. So we choose this rectangle right now for I'm going to call get total length function. If I do that, we can see our total lacked. As you can see, it's 800. So I will write here 800, of course, for the rectangle, it's not that hard to calculate this because we already know our height and weight. Animals, for example, for circle or any other items we need to do this whole time. Cool. For stroke dash offset, I will give 0. It's already 0. As you know, if I say 800, it will be totally disappeared like that. 700. 600. It's growing like that. So it's going to be 0 for now. And I'm going to add an animation here. I will say more, ranked three seconds and is, and I'll say alternate infinite is gonna work all the time. Okay, Let's skew keyframes here. How animation name. This is our initial values. So I will say two and change these values. I will change the stroke dash offset. So it's going to be a 100. If I do that, as you can see, it's animating. If I delayed alternate, as you remember, it's going to go initial state immediately. We will not see our animation. So I'm going to keep this. Let's do the same thing for the circle stroke dash array. Let's calculate this and updates right now, I'm going to give here are IID, as you remember, it's circle. That's a circle and see inspect. As you can see, it's our size. So I'm gonna enqueue here 540 and stroke dash offset. It's going to be 0. Again. You don't have to write this because it's 0 by default. But I want you to see. So I'm going to give fill white. You can't see this text anymore because it's white also. And I'm going to give you an animation. Let's say Mohr circle. It was three seconds. Is an alternate, an infinite. Okay, Let's move this Mohr circle. You can write here 2 or a 100 percent, doesn't matter. I'm going to say it stroke dash, offset. Right now it's going to be 540. Here. Right now is the same animation. And I'm going to give a color. What color? Let's check here. It was our circle and stroke color or fill color is this. So I'm going to copy and paste here. Girl. But we didn't do anything with this text. Let's go say text and animate this one also. Ideas text. I will say opposite the 0. It will not show up first, and then I will animate this text. Three seconds is alternate an infinite keyframes. A 100 percent and appositive will be one. We did enqueue our name text. Right now, it seems like we didn't do anything because this so-called color disappear it also, and we can't see what's going on for this text. So I'm going to come here and say 60 percent. And opposite T will be 0. And right now it will be appear after our so-called animation. Cool. It was really easy logo design. You can create your own logos and give some animations like that. Let's go to next lesson and create something more professional. 15. Creating a SVG Loading Animation: Welcome back. In this lesson, we are going to be building into our animation. So firstly, I've found this logo on the internet. You can find these in resources. So in the Figma, I open this logo and I will create a frame first. Let's do something like that. It's going to be, I founded and 500, okay, hopes a 150 pixels. Okay? I'm gonna make this centered. And for this frame, I will export this. I'm going to give it an id, logo. Okay, we can check this and export our logo. Of course you should choose frame first. Check this includes ID, okay? So I'm gonna move this SVG to where Scott and I will copy this and paste inside body. Okay? And there is a rectangle inside our frame. I will give it an ID hortus, I will say rect. And I will write here field known as stroke. It's going to be red and struck with Welby five. Okay, let's go to style CSS and create an animation. I will say rect. I'm gonna give an animation ranked five seconds is infinite for now. And I will write here stroke and stroke dash offset. We are going to arrange them. Let's go to app.js and calculate our lacked item, document selector and our IT tract. That's console log item, total lagged. And let's see, Inspect and console. And it's 2 thousand. I will write here 2 thousand and stroke dash offsets going to be same. So right here keyframes racked. And to strop offset. Right now, it's going to be 0, like this. And I'm going to change this stroke width also. Let's say 2000. And right now it's getting larger. So I'm gonna give a stroke. I will change the color. It black like that. Let's skew and animation for a local also. Our logo here. I will give an animation. It's going to be more logo. Five seconds is an infinite keyframes. Logo and follow the beginning. Apa style will be 0. And for a 100 percent, opacity will be a one. But I don't want to see these Tokyo until around 70 percent. So I will add the 70% here. And right now, it will be appear after four seconds or something like this. Let's delete this infinite. And I will write here forwards. It's going to be played just one and it will stay at the same position like that. But before this logo, it looks really good. So I'm going to give a text here. Before it is local. I will write here a text and I'm going to say loading. Let's give an ID here. As you can see, it is 500. So I'm gonna say hex 250 and 250. Let's delete this. We can't see it because we don't have any color. I will say black. Right now we can see that there's a problem here, as you remember previous lessons, positioning, not starting from the center. So I will come here. And write text Anchor middle. So it's on the middle right now on the x axis. For y-axis, I will arrange, again. I will say alignment baseline, it's going to be a middle also. Saw it's centered right now. It was 500. They started from 250. And text Anchor and alignment baseline. We just center this text. Okay, let's go to style and gave some core animation for this text. I'm going to write text. Font size. It can be bigger like that. Maybe 24. Okay, cool. And let's give an animation mode text. Five seconds is and forwards. Keyframes. Move text. And for the beginning, 0% opacity will be 1. I will copy this and paste couple times because I want to give some trading effect like that. Am percent to 100 percent, 30 percent, 40, 50, so on. It's going to be 01010. So I will delete this after 700% or positive well-being, totally 0 and 40 shortcut, you can come here and say comma 2 percent, 4 percent, 60 percent. So it's all going to be a positive one. For opacity 0, you can do the same thing also. That right now, Let's keep this like that, but we can't see the logo. I just commented this out. Cool. Let's see, in baked version, something like that. It's really cool projects for any intro or loading page, you can create your own brand and build something more creative. Far we've completed our project. We can go to the next lesson. I'll see you there. 16. SVG Handwritten Signature Animation: You're going to see how is it creating this signature and give an animation for this. Let's open Figma file and choose here frame. You can create something like that. 500 pixels, as we always do. So are inside this frame. I'm going to draw my signature, something like that. That's all. Let's go to frame and export this. I'm going to choose part, but before rename this, of course, let's say sine x part. I'm going to choose SVG and include our ID. And say, I'm going to move this into VS code. That's delayed this additional information. We don't need them here also. And I don't need any inside rectangle here. I need just my side. So we have as regio and inside we have on the path for deleting this additional information. If you go to Google and write here as VG compressor or prettier, you can find a lot of website here. For example, this one. If you open your SVG here, you can change n options here. As you can see, Dremel DOCTYPE, XML, instructions, comments, metadata, and a lot of things here. And you can export, again your SVG. They are not making that much complex as switches, so we can delay manually and copy this and paste inside body. Okay, here is my site. I'm going to delete them. And right here sign. And I'm going to indicate my stroke dash RA. Let's go to JS file and say Here, sign something wrong here. I d sine. Oh, it works right now. Normally you don't have to indicate this hashtag because it's getting ideas by default. But right now, I don't know what happened exactly. But anyway, it's my power problem right now, as you can see is our total lag. So I will write here and close this. Okay? So I'm gonna give an animation here. Say mucin. Five seconds is an infinite time for animation. More sign from stroke dash, offset is going to be the same number. Now you do this. It's drawing like that as you can see, because our struct dash offset is 0 by default, if I say here from stroke dash offset 32, 14, it's going to be 0. Again. What I mean is it's actually like that. You can indicate a bowl. Of course, doesn't matter. Let's play around. This timing function is in, out. Right now. It's slower and slower. Like that. It's really cool. But if you look like this on the big screen, there is no sense to add your sign like that. So I'm going to show that you can use your sign. For example, something like that. There are some sentences here as our chord. And underneath there is my site. I just prepared a paragraph here. And here, properties. And I arrange again our SVG width and height. And that's all. If I delete this, it's going to be bigger again because it's 500 pixels. So I have to resize them. It's really nice usage for your portfolio webpage or company by page. So you can use this everywhere. So we completed our drawing side project. Also, let's go to next lesson and do something more complex. 17. Drawing a shape in Figma: Firstly, we are going to draw something like that. But there is a sizing issue here because we have some frame here and here below. If I make this browser full-screen, it's the actual size of my total sequin, 1920 pixels and 1080 pixels. This ratio is a standard for HD screens. Of course yours can be bigger or smaller, but the ratio is always the same. So we don't have to worry about how big or small it is. Let's go to the JavaScript file and see how big our browser available area is. I'm going to console log Windows screen. That's all. Let's go to the browser. And here is my available height, and here is my available with my actual weight. Here, as you can't see, an actual height. But here my available height is smaller because of prose or frames. So it's going to be our new red here. As I said, don't worry about sizes. Rachel is always the same. You will understand better when we use the SVG. Let's go to the Figma and create some frame. It's going to be my available size, 1280 and 680. Cool. Let's draw our shape. I'm going to choose pen tool and start here. Here, here, here. And here is the important part. We are going to draw an arrow. But the last client shouldn't be on another part. I'm going to zoom in. I'm taking this and click somewhere near this line. Don't put on it. Okay. It's not touching. It's totally independent. So why are we doing this? Because we will use truck dash RA and stroke dash offset. And it should use a path that has different points to make solid animation, you are going to understand what I mean. And later, I'm going to show you what's going to happen if you don't do like that? Okay, Right now, I'm going to give some curves for these lines. I'm choosing director and come here and choose band top left skew some curves here like this. Like this. Here. Really doesn't matter how you're doing this. Try to draw something nice. Here. Again. Perfect. I want to show this arrow again. As you can see, this point and this point are totally separated. Okay? Let's go to the frame and exported. I'm going to choose SVG. We don't need IID is just one item. And save. Let's move this and delayed this inside rectangle. I'm going to copy this and paste inside body. Let's see. As you can see, it's still big, but it's not important. We have the exact ratio. Let's go to SVG. And here I'm going to say width and height, a 100 per cent. And right now it fits on my browser. Of course you can write them in the CSS file also. Get a 100 percent height, a 100 percent. And I'm going to tell it from here, it's exactly the same thing. As many times as you change the size with zoom in or out, it will be always the same. 18. Adding Text in SVG: And here I'm going to add some text. Now, let's go to the SVG. And behold the path. I'm going to open at tags, tag. Let's say hey and NID text1. And here my weight is 1280 and my text will start from not in the middle. It will start from somewhere like 900 pixels. And why, let's say 300. I have to give fill property, of course. And now we can see it. Coup. This is my idea. I'm going to CSS file and say text1. Font size, a 100 pixels and font-weight 300 pixels, maybe 200. It's still tic. Okay, a 100 is perfect. And don't forget to add this form to your HTML file as we did in the previous lessons. Otherwise you can't see the font weight. Okay. I'm going to center the text. Remember what we do always. I'm gonna go to tags and say text, Anchor, metal, and and alignment baseline, middle. Perfect. Let's play around these positions. Yeah, it's better now lighting. Now I'm going to create another text here. And ID will be text, and tags will be follow me. We shall give us tile. I'm going to copy this and paste and say TX2. Okay? If I comment this out, it's okay, but I want to shift this a little bit more. 900 is perfect. And now I'm gonna give you 0 plus t 0. Damn, we won't see it anymore. Okay. Let's change the background color. This one. Let's try. Okay, but black color doesn't look good with this color. Change with white. I'm also okay. It looks nice. 19. Animating SVG with CSS: So right now I'm going to add some social media icons. I'm going to choose them to do Figma. Let's give it a background for the frame so we can see icons. Okay, we have YouTube, Instagram, and Facebook icons. For Facebook, I will choose 50 pixels. 50 pixels. I'm going to choose Instagram and YouTube also. And say 50 pixels. Okay, let's take them here. I will move them here. Of course, you can add text here on Figma and export. But I just want to show you step-by-step. After watching this, you can create all these items on Figma and then export to the HTML. Okay? These icons will be after-tax two. So I will give this opposite T for text one for now. Okay, we can decide right now, it's going to be somewhere here. So I'm going to choose all of them and make a group. Let's rename this icon. Oops, I choose only icons frame, all these vectors are here. Okay, Let's take back our team. And okay, it's right now in a situation, I'm going to choose all this and say 50 pixels. And I will make them closer. But first, I will move them inside the mainframe. Okay, I'm going to move here. But as you can see, the YouTube icon is a little bit smaller. Let's make this bigger. Still small. I'm going to zoom in. Let's expand this. Okay? So it's gonna be somewhere here. Let's delete this background. We don't need anymore. We can export right now as we include ideas. And here we don't need this again. So in this SVG vector is our shape. Here. Let's rename this. I will copy and paste this first one because we need texts. I will copy this text and paste here. And we can delete this. Let's see. Okay, But shape color is black or white. And here we don't need them. As I said, you can use any as we do compressor are clear by manually. If you don't delay, this is still okay. It's not important. But SVG is in the HTML already ugly. And we keep that. It makes the file uglier, so I prefer it the lighting them annually. Let's go to the CSS and give an animation for this shape. Shape, stroke dash, RA. And let's go to the js file. I'm going to highlight this. And I'm going to write here shape. Let's check. Okay, this is our total lacked. Go to the style again and say 49, 66. And dash offset is going to be the same. And the animation will draw this shape again. Let's do that. And the mation more shape. Five seconds is and forwards. Keyframes, more shape. And to the animation, stroke dash offset is going to be 0. Let's see. Nice skew and animation for texts. Also. Text1 seconds is I'm going to copy this and do the same thing for TX2. Okay? That skew the key when 0% between 60% of positive will be one and 70 percent between a 100 percent, it's going to be 0. So our first texts will be disappeared after around 40 seconds, like that. And for Tx2, it's going to be the opposite. I forgot to change name. It's too early for text. Let's make it 7%. And delayed from here. From 0 to 70, it's going to be 0. And then step-by-step is going to increase. And here for the beggining it 0. And then it's going to be disappeared. 20. Adding Icons to Project: Our icons here, but we didn't Q and a group for them. As you remember after that mass, I forgot to add. I'm especially recording this. I will not cut here. So you can see how to group items on the index.HTML, okay, here I will create a GTAC. And after all icons, and I will close that. I'm going to give an ID. Items are all items are inside it these days. And this one. Okay? In CSS file, I'll create an animation. Icons. Six seconds Is forwards. Keyframes. It's going to be the same with text to actually. So I can go to animation. Copy all these, and paste here. Let's see. I want to change this color. Something like that. Better. I like it. You can use it for your portfolio page or for any other pages. And before ending, I want to show you why we use that arrow trick. I'm going to delay it, all of them and show you what happens if I draw this in wrong way. Let's go to the Pigma. So I'm gonna take this last one and merge with other. As you can see, there are sticky. Let's see Export, Save. Here. Copy and paste, NID and shape. As you can see, it's not independent anymore. It throws this part first and then the line because they are separated part of the path. The path is not unique anymore. We used same point twice. So you understood this trick, I think. And we completed this project also. I hope you liked it. Let's go to the next lesson and create some, have some buttons. 21. Editing Social Media Icons: I downloaded the social media icons so you can find them in the resource. And inside the Instagram there is a group and inside it three vectors, small, one, big circle and to fray. And all of them inside a group. So I don't need this frame actually. So I'm going to take this out. Okay, let's rename this Instagram. And for these vectors, instead, doubt that circle. And inside the frame. Let's do the same thing for the Facebook. I will take this out and rename it. And vector is going to be a Facebook icon for Twitter. Out. And rename. The vector name is Twitter icon. Okay. I'm kinda create a frame here. As you can see, it's really big. So it's going to be 500 and a 100. That's made these icons smaller and drag inside the frame. Icons will be inside a circle. So I'm going to create a circle. I will send to this and create tomorrow. I'll hold Alt button for Apple devices, it's option. And the third one, center them. And for Facebook button, the color will be below. Something like that. For Instagram, it's going to be red. Okay? And for the tutor, it's going to be something like blue. Cool. Let's move these icons here. For our Facebook, I'm going to make it smaller. Let's say 15 and 13. For Instagram, Turkey and Turkey, because it's a square dragging here. And for the Twitter, as you can see, it's not a square, so I will make this height Turkey. And click this button right here. It's going to protect our proportion. So with is going to be changed in the same ratio. Okay? So our buttons are almost ready. I'm going to give a stroke for the Facebook button. Same color. And follow the Instagram. Same. And let's do that for the Twitter as lab. Okay, buttons are ready. Twitter, Instagram, and Facebook. But circles are outside the buttons. So I'm going to drag them inside. This one here. And this one here. Epsilon. I will rename them to alter circle. But we have already a circle here. So it's going to be only C0. C0. And Facebook. See, I'm going to choose this frame. I export, SVG, include and Export and Save. Let's lay them cards from last lesson. I'm going to clear a CSS also. Okay, we can move our SVG now. I'm going to drag and drop here. And I'm going to copy all and paste right here. Let's check. Good. So we created buttons and perfectly, Let's go to the next lesson and give them some animations. 22. Animating Social Media Icons: Okay, it's time to do an animation. Our first icon here is Facebook. I will come here and say Hope's Facebook. And others in star and Twitter. Firstly, I will say cursor pointer. And then when the hallway than our cursor will be pointer. And for the Facebook, I will give a hammer effect. And our so-called was Facebook dash C, As you remember, this Hauer and fact, this Facebook C. And I'm gonna write here fill transparent. It's gonna look like that. Actually, I want to increase the stroke width. It's going to be two. Okay? And right now I'm going to give as stroke dash array. Let's say 10. Nice, It looks good. For the r vector. Let's see. Facebook icon. I'm going to do same thing. Facebook cover and it's going to affect our Facebook icon. I'm going to give a color. Let's check our color. This one. I'm going to paste here. Okay, It was white and be changed this color. And for this border, I'm going to give a transform. Rotate. It's going to be 360 degrees. We can't see any changes because we didn't Q and a transition. It's actually rotating, but we can't see it. Or Facebook see actually for others circles also. Twitter and Instagram. I'm going to transition. All is 1 second. And there is a problem here. When I hold this. It's rotating around this frame. To avoid that, I'm going to write here transform origin center. Please remember our transform origin lesson. And right now there is other problem. This transform works on the center, but our reference point is not Facebook icon. It's the common issue when you work with SVG animations. To solve this problem, I am going to write here transform box, and it's going to be filled box. It works perfectly. Let's do the same thing for Instagram. I will say Instagram instance C and transform, I will give scale lambda2. And color will be Tomato, like this. But I wanna give you some animation here, this small circle. So I'm gonna go to Figma. And I'm going to play around the circle. I'm going to choose this. And I all starts shrinking. And after that, we are going to change path of the circle. As you can see, in a circle, we have a path here. And I'm going to just shrink this a little bit like that. And we have a new path right now. I'm going to go to frame and say Export As changed his name. Okay. I will move this into VS Code. And right now this is our new path. I'm going to copy this. Now we'll go to CSS and say is the so-called hashtag. And animation is going to be 1 second is and forwards. Keyframes. And the animation, this is going to be our new path. To do that, I will write here d and path. And inside these parentheses, I'm going to paste this. Let's check. As you can see. I'm going to change this like that. Perfect. Let's make this faster. Faster. Okay, three is perfect. It's like photograph taken effect. It looks really nice for the Tutor. Let's do something unique. I will write tutor. And it's going to affect our circle. I'm going to give it a color transparent. After hovering, we will not see this anymore. But there's still stroke there. I don't want to see this drug either. So I'm gonna delete. Or you can leave this stroke. And after how're, you can do it. Same thing in any case may be we can use this stroke later so it can stay in the HTML and half the raw wearing. We can delete this. Okay, let's try it. What was our icon here? To a tour icon. I'm a color. If I do that, as you can see, there is on the border here. We couldn't give any color insight because there is no insight in this icon. It's just a parade. 23. Transforming Icons for Animation: So I'm gonna go to Figma, and I'm going to choose this frame, this icon. If I click twice, as you can see, there are some points here. I will delete this all inner point. I will choose like that, like that. I will press played an isolated them. I will delete this all points inside this icon because I'm going to give a color insight. Okay? So I'm going to choose this paint button and I'm going to feel insight. I can change the color. It's going to be something like that. Okay, I'm going to choose frame again. And x part. I'm going to paste here. And this is our new path. Copy these. And in the style I'm going to say D path and paste this one. Last check. We can see it because the fill is white and we didn't change the color. I will copy this. Come here and say Fill color. Okay, Let's check. Good. And I'm gonna give an animation to utter. Second and linear. And for what? Keyframes? Tutor. Middle of the animation, it's going to rotate. Rotate y, a 180 degrees. Of course we shall try transform. Okay, Let's check. As you can see, there is same issue here because we used rotate. Remember our solution. I will copy this and paste for Twitter icon, transform origin center, transform box, fill box. And there is another issue here, because we didn't write our new pattern and color. Let's go here and 75 percent. I'm going to paste previous animation. Okay, it works. It's turning to white because we didn't write a 100 percent. I will write here a 100 percent. So it's going to be always say, group. And our buttons are ready for Facebook, Instagram, and Twitter. Like that. And we didn't use this truck tutor. Where was it? Okay. Delayed from here and here because we didn't use it. Okay, we completed our bottom animations. It looks like that. I hope you enjoyed this class. Let's go to the next class. I'll see you there. 24. Editing Complex SVG in Figma: In this class, we are going to create this nice SVG animation. There will be a spaceship here. It's going to approach here and take this character with some ray effect and go back. At the same time, we are going to be giving some animations for these characters. Okay, Let's open the Figma. I'm going to open a new tab and say under o. Here is non-profit website that you can find great SVG for free. I'm clicking probes. As you can see, there are many items here. I will choose this one. And I'm gonna SVG. Let's drag this SVG to Figma. Firstly, I'm going to give a frame. Size is not important. So let's make some changes. I'm going to delete this one. And I don't want to add this hat or whatever it is. Okay, our characters are here. Timeout to mood is on the ground. Lighter. It's gonna move up with an animation. I'll choose all part of this character, arms, legs, and feet. And I will make them a group, let's say character one. So I'm going to rename these vectors. Character one, left arm, right arm. I enter. And I'm going to group this leg and the foot, right leg. And these ones also. C1 and C1 hat. I forgot. Here. Take that insight. And C1. I'm gonna do the same team for the second character. I'm choosing all elements, feet, and make them a group. I'm going to rename some of time quickly. C2. I enter. And we don't need to rename others cause we're not gonna use them. Let's choose this race right now. I'm choosing all and I'm going to create a group. Let's say race. Okay. I'm not sure for everyone It's same, but for me there is something wrong with the spaceship. This part looks a little bit weird. So I'm gonna move this here. As you can see, this part is front of the purple part. So I'm gonna move this behind it. And let's change that curve also. I won't make it straight. And I will take all this points like that. Here, here, here, like this. And I will arrange this position. I will make a group for Spaceship also. I have no idea what this is. So I'm going to just delighted. Let's take this body here. And then it's gonna move like that and it should be disappear here. I have to take this spaceship before the character. But there is still a problem here because some part of spaceship is transparent. So we keep seeing this character even behind the ship. So I'm going to choose this part and come here. Field tool. And I'm going to feel it. Let's change the color to white. Let's try choosing this guy and perfect. But I should cue a stroke for this part. We can see the border. Nice. Now if I animate it like that, it's going to be behind the ship. Let's move this here and play around him. Firstly, I'm gonna move this. I, it's going to look as he's looking at his friend. And I'm going to change this price mouth. I will click twice and we can change the points. Like that. Is so happy right now. He has no idea what's going to happen to him. Okay. I'm going to change this leg's also rotating like that. And here for the right one. And for the second body, I'm going to shift this. I also, I'm clicking twice to the man. And he's going to smile as well like that. And this arm will be here for now. Let's make this bigger and check whether something is wrong color now. Okay, it looks nice. Let's export this. I'm going to choose this frame I don't need. And the background export, SVG, include and don't check this one. It's going to give a stroke. Okay, let's say. 25. Animating SVG Spaceship: Okay, Let's continue. After saving to SVG, I'm going to move inside my card. And here is the SVG cut. I will copy that and paste inside the body. I can relate this size because it's already there is highest in the CSS file here. And let's close it and see how it looks. Nice. Right now I'm going to move the spaceship, animation, spaceship. Ten seconds. Let's make sure the name Spaceship, I will say is in, out. And I'm going to add the keyframes. Spaceship. I'm going to share the browser on the screen also. Okay? For 0%, transform, translate y and minus 100 pixels. We can still see it. Let's say 200 pixels. It's better right now. And 30 percent, it's going to be somewhere here, 50 pixels. From 30 percent to 70 percent. It's going to be in the same position. So it will be 50 pixels again. And for the a 100 percent, it's going to go up again. Minus 300 pixels. I can write it here. It's the same. Ok. And for the race. I'm going to say 10 seconds. And linear. It's going to show up first. So 0, 0%. It's going to be one. It has to be 0 of course, until, let's say 30%. Actually I can write it here. Okay. I'm gonna move it a little bit. Transform, Translate Y 50 pixels. Because our ship is there. And I want to change the color. Let's say red. We can't see it because it's a group. All items inside the group already have a failed property. Even if I give you a field property for the group, it will not change. So I'm going to delete all these colors. And right now they don't have any pill property here, and they cannot inherit from the group which is red here. Good. And now from 7% to a 100 percent, 0 plus T will be 0. Cows spaceship is going to move to sky. And I want is raised to be colorful. So I will change the color for every 5%. So 40 percent. It's going to be what was our main color. Here? I will copy this and paste here. I will come here and add 45, 55, 65 percent, and 50 and 60 percent. Now, it's going to change all the time. Perfect. The completed spaceship animation. Let's jump into the next lesson and view animation for the character. 26. Animating SVG Character: Okay, Let's animate this little buddy here. Id was C1 and emission, C1, 10 seconds. And linear keyframes. Remember when the race starts, 35 percent. So for 35 percent transform, don't forget to animation name. Transform. Translate Y 0. So from 0 to 35 percent character will be on the ground after that arm till around 65 percent cows ending point here, 70% is going to rise. Transform, translate by minus 300 pixels. It will not work properly because ship is moving up, but the character is going only 300 pixels. So I should write here a 100%. And for the translation, this number should be greater. Okay, it's slow for a character because timing function is linear. And for the ship, timing function is, is in art. So it's slower. Perfect. And now we are going to animate the arms. C1, L, arm. Let's be sure first. Yeah, it's correct. Animation. C1, left arm. Ten seconds, linear. We have to write transform, origin and box. But first, right here, the reason C1 left arm for 0% between 35 percent reaches the time for the rising the sky, I'm going to say Transform, Rotate 040% between a 100% Transform, Rotate, seminal decrease. As you can see, it goes out of the screen because the reference point is SVG, not the arm. Right now, we won't say center because it will rotate like that. And starting point for rotation will be here. Right and top. If you are confused about that, please go to Transform class and refresh your memory. Okay? And transform box. Let's check. Perfect. If I do this on the right, the top point will also move. And we will see this strange animation. Let's do the same thing for the right arm. C1, right arm. And right. Now the starting point is here, left, top. Okay? I will copy this and change the name. And now the rotation will be minus 70 pixels because it will be counterclockwise. Let's see. Nice. Now I'm going to move legs, C1, left leg, and the right leg. It's going to be the same animation. C1 legs, 10 seconds and linear transform origin. Let's decide the starting point for the rotation. Right now. It's going to be here, top because the legs are going to be moved to right and the left hand top will be always steady. So here is top. And transform box is filled box keyframes Thirty-five percent Transform Rotate 0. It will not move until this point. And after that 48 percent transform rotate, let's say 20 degrees. And I will copy this. And legs are going to move like that in every two seconds. So paste here and say 42 percent, and the angle will be minus 20 degrees. Like that. Let's give more points here. Four to 44 to eight. Fifty two, fifty, six, and sixty. And here 46, 50, 54, and 58. Let's save and see how awesome. But he looks so happy as a victim. So let's make him scared. I'm gonna say C1. Animations, same name. Ten seconds and linear. Let me show you this item. As you can see. There's a path here. Let's go to the Figma and take back our routine. I'm taking back and waiting until icd Initial. This one is okay. This one is okay. Also I'm going to frame and I'm going to export them. Let's check everything and save. I'm moving here. And this is my new path. I will copy this. And let's skew the keyframes. It was 35 percent, but he shall be surprised before it because he sees the ship. So let's say 25 percent, Twenty-five percent to a 100 percent, it will be same in this situation, the path and paste this new path. Let's see. As you can see, it's animated right now. Good. So I'll be completed to first character. Let's go to the next lesson and make some changes for the second round. 27. Reshaping and Animating a Character: Okay, let's make this second case. Also. I will copy this and paste here. I'm changing names and delete this path. And we already have the new path, as you remember here. Let's find it. I'm going to copy this and paste here. Let's check. Okay, Good. But still looking at the same point. So I'm going to change them. C19, I animation, I1, ten seconds, and linear keyframes. It's going to start moving after 2.5% to a 100 percent. And it's going to be transformed. Translate minus five pixels and minus five pixels. Something wrong. Let's fix that. C1. C1. Okay? Oh, I forgot a comma here. Okay. And right now as you can see, it's moving on the x and y-axis. Let's do the same thing for the second. I will copy this and paste here. Again. I2, i2. It's going to be more like that. So we don't need that much moving on the x axis. So I will say Mom pixel, y-axis is going to be the same. Maybe more, six pixels. I'm going to refresh. Okay, cool. Let's orange. Second guy's arm. Went, his friend starts rising. He's going to raise his hand. C2 arm. And animation. Let's say C2 arm, 10 seconds. And linear transform origin. Let's check together. This part is going to rise up. It was here. And after animation, it's going to rotate like that. So right side of the arm will be always table. So I'm going to write here, right? Let's write transform box, fill box. And I'm going to create a keyframe, C2. And he is around here, is going to start rising the arm, let's say for 2%, Transform Rotate 0 and after this 0.4 to 5% to a 100 percent Transform Rotate will be 70 degrees. Let's see. Preparation. Again. It's really nice. So I, in this section, we learned a lot of things. How to edit, giving SVG for our project, how to use him on smallest part of the SVG, how to animate them synchronized. I believe that it was really useful if you understand everything after that class. I believe that you will create some Epsom SVG animations. So this was a given SVG. Let's go to the next lesson and draw our own SVG. 28. Envelope Project Introduction: In this lesson, I'm going to show you how to draw this beautiful SVG and how to animate it. You can find some awesome SVG resources on the Internet, but sometimes you have to create your own. So this lecture is going to be a really useful, and I believe that you'll be more comfortable when it comes to drawing something on Figma or any other software. 29. Drawing Envelope in Figma: Hi, all create a frame here, 500 pixels. And I'm going to show you a lifesaving tool here, Create layout. I'm going to click this and it shows a layout which includes create insight. You can change, decreased size here, 200 pixels, 50 pixels, but they were you want 20 is enough for me. You can close and open here over till eight here. So I'm going to draw a part of the envelope. You will see how practical using to create layout. Okay, I'm starting from here and I'm creating a rectangle here and here. And now I'm going to draw here and merge here. Okay, I'm going to choose this tool. And now I can see the middle of the line here. So I'm gonna move this part according to centered point. Let's choose this and give some radius for the ages. Five is enough. Good. How far this point click twice and you can give independent radius, let's say 10. Let's look. Now, here is ten, and the others 5. I'm choosing pen tool again and creating a triangle like that. Okay, let's give it a radius. It's going to be smaller, but not a problem at all. Let's expand a little bit. And here, I'm not going to be a perfectionist for destroying otherwise to lessen can be really long. And for this h, I'm going to give you 10. Again. That's rename them. This one is envelope. And this is try. As you remember from previous lessons, I can feel inside this envelope. Okay. And color will be something like blue. And I will also feel his 1. And choose same color. Let's choose the frame and see. Perfect. Right now, I'm going to create a letter like this is good. It should fit inside because we are going to give an animation and we don't see any overflowing. And I'm gonna move it here. It's going to be behind the envelope, but from the triangle, Let's make it white. Stroke. Nice. I'm going to center this Like data's okay. And let's write something on the latter. Of course not a text about some rectangles. I'm going to give radius, let's say 10. And color light purple. I'm going to create a bigger one. Radius tan color, something like that. And I'm going to create some sentences here. Again, tan and color is okay. I'm choosing this and drag with the Alt button for her Apple, it's option like that. That here. Here. Perfect. Let's make them a group. This paper also. And I've already named this as letter. And I will move it behind the envelope. Okay. So far, so good. I'm going to animate this like that. And after I'm going to close the cover. But there is a problem here. When I move the triangle, we still see the letter. That because letter comes before the triangle, it should be like that. Let's fix this problem. I'm choosing this triangle and copy and paste. Now we have second climb that say trial 2. And it's going to be a P4 to letter in our HTML file. I'm going to make opacity of this 10. Like this. I'm gonna move the latter term first triangle or positive will be 0 and at the same time, second triangles are positive. Well p1. This is our scenario. Good. And then I close this. It's behind of the envelope. So I'm gonna move it here. Okay, Let's export. This. Has vg includes ID. I'll export and say, okay, we finished the drawing. You can go to next lesson and give some animations. 30. Animating Envelope SVG: Okay, let's move this SVG here. I'm going to copy and paste here. I will delete this before. Let's check. Okay. And I will queue size in the CSS file with a 100 percent. A 100 percent. Okay, Nice. And as we planned before, I'm going to make this second triangle disappeared. And we don't need this background. It's the frame right here. Okay, let's animate the letter. Animation. Letter. Two seconds and ease in, out. Let's give infinite for now. And keyframes move, letter, clue, transform, translate. Why I didn't take about, let's say a 100 pixels. We can check from the Figma. Let's say 90 pixels. Okay, it looks nice. And I will do this forwards. And it's going to stop after the animation. Time. For a triangle. Animation. I will not say two seconds. Instead, I will give one millisecond and it's going to play out to the letter, animation after letter. It's going to be disappeared. So I'm giving two seconds delay and linear. Let's give the keyframes to 0. And I'm gonna move triangle here. And give an animation. Try to 20 seconds, 20 seconds delay and linear keyframes. 0%, which means after two seconds delay. Upper still will be one. And end of the animation. Let's give a color for now and see whether it works or not. As you can see, it works perfectly. So now we need to change path. Let's go to the Figma. And Moody's. It's going to be here. And let's export this. I'm going to say too. I'm moving this inside of VS code. Okay? This is our new path. I'm going to copy this. And D and new value. Let's check. It's opposite t being 0, cause we didn't assign dies for a 100 percent. I will give for a 100 percent also otherwise is going to be 0 again because the initial value is 0. Let's see. Okay, First one's tilde here, something wrong here. Let's q, 0% opacity 0 and make this too. Okay, it works now. Actually that because we didn't give forwards here, and after one millisecond, it turned back to the initial state. That was the problem. Okay, cool. And let's move all items from the screen. Our frame is frame one. I can change this to item. Let's go to the CSS file. Item animation. Item 1. Second delay will be total duration of the other animations here. Four seconds. Let's say 4.2 and is in keyframes. Item to transform translate X is going to shift like that. So I'll let say, 10 pixels. Refresh the page. And of course it's going to be forwards. So I'm going to decrease this duration 2.5th. And perfect. Okay, we've finished this project. So you have learned how to draw SVG on the Figma. I wanted to give you self confidence about drawing because I know that most of you are just a developer or designer about when it comes to design and draw something from scratch can seem a little bit for a striking that actually is not, as you can see, an improvisational lab. If you have a boss who will probably ask you to design something, even if it's not your job. So I just wanted to show you, it's not that hard when you create something minimal like this. And for designers, I believe that it was a good training. So it's a hand-off to Section, less stressed a little bit, and then go to next project and create some F sub menu. 31. SVG Menu Introduction: Welcome back. In this section, we are going to be building this Menu button and create spread animation. When you click this button, this black circle is going to cover all secreted. And you are going to see this beautiful men. And men are line's going to transform into a cross button. And you click back. It's going to turn back the initial state. This section include some JavaScript functions. But don't worry, I promise it's not that hard. You are going to understand everything. Okay. If you're ready, let's get started. 32. Creating SVG Menu Elements: Firstly, I'm going to create an SVG here. Let's give the sizes as VG, a 100 percent and height a 100 percent. So it covers the whole screen right now. I'm going to create a circle here. Let's give it a class name this time. Circle. Remember first SVG classes, I'm gonna write here cx. And it's going to start from here, from 0. So c x 0 and y 0. And we need the radius here. And it will be a 100. Like that. Let me make the screen a 100 percent. Okay. Maybe it can be smaller. It's good. As you remember, C stands for Center. If I say 10, like that. If I say 80, so it's gonna be appear right now. Okay, let's take back, Let's create a line. X1, 20 pixels. It's going to be a show up here. X to, let say 50 pixels, two pixels, and again, 20 pixels. We can't see anything. Cars, we don't have any stroke. Let's give it a stroke. White. Stroke width. Tray. Good. Let's zoom in and see closer. Okay. So I'm gonna give className line and line one. I gave line because there will be a tumor lines and this class name will be the common class name. Let's duplicate this twice. Line 2 and line 3. Of course y will be different. 32 pixels. And for two pixels. Perfect. I want to see a pointer cursor here. If I come here and say line cursor pointer, yes, there is a point to, but between these lines, we can't see it. So in order to fix that, I'm going to create a rectangle here. I'm going to say line container are just lines x. This container will cover all these lines. So let's say 12, 15, 45, and 45. Let's check, we can change this. I'm going to feel it to see better. Feel byte. As you can see, it's a little bit big. Let's give something else. Maybe Turkey. Okay. And here 40. Okay, it looks nice. I'm going to delete this color. But before let's give a cursor effect and see lines. Cursor pointer house. So I'm gonna come here and delayed field and add APA style. Right now we can see it, but it's still there. We can still harbor it. And okay. I'm going to create a list and list item, home pages, product, portfolio, and contact. I'm going to give className, list of four items. I'm choosing this and Control D for Apple devices, comma D and give them class also, I am going to CSS and say list position absolute. So it's centered tight now. Without this, it shifts to the right. Let's get three dot-dot-dot. Okay? And font-size, 32 pixels. Font-weight, bold. And let's give up margin between each items. Next item. Margin tag. Looks nice. I'm going to change the color to white. Background color white also. But it's still here. If I say here, display none, V1, see it anymore. See, I can choose. When I click this, it's going to show up again. I'm going to write circle this black here. And I will say active here. We are going to add this class name next to the circle. Later. I'm going to add an animation. Circle. Two seconds is I'm forwards to its radius. Over here. It's going to cover the whole secret. Let's say 2000. We don't see because we didn't give any active class. I'm going to add here active. And now, perfect. Let's late this. You are going to add this with JavaScript soon. And for this list, I'm going to add an active class also. And display will be a block, as you remember it once before. And I do that, it's going to show up again. Let's check. I'm going to add active for above. And amazing. And the late now. Okay, we almost completed HTML and CSS part. Let's go to the next lesson and talk about JavaScript. 33. Animating SVG Menu Elements: Okay, I opened up chairs. I will delete them and I'm going to create a variable here, const circle. I'm going to choose the circle class. You already know how to do that. Document. Query selector, dot circle. You have to write your dot because it's a class. That's check. Right-click, Inspect and console. And our circle element is here. And not care about this error again, it's about one of my Chrome extension. So if I write here list, now we can see list and all elements inside it. Okay, Let's take back, I'm gonna write two more. It's going to be lines here, this rectangle. And the list here is the magic. I'm gonna write here, lights at L1 listener. And inside it. First I'm going to say, which event do I want? It can be colleague, mouseover, scroll. There are tons of elements that we need. Here is just a click event. Okay, after that, I'm going to write a function in new js. We can write it like that. Don't be confused about this. It's not a crucial point of discourse. I just want you to understand what we are doing in JS, not how we are drinking. And here we're right. What we are going to do after click event, when we clicked is the so-called gonna be active and covered the secret. The list gonna be active and show up here. So it means I will add active class near to circle and near to list. Okay? I'm writing circle right here. And class list. And I will say Toggle. And inside it are active. What this function does, it just takes the class and Togo and other name next to it. What I mean by that, Let's go to the browser. I'm clicking and magic click again, and it's not active anymore. Let me make this clear. Inspect elements. I can see the circle here. I'm clicking and as you can see, it adds new class which is active. If I click again, it deletes it, it's kinda Togo ink, octyl, not active. Let's do the same thing for the list. I will say a list and go. Let's check again. As you can see, it's totally okay. Let's make these lines fancier. When I click is going to be crossed. As you remember, we have two lines here, line 1, line 2, and line 3. I'm coming to CSS. And line is the common class for all lines. Here. I'm going to give AT transition. Remember our transition class. All 20 seconds and ease. I will say transform, origin and box because I'm going to use rotation. But first line one, active, we are going to add active class for them also. And two more, line 3 and line 2. First one is going to rotate like that. And the third one like that. But second line should not be there. So I will say opacity 0. That's at the active class and see, okay, Um, first one, transform rotate 45 degrees. Let's add the active and see. As you can see, it's here because we didn't add 28 transform box. Let's say Fill box. Here. If I say center, it's going to start rotating from the center. I don't wanna do that. I want to start from here. So I'm going to say left, right now it works properly. Let's copy this and paste for the third one. But this time it's going to be a minus 45. Let's see. I didn't add active. Perfect. I think you understood by, I wrote here minus ok. So at the beginning they will not be active. And when I give them into js file, I'm going to duplicate this three times by 1, line 2, and line three, line 23. And let's add here line 1, line 2. And we can check. It really looks good. And instead of writing one by one, you can use, let's say line all, document, query selector all. And let's write here the common class name and this querySelector. Choose all this className. And here you can say line all for each. And then you can add the total. But we don't get this. I don't wanna make you confused. Is just a to moralize. It's perfectly okay. Okay, so this one was our final project. We started from drawing basic shapes in the HTML pile than we did pizza example on the Figma. And then we created amazing projects. I hope you enjoyed the course. More importantly, you'll learn something new. I believed that it was really useful for you. So it's time to say goodbye. I wish you happiness and success in your future life. I hope we will meet again in another course. Goodbye.