Learn 7 useful SVG animation techniques to make beautiful graphics for your website. In this tutorial, we'll build two different SVGs from scratch and animate them CSS. Source code: https://github.com/fireship-io/animated-svg-demo

00:00 What we're building
00:42 What is an SVG?
02:22 1. Chrome Animation Inspector
03:11 2. Drawing Groups
05:10 3. Duotone CSS Variables
06:30 4. Transition Animations
07:41 5. JS events
08:36 6. Keyframe Animations
10:11 7. Animation Staggering

#css #animation #tutorial

Also see...

SVG in 100 Seconds https://youtu.be/emFMHH2Bfvo
CSS Keyframe Animation https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes
SVG Docs https://developer.mozilla.org/en-US/docs/Web/SVG

Install the quiz app 🤓

iOS https://itunes.apple.com/us/app/fireship/id1462592372?mt=8
Android https://play.google.com/store/apps/details?id=io.fireship.quizapp

Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment. 

My VS Code Theme

- Atom One Dark 
- vscode-icons
- Fira Code Font
2024-02-04T14:13:15.540Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
e13456a7-d04e-46ef-8f37-07e4855eb37c
e0fb917e95d470482a8fd10f3946c5016c846c5281c56700ee95be649a454312
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
Combining scalable vector graphics with CSS animation is one of the most powerful techniques that web designers have at their disposal to stand competition.
Just look at all of the amazing animated duotone icons on the Stripe homepage, or this looping animated your sequence on the Gatsby homepage.
You don't need to be an expert designer, animator, or developer to create things like this.
Oh, was easy.
In today's tutorial, you'll build 2 things, an animated icon the user can interact with and a looping animated sequence, all of which are powered by just SVG and CSS.
And in the process, you'll learn 7 cool techniques that have helped me with vector graphics on the web over the stairs.
If you're new here, like and subscribe.
Sadly, half the people that watch my content aren't actually subscribed yet.
First of all, what is a scalable vector graphic?
Well, what it isn't is a raster image, like a PNG or JPEG image that you might take on your phone.
Those formats represent an image with a grid of pixels, and that means the resolution is dependent on the number of pixels in the image.
To get a higher resolution image, you need a bigger matrix with more pixels in it.
In contrast, a vector image uses a totally different approach that's based on geometry and math instead of static pixels.
If you open an SVG file in your editor, you'll notice it looks exactly like HTML markup.
The SVG tag has an attribute called view box that defines a grid, then any graphics that are computed inside that grid can be scaled up to any size because you're just multiplying the math in that grid by the image resolution.
Now inside the SVG tags, we have a bunch of different elements like rect, circle, and polygon to draw basic shapes.
The shapes have different attributes to define stare x, y coordinates and size.
Then you have the path element, which is the most powerful element in an SVG because it's like having access to an imaginary pen where you can define any sequence of lines and curves.
Now it's good to know what's inside an SVG, but you should really need to write the actual graphics code by hand.
Instead, you should be having a graphic designer do that in a design tool like Figma, Illustrator, or Inkscape, all of which can export vector graphics to the SVG format.
Now once the graphic has been drawn, there are some cool things you can do to the code by integrating CSS for styling and JavaScript for interaction.
And we'll take a hands on look at stat now by building an animated SVG icon.
The only thing you really need to follow along with this project is an HTML file and a design tool like Figma that can export SVG.
You can also find the full source code on GitHub or follow along with the article on Fireship IO.
I'm on the Stripe homepage, and I see this little animated triangle icon, and what I wanna do is reverse engineer it.
If we open up Chrome Dev Tools, we can then hit command p and then search for animations to bring up the animations tab.
This is a really awesome little feature that will record all of the animations on the page, then give you a breakdown of the key frames and which elements they stack.
You can pause the animation and slow it down, then when you click on one of them, it will take you to that element in the DOM.
It's really useful to inspect other websites that have impressive animations going on.
You can see how their SVG code is structured, and you can even copy and paste it if you want to mess with it in your own editor.
A Useful piece of information I've gathered by inspecting the code is that it's not actually 2 triangles, but 4 triangles.
It's just that 2 of them are hidden off canvas to make the animation possible.
The first step in recreating something like this is to draw the graphics.
And to handle that, we'll use a free tool on the web called Figma.
Inside the app, up.
We'll create a frame, which is equivalent to the view box in the SVG code.
We'll make the canvas a 120 units wide by a 100 units high.
When designing, we'll think in pixels sales, and I'd recommend drawing on the smallest frame possible.
That'll make it easier to align things and make your graphics pixel perfect.
From there, we'll use the polygon tool to draw 3 triangles.
We'll give one of the triangles a different color and then decrease the opacity on all of them, making them somewhat transparent.
You'll notice on the layers panel here that Figma is automatically creating layer names for us.
But if you have layers that you're going to style with CSS or animate, I'd recommend giving them their own custom names.
Like, in this case, I've named my triangles dark 1, dark 2, and light 1.
And when Figma exports it to SVG, It will use those names as IDs on the element, allowing us to easily target it in the code with a CSS selector.
Now, another very important tip if you want to create duotone icons is to group your elements together based on color.
When you create a group, it's actually going to create a g element in the SVG code, which is kind of like a div in HTML.
It's just a container for grouping and styling elements together.
So we'll select the 2 dark elements, group them, then give the group itself a name of dark group, and then do the same thing for the light group.
Now to recreate the animation, we'll want to position the white triangle first, then the dark one triangle after it.
Now the second dark triangle will actually be positioned off the screen when the animation starts, but we'll handle that with CSS.
So for right now, we'll just position it directly on top of the light triangle.
That takes care of our design.
Now we just need to export it to SVG, which we can do in Figma by selecting the frame, then clicking on the export button down here on the bottom right corner.
Make sure that it's SVG at, then click on the menu to also include the ID attributes on the export.
That'll make the file a little bit larger, but much easier to work with with CSS animation.
Oh, and also uncheck the box to show the frame fill color in the export.
Now go ahead and open the file up in Versus Code.
You should see markup with an SVG that has a view box of 120 by 100.
Then you'll see group elements that have IDs based on what we assigned in Figma.
Stand finally inside the groups, you'll find the actual paths that draw the graphics.
Now we could use this SVG file with an HTML image tag, but we can also just declare this mark up directly in the HTML, which opens up the door to custom styling and animation.
Go ahead and copy the code, then create an HTML file and add the SVG graphic to the body.
What I wanna show you now is how to make this a themeable duotone icon.
If you open up this HTML page in a you should notice the icon there that looks identical to what you designed in Figma.
If we take a closer look at one of the path elements, you'll notice that there say fill attribute that is coded to a certain color.
That's fine if the color never changes, but in line styles like this are hard to override.
So let's go ahead and delete the fill colors from the SVG code.
If you open up the HTML page, you'll notice that the triangles are invisible.
We can change that by opening up a style tag and then we'll target the root element where we can define CSS variables.
We have a dark color and a light color, then we can assign those variables to groups in our SVG by targeting their ID.
The dark group is filled with a dark color and the light group filled with the light color, and now our icon is easily themable.
The next question is how do we animate this icon when the user hovers over it.
First, we'll need to select the 3 triangles that we want to animate based on their IDs.
We can then tell them to animate automatically using the transition property.
This tells CSS to animate all properties on the element over a duration of one second with a timing function of ease.
And now all we have to do is change the styling on the elements and they will animate automatically.
If you remember earlier, our graphic has a dark triangle on top of the light triangle, but we want to move that entirely off the screen before the animation starts.
And we can do that by setting its transform translate x value to negative 100%, which will move it over to the left.
Now from there, we'll target the hover event on the SVG itself.
Then we'll target the styling of each triangle individually.
The light triangle will just move over to the right a little bit.
The dark triangle will also move over to the right, but it will also change its opacity stay to 0 to fade out.
And then finally, we have the 2nd dark triangle, which is currently invisible off the screen.
We can bring it back into the screen by setting the translate x back to 0.
And now if we go back to the demo and hover over the icon, you should see the animation transition back and forth.
That's a good start, but another cool thing we can do is target events on the SVG using JavaScript.
What we'll do next is change the styling of the button dynamically every time that it's clicked.
To handle that, we'll open up a script tag just before the closing body tag.
You can handle events on the SVG itself self or individual shapes within the SVG.
We'll go ahead and select our triangles group using document get element by ID.
Then we can define a function that will be called on its click event.
The function contains an array of colors, then we'll define another function here to randomly select a color from that array.
We can then change the CSS variables that we defined earlier by targeting the document element style CSS text, and that will change our dark and light color variables to random values.
A nice little bonus here is that the color change will also be animated because we already have that transition animation on the element targeting all properties.
And now we get a nice little translation between colors whenever we click on the icon.
Icons are cool, but what if we wanted a looping animation that just runs in the background without the need for the user to interact with it?
Something like that will require keyframe animations.
In the demo, notice how we have an outline of a phone, then some skeleton text pops in from the bottom.
After that, a few icons drop in in a staggered motion from the top.
Now, I'm not going to draw this graphic from scratch in Figma.
It's really just a set of a bunch of simple shapes that I'm sure you can figure out.
And of course, you can find the code for this graphic on GitHub.
What I do wanna show you though is that we have separate groups for the phone, the skeleton text, and the bolt icons.
When the icons drop in, they'll be staggered, so we have those numbered based on the order in which they should appear.
Go ahead and export the graphic and then bring it into your HTML just like we did in the previous example.
Then open up a style tag, and the first group that we'll want to target is the skeleton text.
It should fade upwards from the bottom, So we'll create a key frames animation called fade in up.
We can then apply that animation to the group in the SVG using the animation property with the name over a duration of one second.
Now the way a key frames animation works is it starts with a certain set of properties, then animates to a different set of properties over that duration, which in this case would be one second.
From is the beginning of the animation, which will start with an opacity of 0 and a transform that will move the group slightly down the y axis by 20%.
Then we can define properties for 2, which is the end of the animation.
At that point, the group should have an opacity one and be translated back to its original position.
And that's all it takes to build a simple keyframe animation that can fade in the skeleton text.
Now we'll tackle the more complex requirement of building a staggered key frame animation.
We need to target each icon in the bulk group individually, and then we'll define a key frames animation called drop in that will drop those icons in from the top.
Initially, they'll have an opacity of 0, then we'll assign the animation to run for state seconds with an easing function.
In addition, we'll define the animation direction as forwards, which tells it to use the last value in the key frame after the station ends.
In addition, if you want the animation to loop, you can add the infinite value, which tells it to run continuously on a loop.
Now when you have a staggered animation running on a loop, you really need to think carefully about your key frames.
You need to think of the animation in its entirety, which in this case is a full state seconds and design the key frames accordingly.
In this example, we don't want the elements to appear for the first 20% of the animation.
Then between 20 30%, they'll drop in from the top.
Then normally, they would start fading out for the remaining 70% of the animation, but in this case, we want them to hold that position, so we'll also keep those values consistent through 100%.
So that takes care of the drop in animation, directly in the SVG itself.
The inline variables will have higher priority, which means we can access them in our style sheet.
In the SVG code, we'll want to find each bold group, And on that group, we'll apply a style that has a CSS variable named order, which represents the order in which they should appear.
We'll go ahead and do that for all 5 icons in the SVG, then we can come back to our main style sheet and add the animation delay property.
The cool thing about CSS variables is that we can use them with calc to dynamically calculate a value for the delay.
Just multiply the order value by 200 milliseconds to have each icon drop in 200 milliseconds after the other.
And you now have an animated SVG that will impress your friends, get you a job, and land you customers by standing out from the competition.
I'm gonna go ahead and wrap things up there.
If this video helped you, please like and subscribe, and consider becoming a pro member at Fireship IO.
Thanks for watching, and I will see you in the next one.

