View my codepen on this project
1. Download the instagram icon.
Visit Instagram's brand resources and download the .eps file. Or, you can visit the noun project for a more unique version of the instagram icon. Make sure to credit the maker of the icon!
2. Edit the icon in Adobe Illustrator
a. Open the instagram icon you downloaded in Adobe Illustrator. You could also open it in Sketch, if that's what you prefer, but this tutorial will use Adobe Illustrator.
b. Here are some edits I made to the icon
- • Added a circle around the icon (optional)
- • Made all the layers of the icon be border strokes instead of filled objects. This is essential for the animation we will be adding later.
c. Rename the layers
When we save this icon as an SVG, the layers will become CSS IDs so we want the layer names to be easy to differentiate.
d. Save the icon as an SVG. Select ‘File > Save As..’ and then save as an SVG (not a compressed SVG). In the ‘SVG Options’ box that appears before you save, we can keep things pretty simple. This is a basic icon with a few layers. We don’t have any embedded images, for example.
3. Open SVG icon in text editor
In this tutorial I'm using brackets. Here you can see the code of the icon. Now we’ve got something we can apply some CSS animations to!
SVG code always looks intimidating, but noticed that all the
a. Transer .SVG file to an .HTML file
Let’s transfer the SVG code over to a HTML file, so we can do fun things like add a CSS stylesheet and clean things up.
- • I took out the title
- • I took out the CSS in the SVG code and put that in a CSS stylesheet (next step).
- • I took out elements of the SVG that weren’t necessary for the icon display & animation.
b. Transer CSS to Stylesheet
We’re also going to create CSS stylesheet for all of our CSS. That will keeps things tidy. Make sure to copy over the css that was in the tags of the original SVG file.
4. Add a stroke-dasharray layer IDs
In order to animate the strokes of this SVG we’re going to be using a technique called stroke-dasharray. The idea is as follows: each of these vectors is going to be given a dashed stroke. We do this by applying a stroke-dasharray value within the CSS.
The goal is for the stroke-dasharray to cover the entire stroke of the layer without any breaks.
Do this for the bigCircle, camera and littleCircle layer. We won’t be doing this for the lens layer because it’s stroke won’t be animated.
Do you recognize these ID names? That’s because they are applied to the layers we named back in Adobe Illustrator.
5. Add the Animation
So we have a stroke-dasharray, let’s animate it.
a. Start by applying an animation to the #bigCircle ID
This animation class says that an animation called ‘bigCircle’ will last 4 seconds, the speed will be linear (i.e. no acceleration or deceleration) and the animation will be infinite.
b. Let’s describe what the animation actually does by writing out a keyframe.
c. Apply animation to camera and littleCircle layer IDs. Create keyfames for theme too.
d. Add animation for lens. Since it's so small, the stroke-dasharray will not be noticeable. Let's instead give the lens a fill color and have it appear like a dot.
5. Make the animation sequential
Now we've got some animation happening but let's make them go in order.
Imagine you have a timeline and your layers need to go in the order of:
- • bigCircle: 0-25%
- • camera: 25% - 50%
- • littleCircle 50% - 75%
- • lens: 75% - 100%
The keyframes for camera, littleCircle and lens start with 0%, x% because you want to make sure the prior animation is fully completed.
6. Animation Complete!
Now with the SVG & CSS combined we have an animated instagram icon!
Check out my CodePen below to experiment with the code.