In this tutorial we’ll be taking an SVG based icon from Envato Elements, doing some preparatory modifications in Figma, then animating it using SVGator. Let’s get started!
What You’ll Need
Before we begin, go ahead and download this pack of icons from Envato Elements. Once downloaded, extract the zip file and locate the icon numbered 15 that looks like a little keyboard and screen.
You’ll also need a paid SVGator account as the free trial does not have one of the features we’ll be using.
1. Prepare the File in Figma
The icon we’ll be using isn’t yet exactly as we’ll need it for animation, so we’re going to use Figma to make a few small changes. You can of course use any vector editing tool you like–we’re going with Figma in this tutorial as everything can be done using the free tier.
Login to Figma, create and open a new file, then drag and drop our 15 icon into the interface to import it.
We’re going to start by scaling the icon up so it’s a bit easier to work with. To do this, select the top level frame in the Layers panel, then in the right sidebar increase the height and width from the current 64 up to 128:
Why Are We Changing Our SVG Icon?
The reason we can’t use the file as it is right now is that we’ll be using SVGator’s path animation tools, which leverage the technique of animating the stroke on a path. You can see how this is done manually in our tutorial:
We’re going to be animating the little lines on our icon’s computer screen, but by default these lines don’t actually have any stroke for us to animate. If we look at the path nodes for any of the lines we’ll see this:
This is a shape with a fill only, so we won’t be able to animate it the way we want. Instead we need to convert it so it looks the same, but is actually a path with a stroke applied, like this:
Convert from Filled Shapes to Paths with Strokes
There’s no automated way to convert the seven lines on our little computer screen from filled shapes to paths with strokes, so instead we’re going to recreate each one.
Begin by selecting the pen tool–note the pen tool is actually easier to use here than the line tool as it allows you to center your nodes on the grid more easily.
We’ll start by recreating the first blue line at the top of the screen. Make sure you are zoomed in on it enough to see the pixel grid on the Figma canvas. Click on the grid two cells in from its left end to create a node:
Then click again two grid cells in from its right end to create a second node:
And press enter to complete the line:
Now we just need to style the stroke so our new path looks like the original blue line.
In the Stroke panel, set the width to 4.
Open the advanced stroke properties by clicking the three dot icon to the right of the width setting:
Under the Cap dropdown select Round:
With the line shape recreated, we can now set it to the correct color. Open the stroke color picker and sample the color from the other blue line:
Your completed line should now look identical to the original.
Repeat for the Other Six Lines
With one line created we now need to recreate the other six lines. But before you do, select the line you already made and group it. Create all your new lines inside this group to keep them organized and differentiated from the original lines.
The process to recreate the other six lines will be the same each time:
- Use the pen tool to create a line 2 grid squares in from either end
- Set stroke width to 4
- Set caps to round
- Sample the correct color from another line
When you’re finished recreating the lines, hide the group you made them in, then select all the original lines and delete them.
Export the Prepared SVG
Our SVG is now ready to be animated, so we can go ahead and export it.
Before we do, it’s a good idea to rename the parent frame of the document, because whatever you name this frame will become the name of your exported icon. I went with “icon_computer”:
Once you’ve done that, look at the bottom of the right sidebar for the Export panel, click the + button there to create a new export, and in the file type dropdown select SVG:
Import into SVGator for Animation
Login to SVGator and in the dashboard hit the Import new button to bring in your SVG icon.
Once the import has completed you’ll automatically be taken into the main area of SVGator where you can start animating the image.
2. Animate the Lines
The first part of our animation will be making all the lines on the icon computer screen draw in from left to right, one at a time as though they’re being typed. Once this is complete we’ll animate button presses on the keyboard to go along with it.
Hide all the Lines
When we start animating you might find that a portion of a line shows up before it’s supposed to. You can avoid this by tweaking settings in your animation, but it’s easier to just hide all the lines until we’re ready for their animations to begin.
Start by selecting the first line on the canvas. SVGator works by having you add one of five Animators to the timeline, and in our case given we want to hide the line we’ll add an Opacity animator. To do so, look in the Animators panel in the left sidebar and click the + button to the left of Opacity:
You’ll now see an Opacity track on your timeline, and we’re ready to start adding keyframes to it. Click the little blue + icon pictured below to do so:
Now we can change the opacity level for our first line at this point in the animation. Click where it currently says 100% and change the value to 0%:
You should now see that your first line is no longer visible.
Go ahead and repeat the same steps for each of the lines on the icon’s computer screen, setting them all to 0% opacity on the first frame of the animation:
Animating the First Line (path_49)
Let’s start the actual animating now and make the first of our lines appear to draw itself in from the left.
We want our line to become visible again, so move the playhead to the second frame, add another keyframe, and set it to 100%:
The line should now reappear on your canvas.
Back in the Animators panel, add a Path animator to the line as well. You’ll see this animator has two properties: Offset and Dashes. Click the little + button of each to add keyframes for them.
We need to change two values here: Offset, and the first value in Dashes. In both cases the value we give will be the path length + 1.
You can see on the Path animator the length of the currently selected item is displayed, which in this case is 40. As such, we need to change Offset and the first value in Dashes to 41 like so:
The reason we are setting this value to 41 is that if we specify 40, (the length of the path), it will allow a portion of the line to show at its right end. Adding 1 makes the animation just a little longer than the path itself, ensuring the whole line is hidden until the animation completes.
At this point you should see a small piece of the line at its left end, and we can now have it grow out to its usual length by animating the Offset value.
Move the playhead over 5 frames, add a new Offset keyframe and set its value to 0:
Press the play button, (or hit your spacebar), and you should see the first line growing from left to right.
Animate the Second Line (path_50)
We’ll now need to go through the same process and animate the second line to grow in from the left. We want it to start being drawn after the first line is complete, so it looks like a person typing a new line after having finished the first.
Position your playhead one frame further than the first line’s last keyframe. Drag the second line’s existing 0% opacity keyframe over to that position. Then move the playhead over one more space, add a new keyframe, and set it to 100% to make the second line visible:
Now, as we did with the first line, add a Path animator and keyframes for both Offset and Dashes. The length of this path is 28, so add 1 to that value, and set both Offset and the first value of Dashes to 29 like so:
Because our second line is shorter than our first, it should take less time to be fully drawn. So this time move the playhead over four frames instead of five, add a new keyframe, and set it to 0.
Play your animation again and you should see both lines get drawn onto the computer screen.
Animate the Remaining Lines
Repeat the same steps for the remaining 5 lines:
- Move their 0% opacity keyframe to one frame further along than the last keyframe in the previous line’s animation.
- Add a 100% opacity keyframe one frame after that.
- On the same frame add a Path animator and keyframes for its Offset and Dashes properties.
- Set Offset and the first value of Dashes to the path’s length +1
- Create a new Offset keyframe a few frames along and set it to 0
How many frames you take to animate the Offset value for each line depends on the line length: use a range of 3 frames for short lines to 5 frames for the longest lines.
Refer to the screenshots below to see a good animation length to use for each line, and how your completed keyframes should look in each case.
Third Line Keyframes (path_51)
Fourth Line Keyframes (path_52)
Fifth Line Keyframes (path_53)
Sixth Line Keyframes (path_54)
Seventh Line Keyframes (path_55)
Your animation of the lines being drawn on the screen is now complete. Give it a play test and watch them all appear one at a time.
3. Change the Timeline Settings
Now we have the major portion of our animation laid out on the timeline we have enough information to decide how long the overall animation should be. It takes about 1.5 seconds for the line animations to run, so we’ll allow a little bit of space at the end for a couple of extra steps we’re going to take shortly and set our animation to be 2 seconds long.
To set the length of the animation click the gear icon on the left side of the interface, above the play button but below the Animators panel. When you do, you’ll see a dialog box popup with all the current timeline settings. We’re going to make a few changes here:
- Set the duration to 2 seconds.
- Select the Loop option to make the animation repeat.
- Check Animate on mouse over and select Freeze on mouse out–this will make the animation start and stop depending on whether the user’s mouse is hovering over the icon.
4. Animate the Keyboard Button Presses
We’re now going to animate the position of some of the keys on the keyboard so it looks like someone is typing out the lines on the screen. The process for animating a key press will be:
- Select the key.
- Add a Position animator.
- Add a keyframe–leave the position values unchanged at
0,0 - Move two frames over, add another keyframe, and change the second position value to 1 so you have
0,1–this will move the key down. - Move another two frames over, add another keyframe, and set the value to
0,0–this will move the key back to its original position.
Start on frame four, select any square key, (it doesn’t matter which), and follow the above steps. Then move your playhead to the last frame of the button animation you just created, pick a new square key, and repeat the steps to animate it. You’ll need eight square button press animations in total.
Note, that after you’ve done the first four button presses you can take a shortcut for the next four. Select the track of an existing button animation, box select its keyframes and copy them with CTRL + C, move your playhead to the correct position for the next animation and paste the keyframes with CTRL + V.
When you have your eight square button presses we’re going to simulate the Enter or Return key being pressed after a little pause.
Move your playhead over six frames from the last key of the latest button animation. Then select the rectangular key at the top right of the keyboard and create the same button press animation for it.
When you’re done your button press keyframes should look like this:
5. Fade Out the Lines
We now have an animation representing typing a stack of lines onto a screen, and we want it to be able to loop smoothly. If the lines just suddenly disappeared that would seem a bit abrupt. Instead we’re going to make it look like the Enter key button press we just created clears the screen with a quick fade out of the lines, ready for the next loop of the animation.
Position the playhead one frame after the end of the last key press animation–this will help you keep track of where the keyframes you’re about to add should go:
Scroll to the top of the timeline and, where you just positioned your playhead, add a new opacity keyframe to each of the seven lines with the opacity still set to 100%.
Move the playhead over two frames and add another round of opacity keyframes to every line, setting them all to 0%:
This makes all seven lines fade out, and your animation is now complete. If you play it you should see lines get typed onto the screen, then cleared, and the animation smoothly repeat.
6. Export and Use Animated SVG
Now our animation is all done it’s time to export! Click the aqua colored Export SVG button near the top right and you’ll get this dialogue box to set a file name for your animated SVG:
Be careful when you save not to overwrite your original SVG.
You can now open the SVG up directly in any browser, hover over it and you’ll see your animation looping.
Add to a Webpage
Because we’re using a hover interaction to play and pause our animation we won’t be able to add it to a webpage via an <img> element or as a background image. For hovering to work the SVG code will need to be copied and pasted directly into the HTML of the page you want to use it on.
The best approach typically is to add a <div> to your page, paste the SVG code inside it, then style the div to the width and height you want. For example:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Hover Animated SVG Icon</title><style>
.icon {
height: 256px;
width: 256px;
margin: 50px auto;
}</style></head><body><div class="icon"><!-- paste svg code here --></div></body></html>SVGator’s exported files can contain several lines of code so in order to make sure you can still work on the rest of your page comfortably I recommend using a code editor that will let you collapse the div and save space.
And that’s it! Your finished animated SVG icon should look like this:
Wrapping Up
Thanks for taking the time to complete this tutorial, I hope you enjoyed it and picked up some new tricks!
For more on SVGator, Figma and Envato Elements check out these resources:
SVGator
Figma
![]()
New Course: Figma Grids in Under 30 Minutes
![]()
Which of Figma’s Pricing Tiers is Right for You?
![]()
Collaborative Interface Design With Figma
Envato Elements
![]()
Create Websites Fast With the Elements Plugin for WordPress
![]()
Create a Home Page With the Elements Plugin for WordPress
![]()
Build a Better WordPress Website With Envato Elements
![]()
New Course: Create a Landing Page With Envato Elements
![]()
Top 20 (Most Popular) Premium WordPress Themes of 2019