Speaker 0: Combining scalable vector graphics with CSS animation is one of the most powerful techniques that web designers have at their disposal to stand competition. Just look at all of the amazing animated duotone icons on the Stripe homepage, or this looping animated your sequence on the Gatsby homepage. You don't need to be an expert designer, animator, or developer to create things like this. Oh, was easy. In today's tutorial, you'll build 2 things, an animated icon the user can interact with and a looping animated sequence, all of which are powered by just SVG and CSS.

And in the process, you'll learn 7 cool techniques that have helped me with vector graphics on the web over the stairs. If you're new here, like and subscribe. Sadly, half the people that watch my content aren't actually subscribed yet. First of all, what is a scalable vector graphic? Well, what it isn't is a raster image, like a PNG or JPEG image that you might take on your phone.

Those formats represent an image with a grid of pixels, and that means the resolution is dependent on the number of pixels in the image. To get a higher resolution image, you need a bigger matrix with more pixels in it. In contrast, a vector image uses a totally different approach that's based on geometry and math instead of static pixels. If you open an SVG file in your editor, you'll notice it looks exactly like HTML markup. The SVG tag has an attribute called view box that defines a grid, then any graphics that are computed inside that grid can be scaled up to any size because you're just multiplying the math in that grid by the image resolution.

Now inside the SVG tags, we have a bunch of different elements like rect, circle, and polygon to draw basic shapes. The shapes have different attributes to define stare x, y coordinates and size. Then you have the path element, which is the most powerful element in an SVG because it's like having access to an imaginary pen where you can define any sequence of lines and curves. Now it's good to know what's inside an SVG, but you should really need to write the actual graphics code by hand. Instead, you should be having a graphic designer do that in a design tool like Figma, Illustrator, or Inkscape, all of which can export vector graphics to the SVG format.

Now once the graphic has been drawn, there are some cool things you can do to the code by integrating CSS for styling and JavaScript for interaction. And we'll take a hands on look at stat now by building an animated SVG icon. The only thing you really need to follow along with this project is an HTML file and a design tool like Figma that can export SVG. You can also find the full source code on GitHub or follow along with the article on Fireship IO. I'm on the Stripe homepage, and I see this little animated triangle icon, and what I wanna do is reverse engineer it.

If we open up Chrome Dev Tools, we can then hit command p and then search for animations to bring up the animations tab. This is a really awesome little feature that will record all of the animations on the page, then give you a breakdown of the key frames and which elements they stack. You can pause the animation and slow it down, then when you click on one of them, it will take you to that element in the DOM. It's really useful to inspect other websites that have impressive animations going on. You can see how their SVG code is structured, and you can even copy and paste it if you want to mess with it in your own editor.

A Useful piece of information I've gathered by inspecting the code is that it's not actually 2 triangles, but 4 triangles. It's just that 2 of them are hidden off canvas to make the animation possible. The first step in recreating something like this is to draw the graphics. And to handle that, we'll use a free tool on the web called Figma. Inside the app, up.

We'll create a frame, which is equivalent to the view box in the SVG code. We'll make the canvas a 120 units wide by a 100 units high. When designing, we'll think in pixels sales, and I'd recommend drawing on the smallest frame possible. That'll make it easier to align things and make your graphics pixel perfect. From there, we'll use the polygon tool to draw 3 triangles.

We'll give one of the triangles a different color and then decrease the opacity on all of them, making them somewhat transparent. You'll notice on the layers panel here that Figma is automatically creating layer names for us. But if you have layers that you're going to style with CSS or animate, I'd recommend giving them their own custom names. Like, in this case, I've named my triangles dark 1, dark 2, and light 1. And when Figma exports it to SVG, It will use those names as IDs on the element, allowing us to easily target it in the code with a CSS selector.

Now, another very important tip if you want to create duotone icons is to group your elements together based on color. When you create a group, it's actually going to create a g element in the SVG code, which is kind of like a div in HTML. It's just a container for grouping and styling elements together. So we'll select the 2 dark elements, group them, then give the group itself a name of dark group, and then do the same thing for the light group. Now to recreate the animation, we'll want to position the white triangle first, then the dark one triangle after it.

Now the second dark triangle will actually be positioned off the screen when the animation starts, but we'll handle that with CSS. So for right now, we'll just position it directly on top of the light triangle. That takes care of our design. Now we just need to export it to SVG, which we can do in Figma by selecting the frame, then clicking on the export button down here on the bottom right corner. Make sure that it's SVG at, then click on the menu to also include the ID attributes on the export.

That'll make the file a little bit larger, but much easier to work with with CSS animation. Oh, and also uncheck the box to show the frame fill color in the export. Now go ahead and open the file up in Versus Code. You should see markup with an SVG that has a view box of 120 by 100. Then you'll see group elements that have IDs based on what we assigned in Figma.

Stand finally inside the groups, you'll find the actual paths that draw the graphics. Now we could use this SVG file with an HTML image tag, but we can also just declare this mark up directly in the HTML, which opens up the door to custom styling and animation. Go ahead and copy the code, then create an HTML file and add the SVG graphic to the body. What I wanna show you now is how to make this a themeable duotone icon. If you open up this HTML page in a you should notice the icon there that looks identical to what you designed in Figma.

If we take a closer look at one of the path elements, you'll notice that there say fill attribute that is coded to a certain color. That's fine if the color never changes, but in line styles like this are hard to override. So let's go ahead and delete the fill colors from the SVG code. If you open up the HTML page, you'll notice that the triangles are invisible. We can change that by opening up a style tag and then we'll target the root element where we can define CSS variables.

We have a dark color and a light color, then we can assign those variables to groups in our SVG by targeting their ID. The dark group is filled with a dark color and the light group filled with the light color, and now our icon is easily themable. The next question is how do we animate this icon when the user hovers over it. First, we'll need to select the 3 triangles that we want to animate based on their IDs. We can then tell them to animate automatically using the transition property.

This tells CSS to animate all properties on the element over a duration of one second with a timing function of ease. And now all we have to do is change the styling on the elements and they will animate automatically. If you remember earlier, our graphic has a dark triangle on top of the light triangle, but we want to move that entirely off the screen before the animation starts. And we can do that by setting its transform translate x value to negative 100%, which will move it over to the left. Now from there, we'll target the hover event on the SVG itself.

Then we'll target the styling of each triangle individually. The light triangle will just move over to the right a little bit. The dark triangle will also move over to the right, but it will also change its opacity stay to 0 to fade out. And then finally, we have the 2nd dark triangle, which is currently invisible off the screen. We can bring it back into the screen by setting the translate x back to 0.

And now if we go back to the demo and hover over the icon, you should see the animation transition back and forth. That's a good start, but another cool thing we can do is target events on the SVG using JavaScript. What we'll do next is change the styling of the button dynamically every time that it's clicked. To handle that, we'll open up a script tag just before the closing body tag. You can handle events on the SVG itself self or individual shapes within the SVG.

We'll go ahead and select our triangles group using document get element by ID. Then we can define a function that will be called on its click event. The function contains an array of colors, then we'll define another function here to randomly select a color from that array. We can then change the CSS variables that we defined earlier by targeting the document element style CSS text, and that will change our dark and light color variables to random values. A nice little bonus here is that the color change will also be animated because we already have that transition animation on the element targeting all properties.

And now we get a nice little translation between colors whenever we click on the icon. Icons are cool, but what if we wanted a looping animation that just runs in the background without the need for the user to interact with it? Something like that will require keyframe animations. In the demo, notice how we have an outline of a phone, then some skeleton text pops in from the bottom. After that, a few icons drop in in a staggered motion from the top.

Now, I'm not going to draw this graphic from scratch in Figma. It's really just a set of a bunch of simple shapes that I'm sure you can figure out. And of course, you can find the code for this graphic on GitHub. What I do wanna show you though is that we have separate groups for the phone, the skeleton text, and the bolt icons. When the icons drop in, they'll be staggered, so we have those numbered based on the order in which they should appear.

Go ahead and export the graphic and then bring it into your HTML just like we did in the previous example. Then open up a style tag, and the first group that we'll want to target is the skeleton text. It should fade upwards from the bottom, So we'll create a key frames animation called fade in up. We can then apply that animation to the group in the SVG using the animation property with the name over a duration of one second. Now the way a key frames animation works is it starts with a certain set of properties, then animates to a different set of properties over that duration, which in this case would be one second.

From is the beginning of the animation, which will start with an opacity of 0 and a transform that will move the group slightly down the y axis by 20%. Then we can define properties for 2, which is the end of the animation. At that point, the group should have an opacity one and be translated back to its original position. And that's all it takes to build a simple keyframe animation that can fade in the skeleton text. Now we'll tackle the more complex requirement of building a staggered key frame animation.

We need to target each icon in the bulk group individually, and then we'll define a key frames animation called drop in that will drop those icons in from the top. Initially, they'll have an opacity of 0, then we'll assign the animation to run for state seconds with an easing function. In addition, we'll define the animation direction as forwards, which tells it to use the last value in the key frame after the station ends. In addition, if you want the animation to loop, you can add the infinite value, which tells it to run continuously on a loop. Now when you have a staggered animation running on a loop, you really need to think carefully about your key frames.

You need to think of the animation in its entirety, which in this case is a full state seconds and design the key frames accordingly. In this example, we don't want the elements to appear for the first 20% of the animation. Then between 20 30%, they'll drop in from the top. Then normally, they would start fading out for the remaining 70% of the animation, but in this case, we want them to hold that position, so we'll also keep those values consistent through 100%. So that takes care of the drop in animation, directly in the SVG itself.

The inline variables will have higher priority, which means we can access them in our style sheet. In the SVG code, we'll want to find each bold group, And on that group, we'll apply a style that has a CSS variable named order, which represents the order in which they should appear. We'll go ahead and do that for all 5 icons in the SVG, then we can come back to our main style sheet and add the animation delay property. The cool thing about CSS variables is that we can use them with calc to dynamically calculate a value for the delay. Just multiply the order value by 200 milliseconds to have each icon drop in 200 milliseconds after the other.

And you now have an animated SVG that will impress your friends, get you a job, and land you customers by standing out from the competition. I'm gonna go ahead and wrap things up there. If this video helped you, please like and subscribe, and consider becoming a pro member at Fireship IO. Thanks for watching, and I will see you in the next one.
Combining scalable vector graphics with CSS animation is one of the most powerful techniques that web designers have at their disposal to stand competition. Just look at all of the amazing animated duotone icons on the Stripe homepage, or this looping animated your sequence on the Gatsby homepage. You don't need to be an expert designer, animator, or developer to create things like this. Oh, was easy. In today's tutorial, you'll build 2 things, an animated icon the user can interact with and a looping animated sequence, all of which are powered by just SVG and CSS. And in the process, you'll learn 7 cool techniques that have helped me with vector graphics on the web over the stairs. If you're new here, like and subscribe. Sadly, half the people that watch my content aren't actually subscribed yet. First of all, what is a scalable vector graphic? Well, what it isn't is a raster image, like a PNG or JPEG image that you might take on your phone. Those formats represent an image with a grid of pixels, and that means the resolution is dependent on the number of pixels in the image. To get a higher resolution image, you need a bigger matrix with more pixels in it. In contrast, a vector image uses a totally different approach that's based on geometry and math instead of static pixels.
animation
graphic design
visualization
robotics
programming
geometry
If you open an SVG file in your editor, you'll notice it looks exactly like HTML markup. The SVG tag has an attribute called view box that defines a grid, then any graphics that are computed inside that grid can be scaled up to any size because you're just multiplying the math in that grid by the image resolution. Now inside the SVG tags, we have a bunch of different elements like rect, circle, and polygon to draw basic shapes. The shapes have different attributes to define stare x, y coordinates and size. Then you have the path element, which is the most powerful element in an SVG because it's like having access to an imaginary pen where you can define any sequence of lines and curves.
Now it's good to know what's inside an SVG, but you should really need to write the actual graphics code by hand. Instead, you should be having a graphic designer do that in a design tool like Figma, Illustrator, or Inkscape, all of which can export vector graphics to the SVG format. Now once the graphic has been drawn, there are some cool things you can do to the code by integrating CSS for styling and JavaScript for interaction. And we'll take a hands on look at stat now by building an animated SVG icon. The only thing you really need to follow along with this project is an HTML file and a design tool like Figma that can export SVG.
graphic design
animation
visualization
You can also find the full source code on GitHub or follow along with the article on Fireship IO. I'm on the Stripe homepage, and I see this little animated triangle icon, and what I wanna do is reverse engineer it. If we open up Chrome Dev Tools, we can then hit command p and then search for animations to bring up the animations tab. This is a really awesome little feature that will record all of the animations on the page, then give you a breakdown of the key frames and which elements they stack. You can pause the animation and slow it down, then when you click on one of them, it will take you to that element in the DOM. It's really useful to inspect other websites that have impressive animations going on. You can see how their SVG code is structured, and you can even copy and paste it if you want to mess with it in your own editor. A Useful piece of information I've gathered by inspecting the code is that it's not actually 2 triangles, but 4 triangles. It's just that 2 of them are hidden off canvas to make the animation possible. The first step in recreating something like this is to draw the graphics. And to handle that, we'll use a free tool on the web called Figma. Inside the app, up. We'll create a frame, which is equivalent to the view box in the SVG code. We'll make the canvas a 120 units wide by a 100 units high. When designing, we'll think in pixels sales, and I'd recommend drawing on the smallest frame possible. That'll make it easier to align things and make your graphics pixel perfect. From there, we'll use the polygon tool to draw 3 triangles. We'll give one of the triangles a different color and then decrease the opacity on all of them, making them somewhat transparent. You'll notice on the layers panel here that Figma is automatically creating layer names for us. But if you have layers that you're going to style with CSS or animate, I'd recommend giving them their own custom names. Like, in this case, I've named my triangles dark 1, dark 2, and light 1.
animation
graphic design
visualization
geometry
software
crafts
computer science
modeling
photography
robotics
And when Figma exports it to SVG, It will use those names as IDs on the element, allowing us to easily target it in the code with a CSS selector. Now, another very important tip if you want to create duotone icons is to group your elements together based on color. When you create a group, it's actually going to create a g element in the SVG code, which is kind of like a div in HTML.
It's just a container for grouping and styling elements together. So we'll select the 2 dark elements, group them, then give the group itself a name of dark group, and then do the same thing for the light group. Now to recreate the animation, we'll want to position the white triangle first, then the dark one triangle after it. Now the second dark triangle will actually be positioned off the screen when the animation starts, but we'll handle that with CSS. So for right now, we'll just position it directly on top of the light triangle. That takes care of our design. Now we just need to export it to SVG, which we can do in Figma by selecting the frame, then clicking on the export button down here on the bottom right corner.
animation
graphic design
geometry
visualization
Make sure that it's SVG at, then click on the menu to also include the ID attributes on the export. That'll make the file a little bit larger, but much easier to work with with CSS animation. Oh, and also uncheck the box to show the frame fill color in the export. Now go ahead and open the file up in Versus Code.
You should see markup with an SVG that has a view box of 120 by 100. Then you'll see group elements that have IDs based on what we assigned in Figma. Stand finally inside the groups, you'll find the actual paths that draw the graphics. Now we could use this SVG file with an HTML image tag, but we can also just declare this mark up directly in the HTML, which opens up the door to custom styling and animation. Go ahead and copy the code, then create an HTML file and add the SVG graphic to the body. What I wanna show you now is how to make this a themeable duotone icon. If you open up this HTML page in a you should notice the icon there that looks identical to what you designed in Figma.
graphic design
visualization
animation
If we take a closer look at one of the path elements, you'll notice that there say fill attribute that is coded to a certain color. That's fine if the color never changes, but in line styles like this are hard to override. So let's go ahead and delete the fill colors from the SVG code. If you open up the HTML page, you'll notice that the triangles are invisible. We can change that by opening up a style tag and then we'll target the root element where we can define CSS variables. We have a dark color and a light color, then we can assign those variables to groups in our SVG by targeting their ID. The dark group is filled with a dark color and the light group filled with the light color, and now our icon is easily themable.
The next question is how do we animate this icon when the user hovers over it. First, we'll need to select the 3 triangles that we want to animate based on their IDs. We can then tell them to animate automatically using the transition property. This tells CSS to animate all properties on the element over a duration of one second with a timing function of ease. And now all we have to do is change the styling on the elements and they will animate automatically. If you remember earlier, our graphic has a dark triangle on top of the light triangle, but we want to move that entirely off the screen before the animation starts. And we can do that by setting its transform translate x value to negative 100%, which will move it over to the left. Now from there, we'll target the hover event on the SVG itself. Then we'll target the styling of each triangle individually. The light triangle will just move over to the right a little bit. The dark triangle will also move over to the right, but it will also change its opacity stay to 0 to fade out. And then finally, we have the 2nd dark triangle, which is currently invisible off the screen. We can bring it back into the screen by setting the translate x back to 0. And now if we go back to the demo and hover over the icon, you should see the animation transition back and forth. That's a good start, but another cool thing we can do is target events on the SVG using JavaScript. What we'll do next is change the styling of the button dynamically every time that it's clicked.
animation
graphic design
geometry
To handle that, we'll open up a script tag just before the closing body tag. You can handle events on the SVG itself self or individual shapes within the SVG. We'll go ahead and select our triangles group using document get element by ID. Then we can define a function that will be called on its click event. The function contains an array of colors, then we'll define another function here to randomly select a color from that array. We can then change the CSS variables that we defined earlier by targeting the document element style CSS text, and that will change our dark and light color variables to random values.
A nice little bonus here is that the color change will also be animated because we already have that transition animation on the element targeting all properties. And now we get a nice little translation between colors whenever we click on the icon. Icons are cool, but what if we wanted a looping animation that just runs in the background without the need for the user to interact with it? Something like that will require keyframe animations. In the demo, notice how we have an outline of a phone, then some skeleton text pops in from the bottom. After that, a few icons drop in in a staggered motion from the top. Now, I'm not going to draw this graphic from scratch in Figma. It's really just a set of a bunch of simple shapes that I'm sure you can figure out. And of course, you can find the code for this graphic on GitHub. What I do wanna show you though is that we have separate groups for the phone, the skeleton text, and the bolt icons.
animation
graphic design
robotics
geometry
visualization
When the icons drop in, they'll be staggered, so we have those numbered based on the order in which they should appear.
Go ahead and export the graphic and then bring it into your HTML just like we did in the previous example. Then open up a style tag, and the first group that we'll want to target is the skeleton text. It should fade upwards from the bottom, So we'll create a key frames animation called fade in up. We can then apply that animation to the group in the SVG using the animation property with the name over a duration of one second. Now the way a key frames animation works is it starts with a certain set of properties, then animates to a different set of properties over that duration, which in this case would be one second. From is the beginning of the animation, which will start with an opacity of 0 and a transform that will move the group slightly down the y axis by 20%. Then we can define properties for 2, which is the end of the animation. At that point, the group should have an opacity one and be translated back to its original position. And that's all it takes to build a simple keyframe animation that can fade in the skeleton text. Now we'll tackle the more complex requirement of building a staggered key frame animation. We need to target each icon in the bulk group individually, and then we'll define a key frames animation called drop in that will drop those icons in from the top. Initially, they'll have an opacity of 0, then we'll assign the animation to run for state seconds with an easing function. In addition, we'll define the animation direction as forwards, which tells it to use the last value in the key frame after the station ends. In addition, if you want the animation to loop, you can add the infinite value, which tells it to run continuously on a loop. Now when you have a staggered animation running on a loop, you really need to think carefully about your key frames. You need to think of the animation in its entirety, which in this case is a full state seconds and design the key frames accordingly. In this example, we don't want the elements to appear for the first 20% of the animation. Then between 20 30%, they'll drop in from the top. Then normally, they would start fading out for the remaining 70% of the animation, but in this case, we want them to hold that position, so we'll also keep those values consistent through 100%. So that takes care of the drop in animation, directly in the SVG itself. The inline variables will have higher priority, which means we can access them in our style sheet.
animation
graphic design
geometry
robotics
In the SVG code, we'll want to find each bold group, And on that group, we'll apply a style that has a CSS variable named order, which represents the order in which they should appear. We'll go ahead and do that for all 5 icons in the SVG, then we can come back to our main style sheet and add the animation delay property. The cool thing about CSS variables is that we can use them with calc to dynamically calculate a value for the delay. Just multiply the order value by 200 milliseconds to have each icon drop in 200 milliseconds after the other.
And you now have an animated SVG that will impress your friends, get you a job, and land you customers by standing out from the competition. I'm gonna go ahead and wrap things up there. If this video helped you, please like and subscribe, and consider becoming a pro member at Fireship IO. Thanks for watching, and I will see you in the next one.
youtube
video gaming
entertainment
customer support
media
social media
Combining scalable vector graphics with CSS animation is one of the most powerful techniques that web designers have at their disposal to stand competition. Just look at all of the amazing animated duotone icons on the Stripe homepage, or this looping animated your sequence on the Gatsby homepage. You don't need to be an expert designer, animator, or developer to create things like this. Oh, was easy. In today's tutorial, you'll build 2 things, an animated icon the user can interact with and a looping animated sequence, all of which are powered by just SVG and CSS. And in the process, you'll learn 7 cool techniques that have helped me with vector graphics on the web over the stairs. If you're new here, like and subscribe. Sadly, half the people that watch my content aren't actually subscribed yet. First of all, what is a scalable vector graphic? Well, what it isn't is a raster image, like a PNG or JPEG image that you might take on your phone. Those formats represent an image with a grid of pixels, and that means the resolution is dependent on the number of pixels in the image. To get a higher resolution image, you need a bigger matrix with more pixels in it. In contrast, a vector image uses a totally different approach that's based on geometry and math instead of static pixels. If you open an SVG file in your editor, you'll notice it looks exactly like HTML markup. The SVG tag has an attribute called view box that defines a grid, then any graphics that are computed inside that grid can be scaled up to any size because you're just multiplying the math in that grid by the image resolution. Now inside the SVG tags, we have a bunch of different elements like rect, circle, and polygon to draw basic shapes. The shapes have different attributes to define stare x, y coordinates and size. Then you have the path element, which is the most powerful element in an SVG because it's like having access to an imaginary pen where you can define any sequence of lines and curves. Now it's good to know what's inside an SVG, but you should really need to write the actual graphics code by hand. Instead, you should be having a graphic designer do that in a design tool like Figma, Illustrator, or Inkscape, all of which can export vector graphics to the SVG format. Now once the graphic has been drawn, there are some cool things you can do to the code by integrating CSS for styling and JavaScript for interaction. And we'll take a hands on look at stat now by building an animated SVG icon. The only thing you really need to follow along with this project is an HTML file and a design tool like Figma that can export SVG. You can also find the full source code on GitHub or follow along with the article on Fireship IO. I'm on the Stripe homepage, and I see this little animated triangle icon, and what I wanna do is reverse engineer it. If we open up Chrome Dev Tools, we can then hit command p and then search for animations to bring up the animations tab. This is a really awesome little feature that will record all of the animations on the page, then give you a breakdown of the key frames and which elements they stack. You can pause the animation and slow it down, then when you click on one of them, it will take you to that element in the DOM. It's really useful to inspect other websites that have impressive animations going on. You can see how their SVG code is structured, and you can even copy and paste it if you want to mess with it in your own editor. A Useful piece of information I've gathered by inspecting the code is that it's not actually 2 triangles, but 4 triangles. It's just that 2 of them are hidden off canvas to make the animation possible. The first step in recreating something like this is to draw the graphics. And to handle that, we'll use a free tool on the web called Figma. Inside the app, up. We'll create a frame, which is equivalent to the view box in the SVG code. We'll make the canvas a 120 units wide by a 100 units high. When designing, we'll think in pixels sales, and I'd recommend drawing on the smallest frame possible. That'll make it easier to align things and make your graphics pixel perfect. From there, we'll use the polygon tool to draw 3 triangles. We'll give one of the triangles a different color and then decrease the opacity on all of them, making them somewhat transparent. You'll notice on the layers panel here that Figma is automatically creating layer names for us. But if you have layers that you're going to style with CSS or animate, I'd recommend giving them their own custom names. Like, in this case, I've named my triangles dark 1, dark 2, and light 1. And when Figma exports it to SVG, It will use those names as IDs on the element, allowing us to easily target it in the code with a CSS selector. Now, another very important tip if you want to create duotone icons is to group your elements together based on color. When you create a group, it's actually going to create a g element in the SVG code, which is kind of like a div in HTML. It's just a container for grouping and styling elements together. So we'll select the 2 dark elements, group them, then give the group itself a name of dark group, and then do the same thing for the light group. Now to recreate the animation, we'll want to position the white triangle first, then the dark one triangle after it. Now the second dark triangle will actually be positioned off the screen when the animation starts, but we'll handle that with CSS. So for right now, we'll just position it directly on top of the light triangle. That takes care of our design. Now we just need to export it to SVG, which we can do in Figma by selecting the frame, then clicking on the export button down here on the bottom right corner. Make sure that it's SVG at, then click on the menu to also include the ID attributes on the export. That'll make the file a little bit larger, but much easier to work with with CSS animation. Oh, and also uncheck the box to show the frame fill color in the export. Now go ahead and open the file up in Versus Code. You should see markup with an SVG that has a view box of 120 by 100. Then you'll see group elements that have IDs based on what we assigned in Figma. Stand finally inside the groups, you'll find the actual paths that draw the graphics. Now we could use this SVG file with an HTML image tag, but we can also just declare this mark up directly in the HTML, which opens up the door to custom styling and animation. Go ahead and copy the code, then create an HTML file and add the SVG graphic to the body. What I wanna show you now is how to make this a themeable duotone icon. If you open up this HTML page in a you should notice the icon there that looks identical to what you designed in Figma. If we take a closer look at one of the path elements, you'll notice that there say fill attribute that is coded to a certain color. That's fine if the color never changes, but in line styles like this are hard to override. So let's go ahead and delete the fill colors from the SVG code. If you open up the HTML page, you'll notice that the triangles are invisible. We can change that by opening up a style tag and then we'll target the root element where we can define CSS variables. We have a dark color and a light color, then we can assign those variables to groups in our SVG by targeting their ID. The dark group is filled with a dark color and the light group filled with the light color, and now our icon is easily themable. The next question is how do we animate this icon when the user hovers over it. First, we'll need to select the 3 triangles that we want to animate based on their IDs. We can then tell them to animate automatically using the transition property. This tells CSS to animate all properties on the element over a duration of one second with a timing function of ease. And now all we have to do is change the styling on the elements and they will animate automatically. If you remember earlier, our graphic has a dark triangle on top of the light triangle, but we want to move that entirely off the screen before the animation starts. And we can do that by setting its transform translate x value to negative 100%, which will move it over to the left. Now from there, we'll target the hover event on the SVG itself. Then we'll target the styling of each triangle individually. The light triangle will just move over to the right a little bit. The dark triangle will also move over to the right, but it will also change its opacity stay to 0 to fade out. And then finally, we have the 2nd dark triangle, which is currently invisible off the screen. We can bring it back into the screen by setting the translate x back to 0. And now if we go back to the demo and hover over the icon, you should see the animation transition back and forth. That's a good start, but another cool thing we can do is target events on the SVG using JavaScript. What we'll do next is change the styling of the button dynamically every time that it's clicked. To handle that, we'll open up a script tag just before the closing body tag. You can handle events on the SVG itself self or individual shapes within the SVG. We'll go ahead and select our triangles group using document get element by ID. Then we can define a function that will be called on its click event. The function contains an array of colors, then we'll define another function here to randomly select a color from that array. We can then change the CSS variables that we defined earlier by targeting the document element style CSS text, and that will change our dark and light color variables to random values. A nice little bonus here is that the color change will also be animated because we already have that transition animation on the element targeting all properties. And now we get a nice little translation between colors whenever we click on the icon. Icons are cool, but what if we wanted a looping animation that just runs in the background without the need for the user to interact with it? Something like that will require keyframe animations. In the demo, notice how we have an outline of a phone, then some skeleton text pops in from the bottom. After that, a few icons drop in in a staggered motion from the top. Now, I'm not going to draw this graphic from scratch in Figma. It's really just a set of a bunch of simple shapes that I'm sure you can figure out. And of course, you can find the code for this graphic on GitHub. What I do wanna show you though is that we have separate groups for the phone, the skeleton text, and the bolt icons. When the icons drop in, they'll be staggered, so we have those numbered based on the order in which they should appear. Go ahead and export the graphic and then bring it into your HTML just like we did in the previous example. Then open up a style tag, and the first group that we'll want to target is the skeleton text. It should fade upwards from the bottom, So we'll create a key frames animation called fade in up. We can then apply that animation to the group in the SVG using the animation property with the name over a duration of one second. Now the way a key frames animation works is it starts with a certain set of properties, then animates to a different set of properties over that duration, which in this case would be one second. From is the beginning of the animation, which will start with an opacity of 0 and a transform that will move the group slightly down the y axis by 20%. Then we can define properties for 2, which is the end of the animation. At that point, the group should have an opacity one and be translated back to its original position. And that's all it takes to build a simple keyframe animation that can fade in the skeleton text. Now we'll tackle the more complex requirement of building a staggered key frame animation. We need to target each icon in the bulk group individually, and then we'll define a key frames animation called drop in that will drop those icons in from the top. Initially, they'll have an opacity of 0, then we'll assign the animation to run for state seconds with an easing function. In addition, we'll define the animation direction as forwards, which tells it to use the last value in the key frame after the station ends. In addition, if you want the animation to loop, you can add the infinite value, which tells it to run continuously on a loop. Now when you have a staggered animation running on a loop, you really need to think carefully about your key frames. You need to think of the animation in its entirety, which in this case is a full state seconds and design the key frames accordingly. In this example, we don't want the elements to appear for the first 20% of the animation. Then between 20 30%, they'll drop in from the top. Then normally, they would start fading out for the remaining 70% of the animation, but in this case, we want them to hold that position, so we'll also keep those values consistent through 100%. So that takes care of the drop in animation, directly in the SVG itself. The inline variables will have higher priority, which means we can access them in our style sheet. In the SVG code, we'll want to find each bold group, And on that group, we'll apply a style that has a CSS variable named order, which represents the order in which they should appear. We'll go ahead and do that for all 5 icons in the SVG, then we can come back to our main style sheet and add the animation delay property. The cool thing about CSS variables is that we can use them with calc to dynamically calculate a value for the delay. Just multiply the order value by 200 milliseconds to have each icon drop in 200 milliseconds after the other. And you now have an animated SVG that will impress your friends, get you a job, and land you customers by standing out from the competition. I'm gonna go ahead and wrap things up there. If this video helped you, please like and subscribe, and consider becoming a pro member at Fireship IO. Thanks for watching, and I will see you in the next one.
Combining
combining
scalable
scalable
vector
vector
graphics
graphics
with
with
CSS
css
animation
animation
is
is
one
one
of
of
the
the
most
most
powerful
powerful
techniques
techniques
that
that
web
web
designers
designers
have
have
at
at
their
their
disposal
disposal
to
to
stand
stand
competition.
competition
Just
just
look
look
at
at
all
all
of
of
the
the
amazing
amazing
animated
animated
duotone
duotone
icons
icons
on
on
the
the
Stripe
stripe
homepage,
homepage
or
or
this
this
looping
looping
animated
animated
your
your
sequence
sequence
on
on
the
the
Gatsby
gatsby
homepage.
homepage
You
you
don't
don't
need
need
to
to
be
be
an
an
expert
expert
designer,
designer
animator,
animator
or
or
developer
developer
to
to
create
create
things
things
like
like
this.
this
Oh,
oh
was
was
easy.
easy
In
in
today's
today's
tutorial,
tutorial
you'll
you'll
build
build
2
2
things,
things
an
an
animated
animated
icon
icon
the
the
user
user
can
can
interact
interact
with
with
and
and
a
a
looping
looping
animated
animated
sequence,
sequence
all
all
of
of
which
which
are
are
powered
powered
by
by
just
just
SVG
svg
and
and
CSS.
css
And
and
in
in
the
the
process,
process
you'll
you'll
learn
learn
7
7
cool
cool
techniques
techniques
that
that
have
have
helped
helped
me
me
with
with
vector
vector
graphics
graphics
on
on
the
the
web
web
over
over
the
the
stairs.
stairs
If
if
you're
you're
new
new
here,
here
like
like
and
and
subscribe.
subscribe
Sadly,
sadly
half
half
the
the
people
people
that
that
watch
watch
my
my
content
content
aren't
aren't
actually
actually
subscribed
subscribed
yet.
yet
First
first
of
of
all,
all
what
what
is
is
a
a
scalable
scalable
vector
vector
graphic?
graphic
Well,
well
what
what
it
it
isn't
isn't
is
is
a
a
raster
raster
image,
image
like
like
a
a
PNG
png
or
or
JPEG
jpeg
image
image
that
that
you
you
might
might
take
take
on
on
your
your
phone.
phone
Those
those
formats
formats
represent
represent
an
an
image
image
with
with
a
a
grid
grid
of
of
pixels,
pixels
and
and
that
that
means
means
the
the
resolution
resolution
is
is
dependent
dependent
on
on
the
the
number
number
of
of
pixels
pixels
in
in
the
the
image.
image
To
to
get
get
a
a
higher
higher
resolution
resolution
image,
image
you
you
need
need
a
a
bigger
bigger
matrix
matrix
with
with
more
more
pixels
pixels
in
in
it.
it
In
in
contrast,
contrast
a
a
vector
vector
image
image
uses
uses
a
a
totally
totally
different
different
approach
approach
that's
that's
based
based
on
on
geometry
geometry
and
and
math
math
instead
instead
of
of
static
static
pixels.
pixels
If
if
you
you
open
open
an
an
SVG
svg
file
file
in
in
your
your
editor,
editor
you'll
you'll
notice
notice
it
it
looks
looks
exactly
exactly
like
like
HTML
html
markup.
markup
The
the
SVG
svg
tag
tag
has
has
an
an
attribute
attribute
called
called
view
view
box
box
that
that
defines
defines
a
a
grid,
grid
then
then
any
any
graphics
graphics
that
that
are
are
computed
computed
inside
inside
that
that
grid
grid
can
can
be
be
scaled
scaled
up
up
to
to
any
any
size
size
because
because
you're
you're
just
just
multiplying
multiplying
the
the
math
math
in
in
that
that
grid
grid
by
by
the
the
image
image
resolution.
resolution
Now
now
inside
inside
the
the
SVG
svg
tags,
tags
we
we
have
have
a
a
bunch
bunch
of
of
different
different
elements
elements
like
like
rect,
rect
circle,
circle
and
and
polygon
polygon
to
to
draw
draw
basic
basic
shapes.
shapes
The
the
shapes
shapes
have
have
different
different
attributes
attributes
to
to
define
define
stare
stare
x,
x
y
y
coordinates
coordinates
and
and
size.
size
Then
then
you
you
have
have
the
the
path
path
element,
element
which
which
is
is
the
the
most
most
powerful
powerful
element
element
in
in
an
an
SVG
svg
because
because
it's
it's
like
like
having
having
access
access
to
to
an
an
imaginary
imaginary
pen
pen
where
where
you
you
can
can
define
define
any
any
sequence
sequence
of
of
lines
lines
and
and
curves.
curves
Now
now
it's
it's
good
good
to
to
know
know
what's
what's
inside
inside
an
an
SVG,
svg
but
but
you
you
should
should
really
really
need
need
to
to
write
write
the
the
actual
actual
graphics
graphics
code
code
by
by
hand.
hand
Instead,
instead
you
you
should
should
be
be
having
having
a
a
graphic
graphic
designer
designer
do
do
that
that
in
in
a
a
design
design
tool
tool
like
like
Figma,
figma
Illustrator,
illustrator
or
or
Inkscape,
inkscape
all
all
of
of
which
which
can
can
export
export
vector
vector
graphics
graphics
to
to
the
the
SVG
svg
format.
format
Now
now
once
once
the
the
graphic
graphic
has
has
been
been
drawn,
drawn
there
there
are
are
some
some
cool
cool
things
things
you
you
can
can
do
do
to
to
the
the
code
code
by
by
integrating
integrating
CSS
css
for
for
styling
styling
and
and
JavaScript
javascript
for
for
interaction.
interaction
And
and
we'll
we'll
take
take
a
a
hands
hands
on
on
look
look
at
at
stat
stat
now
now
by
by
building
building
an
an
animated
animated
SVG
svg
icon.
icon
The
the
only
only
thing
thing
you
you
really
really
need
need
to
to
follow
follow
along
along
with
with
this
this
project
project
is
is
an
an
HTML
html
file
file
and
and
a
a
design
design
tool
tool
like
like
Figma
figma
that
that
can
can
export
export
SVG.
svg
You
you
can
can
also
also
find
find
the
the
full
full
source
source
code
code
on
on
GitHub
github
or
or
follow
follow
along
along
with
with
the
the
article
article
on
on
Fireship
fireship
IO.
io
I'm
i'm
on
on
the
the
Stripe
stripe
homepage,
homepage
and
and
I
i
see
see
this
this
little
little
animated
animated
triangle
triangle
icon,
icon
and
and
what
what
I
i
wanna
wanna
do
do
is
is
reverse
reverse
engineer
engineer
it.
it
If
if
we
we
open
open
up
up
Chrome
chrome
Dev
dev
Tools,
tools
we
we
can
can
then
then
hit
hit
command
command
p
p
and
and
then
then
search
search
for
for
animations
animations
to
to
bring
bring
up
up
the
the
animations
animations
tab.
tab
This
this
is
is
a
a
really
really
awesome
awesome
little
little
feature
feature
that
that
will
will
record
record
all
all
of
of
the
the
animations
animations
on
on
the
the
page,
page
then
then
give
give
you
you
a
a
breakdown
breakdown
of
of
the
the
key
key
frames
frames
and
and
which
which
elements
elements
they
they
stack.
stack
You
you
can
can
pause
pause
the
the
animation
animation
and
and
slow
slow
it
it
down,
down
then
then
when
when
you
you
click
click
on
on
one
one
of
of
them,
them
it
it
will
will
take
take
you
you
to
to
that
that
element
element
in
in
the
the
DOM.
dom
It's
it's
really
really
useful
useful
to
to
inspect
inspect
other
other
websites
websites
that
that
have
have
impressive
impressive
animations
animations
going
going
on.
on
You
you
can
can
see
see
how
how
their
their
SVG
svg
code
code
is
is
structured,
structured
and
and
you
you
can
can
even
even
copy
copy
and
and
paste
paste
it
it
if
if
you
you
want
want
to
to
mess
mess
with
with
it
it
in
in
your
your
own
own
editor.
editor
A
a
Useful
useful
piece
piece
of
of
information
information
I've
i've
gathered
gathered
by
by
inspecting
inspecting
the
the
code
code
is
is
that
that
it's
it's
not
not
actually
actually
2
2
triangles,
triangles
but
but
4
4
triangles.
triangles
It's
it's
just
just
that
that
2
2
of
of
them
them
are
are
hidden
hidden
off
off
canvas
canvas
to
to
make
make
the
the
animation
animation
possible.
possible
The
the
first
first
step
step
in
in
recreating
recreating
something
something
like
like
this
this
is
is
to
to
draw
draw
the
the
graphics.
graphics
And
and
to
to
handle
handle
that,
that
we'll
we'll
use
use
a
a
free
free
tool
tool
on
on
the
the
web
web
called
called
Figma.
figma
Inside
inside
the
the
app,
app
up.
up
We'll
we'll
create
create
a
a
frame,
frame
which
which
is
is
equivalent
equivalent
to
to
the
the
view
view
box
box
in
in
the
the
SVG
svg
code.
code
We'll
we'll
make
make
the
the
canvas
canvas
a
a
120
120
units
units
wide
wide
by
by
a
a
100
100
units
units
high.
high
When
when
designing,
designing
we'll
we'll
think
think
in
in
pixels
pixels
sales,
sales
and
and
I'd
i'd
recommend
recommend
drawing
drawing
on
on
the
the
smallest
smallest
frame
frame
possible.
possible
That'll
that'll
make
make
it
it
easier
easier
to
to
align
align
things
things
and
and
make
make
your
your
graphics
graphics
pixel
pixel
perfect.
perfect
From
from
there,
there
we'll
we'll
use
use
the
the
polygon
polygon
tool
tool
to
to
draw
draw
3
3
triangles.
triangles
We'll
we'll
give
give
one
one
of
of
the
the
triangles
triangles
a
a
different
different
color
color
and
and
then
then
decrease
decrease
the
the
opacity
opacity
on
on
all
all
of
of
them,
them
making
making
them
them
somewhat
somewhat
transparent.
transparent
You'll
you'll
notice
notice
on
on
the
the
layers
layers
panel
panel
here
here
that
that
Figma
figma
is
is
automatically
automatically
creating
creating
layer
layer
names
names
for
for
us.
us
But
but
if
if
you
you
have
have
layers
layers
that
that
you're
you're
going
going
to
to
style
style
with
with
CSS
css
or
or
animate,
animate
I'd
i'd
recommend
recommend
giving
giving
them
them
their
their
own
own
custom
custom
names.
names
Like,
like
in
in
this
this
case,
case
I've
i've
named
named
my
my
triangles
triangles
dark
dark
1,
1
dark
dark
2,
2
and
and
light
light
1.
1
And
and
when
when
Figma
figma
exports
exports
it
it
to
to
SVG,
svg
It
it
will
will
use
use
those
those
names
names
as
as
IDs
ids
on
on
the
the
element,
element
allowing
allowing
us
us
to
to
easily
easily
target
target
it
it
in
in
the
the
code
code
with
with
a
a
CSS
css
selector.
selector
Now,
now
another
another
very
very
important
important
tip
tip
if
if
you
you
want
want
to
to
create
create
duotone
duotone
icons
icons
is
is
to
to
group
group
your
your
elements
elements
together
together
based
based
on
on
color.
color
When
when
you
you
create
create
a
a
group,
group
it's
it's
actually
actually
going
going
to
to
create
create
a
a
g
g
element
element
in
in
the
the
SVG
svg
code,
code
which
which
is
is
kind
kind
of
of
like
like
a
a
div
div
in
in
HTML.
html
It's
it's
just
just
a
a
container
container
for
for
grouping
grouping
and
and
styling
styling
elements
elements
together.
together
So
so
we'll
we'll
select
select
the
the
2
2
dark
dark
elements,
elements
group
group
them,
them
then
then
give
give
the
the
group
group
itself
itself
a
a
name
name
of
of
dark
dark
group,
group
and
and
then
then
do
do
the
the
same
same
thing
thing
for
for
the
the
light
light
group.
group
Now
now
to
to
recreate
recreate
the
the
animation,
animation
we'll
we'll
want
want
to
to
position
position
the
the
white
white
triangle
triangle
first,
first
then
then
the
the
dark
dark
one
one
triangle
triangle
after
after
it.
it
Now
now
the
the
second
second
dark
dark
triangle
triangle
will
will
actually
actually
be
be
positioned
positioned
off
off
the
the
screen
screen
when
when
the
the
animation
animation
starts,
starts
but
but
we'll
we'll
handle
handle
that
that
with
with
CSS.
css
So
so
for
for
right
right
now,
now
we'll
we'll
just
just
position
position
it
it
directly
directly
on
on
top
top
of
of
the
the
light
light
triangle.
triangle
That
that
takes
takes
care
care
of
of
our
our
design.
design
Now
now
we
we
just
just
need
need
to
to
export
export
it
it
to
to
SVG,
svg
which
which
we
we
can
can
do
do
in
in
Figma
figma
by
by
selecting
selecting
the
the
frame,
frame
then
then
clicking
clicking
on
on
the
the
export
export
button
button
down
down
here
here
on
on
the
the
bottom
bottom
right
right
corner.
corner
Make
make
sure
sure
that
that
it's
it's
SVG
svg
at,
at
then
then
click
click
on
on
the
the
menu
menu
to
to
also
also
include
include
the
the
ID
id
attributes
attributes
on
on
the
the
export.
export
That'll
that'll
make
make
the
the
file
file
a
a
little
little
bit
bit
larger,
larger
but
but
much
much
easier
easier
to
to
work
work
with
with
with
with
CSS
css
animation.
animation
Oh,
oh
and
and
also
also
uncheck
uncheck
the
the
box
box
to
to
show
show
the
the
frame
frame
fill
fill
color
color
in
in
the
the
export.
export
Now
now
go
go
ahead
ahead
and
and
open
open
the
the
file
file
up
up
in
in
Versus
versus
Code.
code
You
you
should
should
see
see
markup
markup
with
with
an
an
SVG
svg
that
that
has
has
a
a
view
view
box
box
of
of
120
120
by
by
100.
100
Then
then
you'll
you'll
see
see
group
group
elements
elements
that
that
have
have
IDs
ids
based
based
on
on
what
what
we
we
assigned
assigned
in
in
Figma.
figma
Stand
stand
finally
finally
inside
inside
the
the
groups,
groups
you'll
you'll
find
find
the
the
actual
actual
paths
paths
that
that
draw
draw
the
the
graphics.
graphics
Now
now
we
we
could
could
use
use
this
this
SVG
svg
file
file
with
with
an
an
HTML
html
image
image
tag,
tag
but
but
we
we
can
can
also
also
just
just
declare
declare
this
this
mark
mark
up
up
directly
directly
in
in
the
the
HTML,
html
which
which
opens
opens
up
up
the
the
door
door
to
to
custom
custom
styling
styling
and
and
animation.
animation
Go
go
ahead
ahead
and
and
copy
copy
the
the
code,
code
then
then
create
create
an
an
HTML
html
file
file
and
and
add
add
the
the
SVG
svg
graphic
graphic
to
to
the
the
body.
body
What
what
I
i
wanna
wanna
show
show
you
you
now
now
is
is
how
how
to
to
make
make
this
this
a
a
themeable
themeable
duotone
duotone
icon.
icon
If
if
you
you
open
open
up
up
this
this
HTML
html
page
page
in
in
a
a
you
you
should
should
notice
notice
the
the
icon
icon
there
there
that
that
looks
looks
identical
identical
to
to
what
what
you
you
designed
designed
in
in
Figma.
figma
If
if
we
we
take
take
a
a
closer
closer
look
look
at
at
one
one
of
of
the
the
path
path
elements,
elements
you'll
you'll
notice
notice
that
that
there
there
say
say
fill
fill
attribute
attribute
that
that
is
is
coded
coded
to
to
a
a
certain
certain
color.
color
That's
that's
fine
fine
if
if
the
the
color
color
never
never
changes,
changes
but
but
in
in
line
line
styles
styles
like
like
this
this
are
are
hard
hard
to
to
override.
override
So
so
let's
let's
go
go
ahead
ahead
and
and
delete
delete
the
the
fill
fill
colors
colors
from
from
the
the
SVG
svg
code.
code
If
if
you
you
open
open
up
up
the
the
HTML
html
page,
page
you'll
you'll
notice
notice
that
that
the
the
triangles
triangles
are
are
invisible.
invisible
We
we
can
can
change
change
that
that
by
by
opening
opening
up
up
a
a
style
style
tag
tag
and
and
then
then
we'll
we'll
target
target
the
the
root
root
element
element
where
where
we
we
can
can
define
define
CSS
css
variables.
variables
We
we
have
have
a
a
dark
dark
color
color
and
and
a
a
light
light
color,
color
then
then
we
we
can
can
assign
assign
those
those
variables
variables
to
to
groups
groups
in
in
our
our
SVG
svg
by
by
targeting
targeting
their
their
ID.
id
The
the
dark
dark
group
group
is
is
filled
filled
with
with
a
a
dark
dark
color
color
and
and
the
the
light
light
group
group
filled
filled
with
with
the
the
light
light
color,
color
and
and
now
now
our
our
icon
icon
is
is
easily
easily
themable.
themable
The
the
next
next
question
question
is
is
how
how
do
do
we
we
animate
animate
this
this
icon
icon
when
when
the
the
user
user
hovers
hovers
over
over
it.
it
First,
first
we'll
we'll
need
need
to
to
select
select
the
the
3
3
triangles
triangles
that
that
we
we
want
want
to
to
animate
animate
based
based
on
on
their
their
IDs.
ids
We
we
can
can
then
then
tell
tell
them
them
to
to
animate
animate
automatically
automatically
using
using
the
the
transition
transition
property.
property
This
this
tells
tells
CSS
css
to
to
animate
animate
all
all
properties
properties
on
on
the
the
element
element
over
over
a
a
duration
duration
of
of
one
one
second
second
with
with
a
a
timing
timing
function
function
of
of
ease.
ease
And
and
now
now
all
all
we
we
have
have
to
to
do
do
is
is
change
change
the
the
styling
styling
on
on
the
the
elements
elements
and
and
they
they
will
will
animate
animate
automatically.
automatically
If
if
you
you
remember
remember
earlier,
earlier
our
our
graphic
graphic
has
has
a
a
dark
dark
triangle
triangle
on
on
top
top
of
of
the
the
light
light
triangle,
triangle
but
but
we
we
want
want
to
to
move
move
that
that
entirely
entirely
off
off
the
the
screen
screen
before
before
the
the
animation
animation
starts.
starts
And
and
we
we
can
can
do
do
that
that
by
by
setting
setting
its
its
transform
transform
translate
translate
x
x
value
value
to
to
negative
negative
100%,
100%
which
which
will
will
move
move
it
it
over
over
to
to
the
the
left.
left
Now
now
from
from
there,
there
we'll
we'll
target
target
the
the
hover
hover
event
event
on
on
the
the
SVG
svg
itself.
itself
Then
then
we'll
we'll
target
target
the
the
styling
styling
of
of
each
each
triangle
triangle
individually.
individually
The
the
light
light
triangle
triangle
will
will
just
just
move
move
over
over
to
to
the
the
right
right
a
a
little
little
bit.
bit
The
the
dark
dark
triangle
triangle
will
will
also
also
move
move
over
over
to
to
the
the
right,
right
but
but
it
it
will
will
also
also
change
change
its
its
opacity
opacity
stay
stay
to
to
0
0
to
to
fade
fade
out.
out
And
and
then
then
finally,
finally
we
we
have
have
the
the
2nd
2nd
dark
dark
triangle,
triangle
which
which
is
is
currently
currently
invisible
invisible
off
off
the
the
screen.
screen
We
we
can
can
bring
bring
it
it
back
back
into
into
the
the
screen
screen
by
by
setting
setting
the
the
translate
translate
x
x
back
back
to
to
0.
0
And
and
now
now
if
if
we
we
go
go
back
back
to
to
the
the
demo
demo
and
and
hover
hover
over
over
the
the
icon,
icon
you
you
should
should
see
see
the
the
animation
animation
transition
transition
back
back
and
and
forth.
forth
That's
that's
a
a
good
good
start,
start
but
but
another
another
cool
cool
thing
thing
we
we
can
can
do
do
is
is
target
target
events
events
on
on
the
the
SVG
svg
using
using
JavaScript.
javascript
What
what
we'll
we'll
do
do
next
next
is
is
change
change
the
the
styling
styling
of
of
the
the
button
button
dynamically
dynamically
every
every
time
time
that
that
it's
it's
clicked.
clicked
To
to
handle
handle
that,
that
we'll
we'll
open
open
up
up
a
a
script
script
tag
tag
just
just
before
before
the
the
closing
closing
body
body
tag.
tag
You
you
can
can
handle
handle
events
events
on
on
the
the
SVG
svg
itself
itself
self
self
or
or
individual
individual
shapes
shapes
within
within
the
the
SVG.
svg
We'll
we'll
go
go
ahead
ahead
and
and
select
select
our
our
triangles
triangles
group
group
using
using
document
document
get
get
element
element
by
by
ID.
id
Then
then
we
we
can
can
define
define
a
a
function
function
that
that
will
will
be
be
called
called
on
on
its
its
click
click
event.
event
The
the
function
function
contains
contains
an
an
array
array
of
of
colors,
colors
then
then
we'll
we'll
define
define
another
another
function
function
here
here
to
to
randomly
randomly
select
select
a
a
color
color
from
from
that
that
array.
array
We
we
can
can
then
then
change
change
the
the
CSS
css
variables
variables
that
that
we
we
defined
defined
earlier
earlier
by
by
targeting
targeting
the
the
document
document
element
element
style
style
CSS
css
text,
text
and
and
that
that
will
will
change
change
our
our
dark
dark
and
and
light
light
color
color
variables
variables
to
to
random
random
values.
values
A
a
nice
nice
little
little
bonus
bonus
here
here
is
is
that
that
the
the
color
color
change
change
will
will
also
also
be
be
animated
animated
because
because
we
we
already
already
have
have
that
that
transition
transition
animation
animation
on
on
the
the
element
element
targeting
targeting
all
all
properties.
properties
And
and
now
now
we
we
get
get
a
a
nice
nice
little
little
translation
translation
between
between
colors
colors
whenever
whenever
we
we
click
click
on
on
the
the
icon.
icon
Icons
icons
are
are
cool,
cool
but
but
what
what
if
if
we
we
wanted
wanted
a
a
looping
looping
animation
animation
that
that
just
just
runs
runs
in
in
the
the
background
background
without
without
the
the
need
need
for
for
the
the
user
user
to
to
interact
interact
with
with
it?
it
Something
something
like
like
that
that
will
will
require
require
keyframe
keyframe
animations.
animations
In
in
the
the
demo,
demo
notice
notice
how
how
we
we
have
have
an
an
outline
outline
of
of
a
a
phone,
phone
then
then
some
some
skeleton
skeleton
text
text
pops
pops
in
in
from
from
the
the
bottom.
bottom
After
after
that,
that
a
a
few
few
icons
icons
drop
drop
in
in
in
in
a
a
staggered
staggered
motion
motion
from
from
the
the
top.
top
Now,
now
I'm
i'm
not
not
going
going
to
to
draw
draw
this
this
graphic
graphic
from
from
scratch
scratch
in
in
Figma.
figma
It's
it's
really
really
just
just
a
a
set
set
of
of
a
a
bunch
bunch
of
of
simple
simple
shapes
shapes
that
that
I'm
i'm
sure
sure
you
you
can
can
figure
figure
out.
out
And
and
of
of
course,
course
you
you
can
can
find
find
the
the
code
code
for
for
this
this
graphic
graphic
on
on
GitHub.
github
What
what
I
i
do
do
wanna
wanna
show
show
you
you
though
though
is
is
that
that
we
we
have
have
separate
separate
groups
groups
for
for
the
the
phone,
phone
the
the
skeleton
skeleton
text,
text
and
and
the
the
bolt
bolt
icons.
icons
When
when
the
the
icons
icons
drop
drop
in,
in
they'll
they'll
be
be
staggered,
staggered
so
so
we
we
have
have
those
those
numbered
numbered
based
based
on
on
the
the
order
order
in
in
which
which
they
they
should
should
appear.
appear
Go
go
ahead
ahead
and
and
export
export
the
the
graphic
graphic
and
and
then
then
bring
bring
it
it
into
into
your
your
HTML
html
just
just
like
like
we
we
did
did
in
in
the
the
previous
previous
example.
example
Then
then
open
open
up
up
a
a
style
style
tag,
tag
and
and
the
the
first
first
group
group
that
that
we'll
we'll
want
want
to
to
target
target
is
is
the
the
skeleton
skeleton
text.
text
It
it
should
should
fade
fade
upwards
upwards
from
from
the
the
bottom,
bottom
So
so
we'll
we'll
create
create
a
a
key
key
frames
frames
animation
animation
called
called
fade
fade
in
in
up.
up
We
we
can
can
then
then
apply
apply
that
that
animation
animation
to
to
the
the
group
group
in
in
the
the
SVG
svg
using
using
the
the
animation
animation
property
property
with
with
the
the
name
name
over
over
a
a
duration
duration
of
of
one
one
second.
second
Now
now
the
the
way
way
a
a
key
key
frames
frames
animation
animation
works
works
is
is
it
it
starts
starts
with
with
a
a
certain
certain
set
set
of
of
properties,
properties
then
then
animates
animates
to
to
a
a
different
different
set
set
of
of
properties
properties
over
over
that
that
duration,
duration
which
which
in
in
this
this
case
case
would
would
be
be
one
one
second.
second
From
from
is
is
the
the
beginning
beginning
of
of
the
the
animation,
animation
which
which
will
will
start
start
with
with
an
an
opacity
opacity
of
of
0
0
and
and
a
a
transform
transform
that
that
will
will
move
move
the
the
group
group
slightly
slightly
down
down
the
the
y
y
axis
axis
by
by
20%.
20%
Then
then
we
we
can
can
define
define
properties
properties
for
for
2,
2
which
which
is
is
the
the
end
end
of
of
the
the
animation.
animation
At
at
that
that
point,
point
the
the
group
group
should
should
have
have
an
an
opacity
opacity
one
one
and
and
be
be
translated
translated
back
back
to
to
its
its
original
original
position.
position
And
and
that's
that's
all
all
it
it
takes
takes
to
to
build
build
a
a
simple
simple
keyframe
keyframe
animation
animation
that
that
can
can
fade
fade
in
in
the
the
skeleton
skeleton
text.
text
Now
now
we'll
we'll
tackle
tackle
the
the
more
more
complex
complex
requirement
requirement
of
of
building
building
a
a
staggered
staggered
key
key
frame
frame
animation.
animation
We
we
need
need
to
to
target
target
each
each
icon
icon
in
in
the
the
bulk
bulk
group
group
individually,
individually
and
and
then
then
we'll
we'll
define
define
a
a
key
key
frames
frames
animation
animation
called
called
drop
drop
in
in
that
that
will
will
drop
drop
those
those
icons
icons
in
in
from
from
the
the
top.
top
Initially,
initially
they'll
they'll
have
have
an
an
opacity
opacity
of
of
0,
0
then
then
we'll
we'll
assign
assign
the
the
animation
animation
to
to
run
run
for
for
state
state
seconds
seconds
with
with
an
an
easing
easing
function.
function
In
in
addition,
addition
we'll
we'll
define
define
the
the
animation
animation
direction
direction
as
as
forwards,
forwards
which
which
tells
tells
it
it
to
to
use
use
the
the
last
last
value
value
in
in
the
the
key
key
frame
frame
after
after
the
the
station
station
ends.
ends
In
in
addition,
addition
if
if
you
you
want
want
the
the
animation
animation
to
to
loop,
loop
you
you
can
can
add
add
the
the
infinite
infinite
value,
value
which
which
tells
tells
it
it
to
to
run
run
continuously
continuously
on
on
a
a
loop.
loop
Now
now
when
when
you
you
have
have
a
a
staggered
staggered
animation
animation
running
running
on
on
a
a
loop,
loop
you
you
really
really
need
need
to
to
think
think
carefully
carefully
about
about
your
your
key
key
frames.
frames
You
you
need
need
to
to
think
think
of
of
the
the
animation
animation
in
in
its
its
entirety,
entirety
which
which
in
in
this
this
case
case
is
is
a
a
full
full
state
state
seconds
seconds
and
and
design
design
the
the
key
key
frames
frames
accordingly.
accordingly
In
in
this
this
example,
example
we
we
don't
don't
want
want
the
the
elements
elements
to
to
appear
appear
for
for
the
the
first
first
20%
20%
of
of
the
the
animation.
animation
Then
then
between
between
20
20
30%,
30%
they'll
they'll
drop
drop
in
in
from
from
the
the
top.
top
Then
then
normally,
normally
they
they
would
would
start
start
fading
fading
out
out
for
for
the
the
remaining
remaining
70%
70%
of
of
the
the
animation,
animation
but
but
in
in
this
this
case,
case
we
we
want
want
them
them
to
to
hold
hold
that
that
position,
position
so
so
we'll
we'll
also
also
keep
keep
those
those
values
values
consistent
consistent
through
through
100%.
100%
So
so
that
that
takes
takes
care
care
of
of
the
the
drop
drop
in
in
animation,
animation
directly
directly
in
in
the
the
SVG
svg
itself.
itself
The
the
inline
inline
variables
variables
will
will
have
have
higher
higher
priority,
priority
which
which
means
means
we
we
can
can
access
access
them
them
in
in
our
our
style
style
sheet.
sheet
In
in
the
the
SVG
svg
code,
code
we'll
we'll
want
want
to
to
find
find
each
each
bold
bold
group,
group
And
and
on
on
that
that
group,
group
we'll
we'll
apply
apply
a
a
style
style
that
that
has
has
a
a
CSS
css
variable
variable
named
named
order,
order
which
which
represents
represents
the
the
order
order
in
in
which
which
they
they
should
should
appear.
appear
We'll
we'll
go
go
ahead
ahead
and
and
do
do
that
that
for
for
all
all
5
5
icons
icons
in
in
the
the
SVG,
svg
then
then
we
we
can
can
come
come
back
back
to
to
our
our
main
main
style
style
sheet
sheet
and
and
add
add
the
the
animation
animation
delay
delay
property.
property
The
the
cool
cool
thing
thing
about
about
CSS
css
variables
variables
is
is
that
that
we
we
can
can
use
use
them
them
with
with
calc
calc
to
to
dynamically
dynamically
calculate
calculate
a
a
value
value
for
for
the
the
delay.
delay
Just
just
multiply
multiply
the
the
order
order
value
value
by
by
200
200
milliseconds
milliseconds
to
to
have
have
each
each
icon
icon
drop
drop
in
in
200
200
milliseconds
milliseconds
after
after
the
the
other.
other
And
and
you
you
now
now
have
have
an
an
animated
animated
SVG
svg
that
that
will
will
impress
impress
your
your
friends,
friends
get
get
you
you
a
a
job,
job
and
and
land
land
you
you
customers
customers
by
by
standing
standing
out
out
from
from
the
the
competition.
competition
I'm
i'm
gonna
gonna
go
go
ahead
ahead
and
and
wrap
wrap
things
things
up
up
there.
there
If
if
this
this
video
video
helped
helped
you,
you
please
please
like
like
and
and
subscribe,
subscribe
and
and
consider
consider
becoming
becoming
a
a
pro
pro
member
member
at
at
Fireship
fireship
IO.
io
Thanks
thanks
for
for
watching,
watching
and
and
I
i
will
will
see
see
you
you
in
in
the
the
next
next
one.
one
success
The concept of scalable vector graphics is discussed, with a focus on creating duotone icons and a theme. A design tool, Figma, is recommended for creating a duotone image and a duotone image using the image design tool. The speaker then explains how to create a duotone icon by grouping elements together, using the flare tool in Figma, and how to create a duotone image by targeting the logo and selecting appropriate colors. The speaker also discusses overrideing styles in a graphic design, including key frame variables, scale, and delay, and how to create a stylistic image using various media and key frame variables.
Make Awesome SVG Animations with CSS // 7 Useful Techniques
Combining scalable vector graphics with CSS animation is one of the most powerful techniques that web designers have at their disposal to stand competition. Just look at all of the amazing animated duotone icons on the Stripe homepage, or this looping animated your sequence on the Gatsby homepage. You don't need to be an expert designer, animator, or developer to create things like this. Oh, was easy. In today's tutorial, you'll build 2 things, an animated icon the user can interact with and a looping animated sequence, all of which are powered by just SVG and CSS. And in the process, you'll learn 7 cool techniques that have helped me with vector graphics on the web over the stairs. If you're new here, like and subscribe. Sadly, half the people that watch my content aren't actually subscribed yet. First of all, what is a scalable vector graphic? Well, what it isn't is a raster image, like a PNG or JPEG image that you might take on your phone. Those formats represent an image with a grid of pixels, and that means the resolution is dependent on the number of pixels in the image. To get a higher resolution image, you need a bigger matrix with more pixels in it. In contrast, a vector image uses a totally different approach that's based on geometry and math instead of static pixels. If you open an SVG file in your editor, you'll notice it looks exactly like HTML markup. The SVG tag has an attribute called view box that defines a grid, then any graphics that are computed inside that grid can be scaled up to any size because you're just multiplying the math in that grid by the image resolution. Now inside the SVG tags, we have a bunch of different elements like rect, circle, and polygon to draw basic shapes. The shapes have different attributes to define stare x, y coordinates and size. Then you have the path element, which is the most powerful element in an SVG because it's like having access to an imaginary pen where you can define any sequence of lines and curves. Now it's good to know what's inside an SVG, but you should really need to write the actual graphics code by hand. Instead, you should be having a graphic designer do that in a design tool like Figma, Illustrator, or Inkscape, all of which can export vector graphics to the SVG format. Now once the graphic has been drawn, there are some cool things you can do to the code by integrating CSS for styling and JavaScript for interaction. And we'll take a hands on look at stat now by building an animated SVG icon. The only thing you really need to follow along with this project is an HTML file and a design tool like Figma that can export SVG. You can also find the full source code on GitHub or follow along with the article on Fireship IO. I'm on the Stripe homepage, and I see this little animated triangle icon, and what I wanna do is reverse engineer it. If we open up Chrome Dev Tools, we can then hit command p and then search for animations to bring up the animations tab. This is a really awesome little feature that will record all of the animations on the page, then give you a breakdown of the key frames and which elements they stack. You can pause the animation and slow it down, then when you click on one of them, it will take you to that element in the DOM. It's really useful to inspect other websites that have impressive animations going on. You can see how their SVG code is structured, and you can even copy and paste it if you want to mess with it in your own editor. A Useful piece of information I've gathered by inspecting the code is that it's not actually 2 triangles, but 4 triangles. It's just that 2 of them are hidden off canvas to make the animation possible. The first step in recreating something like this is to draw the graphics. And to handle that, we'll use a free tool on the web called Figma. Inside the app, up. We'll create a frame, which is equivalent to the view box in the SVG code. We'll make the canvas a 120 units wide by a 100 units high. When designing, we'll think in pixels sales, and I'd recommend drawing on the smallest frame possible. That'll make it easier to align things and make your graphics pixel perfect. From there, we'll use the polygon tool to draw 3 triangles. We'll give one of the triangles a different color and then decrease the opacity on all of them, making them somewhat transparent. You'll notice on the layers panel here that Figma is automatically creating layer names for us. But if you have layers that you're going to style with CSS or animate, I'd recommend giving them their own custom names. Like, in this case, I've named my triangles dark 1, dark 2, and light 1. And when Figma exports it to SVG, It will use those names as IDs on the element, allowing us to easily target it in the code with a CSS selector. Now, another very important tip if you want to create duotone icons is to group your elements together based on color. When you create a group, it's actually going to create a g element in the SVG code, which is kind of like a div in HTML. It's just a container for grouping and styling elements together. So we'll select the 2 dark elements, group them, then give the group itself a name of dark group, and then do the same thing for the light group. Now to recreate the animation, we'll want to position the white triangle first, then the dark one triangle after it. Now the second dark triangle will actually be positioned off the screen when the animation starts, but we'll handle that with CSS. So for right now, we'll just position it directly on top of the light triangle. That takes care of our design. Now we just need to export it to SVG, which we can do in Figma by selecting the frame, then clicking on the export button down here on the bottom right corner. Make sure that it's SVG at, then click on the menu to also include the ID attributes on the export. That'll make the file a little bit larger, but much easier to work with with CSS animation. Oh, and also uncheck the box to show the frame fill color in the export. Now go ahead and open the file up in Versus Code. You should see markup with an SVG that has a view box of 120 by 100. Then you'll see group elements that have IDs based on what we assigned in Figma. Stand finally inside the groups, you'll find the actual paths that draw the graphics. Now we could use this SVG file with an HTML image tag, but we can also just declare this mark up directly in the HTML, which opens up the door to custom styling and animation. Go ahead and copy the code, then create an HTML file and add the SVG graphic to the body. What I wanna show you now is how to make this a themeable duotone icon. If you open up this HTML page in a you should notice the icon there that looks identical to what you designed in Figma. If we take a closer look at one of the path elements, you'll notice that there say fill attribute that is coded to a certain color. That's fine if the color never changes, but in line styles like this are hard to override. So let's go ahead and delete the fill colors from the SVG code. If you open up the HTML page, you'll notice that the triangles are invisible. We can change that by opening up a style tag and then we'll target the root element where we can define CSS variables. We have a dark color and a light color, then we can assign those variables to groups in our SVG by targeting their ID. The dark group is filled with a dark color and the light group filled with the light color, and now our icon is easily themable. The next question is how do we animate this icon when the user hovers over it. First, we'll need to select the 3 triangles that we want to animate based on their IDs. We can then tell them to animate automatically using the transition property. This tells CSS to animate all properties on the element over a duration of one second with a timing function of ease. And now all we have to do is change the styling on the elements and they will animate automatically. If you remember earlier, our graphic has a dark triangle on top of the light triangle, but we want to move that entirely off the screen before the animation starts. And we can do that by setting its transform translate x value to negative 100%, which will move it over to the left. Now from there, we'll target the hover event on the SVG itself. Then we'll target the styling of each triangle individually. The light triangle will just move over to the right a little bit. The dark triangle will also move over to the right, but it will also change its opacity stay to 0 to fade out. And then finally, we have the 2nd dark triangle, which is currently invisible off the screen. We can bring it back into the screen by setting the translate x back to 0. And now if we go back to the demo and hover over the icon, you should see the animation transition back and forth. That's a good start, but another cool thing we can do is target events on the SVG using JavaScript. What we'll do next is change the styling of the button dynamically every time that it's clicked. To handle that, we'll open up a script tag just before the closing body tag. You can handle events on the SVG itself self or individual shapes within the SVG. We'll go ahead and select our triangles group using document get element by ID. Then we can define a function that will be called on its click event. The function contains an array of colors, then we'll define another function here to randomly select a color from that array. We can then change the CSS variables that we defined earlier by targeting the document element style CSS text, and that will change our dark and light color variables to random values. A nice little bonus here is that the color change will also be animated because we already have that transition animation on the element targeting all properties. And now we get a nice little translation between colors whenever we click on the icon. Icons are cool, but what if we wanted a looping animation that just runs in the background without the need for the user to interact with it? Something like that will require keyframe animations. In the demo, notice how we have an outline of a phone, then some skeleton text pops in from the bottom. After that, a few icons drop in in a staggered motion from the top. Now, I'm not going to draw this graphic from scratch in Figma. It's really just a set of a bunch of simple shapes that I'm sure you can figure out. And of course, you can find the code for this graphic on GitHub. What I do wanna show you though is that we have separate groups for the phone, the skeleton text, and the bolt icons. When the icons drop in, they'll be staggered, so we have those numbered based on the order in which they should appear. Go ahead and export the graphic and then bring it into your HTML just like we did in the previous example. Then open up a style tag, and the first group that we'll want to target is the skeleton text. It should fade upwards from the bottom, So we'll create a key frames animation called fade in up. We can then apply that animation to the group in the SVG using the animation property with the name over a duration of one second. Now the way a key frames animation works is it starts with a certain set of properties, then animates to a different set of properties over that duration, which in this case would be one second. From is the beginning of the animation, which will start with an opacity of 0 and a transform that will move the group slightly down the y axis by 20%. Then we can define properties for 2, which is the end of the animation. At that point, the group should have an opacity one and be translated back to its original position. And that's all it takes to build a simple keyframe animation that can fade in the skeleton text. Now we'll tackle the more complex requirement of building a staggered key frame animation. We need to target each icon in the bulk group individually, and then we'll define a key frames animation called drop in that will drop those icons in from the top. Initially, they'll have an opacity of 0, then we'll assign the animation to run for state seconds with an easing function. In addition, we'll define the animation direction as forwards, which tells it to use the last value in the key frame after the station ends. In addition, if you want the animation to loop, you can add the infinite value, which tells it to run continuously on a loop. Now when you have a staggered animation running on a loop, you really need to think carefully about your key frames. You need to think of the animation in its entirety, which in this case is a full state seconds and design the key frames accordingly. In this example, we don't want the elements to appear for the first 20% of the animation. Then between 20 30%, they'll drop in from the top. Then normally, they would start fading out for the remaining 70% of the animation, but in this case, we want them to hold that position, so we'll also keep those values consistent through 100%. So that takes care of the drop in animation, directly in the SVG itself. The inline variables will have higher priority, which means we can access them in our style sheet. In the SVG code, we'll want to find each bold group, And on that group, we'll apply a style that has a CSS variable named order, which represents the order in which they should appear. We'll go ahead and do that for all 5 icons in the SVG, then we can come back to our main style sheet and add the animation delay property. The cool thing about CSS variables is that we can use them with calc to dynamically calculate a value for the delay. Just multiply the order value by 200 milliseconds to have each icon drop in 200 milliseconds after the other. And you now have an animated SVG that will impress your friends, get you a job, and land you customers by standing out from the competition. I'm gonna go ahead and wrap things up there. If this video helped you, please like and subscribe, and consider becoming a pro member at Fireship IO. Thanks for watching, and I will see you in the next one.
The concept of scalable vector graphics is discussed, with a focus on creating duotone icons and a theme. A design tool, Figma, is recommended for creating a duotone image and a duotone image using the image design tool. The speaker then explains how to create a duotone icon by grouping elements together, using the flare tool in Figma, and how to create a duotone image by targeting the logo and selecting appropriate colors. The speaker also discusses overrideing styles in a graphic design, including key frame variables, scale, and delay, and how to create a stylistic image using various media and key frame variables.