One of my favorite things to incorporate into any web project is animation. Particularly CSS & SVG animations because they are lightweight, retina-level crisp & do not require adding complicated javascript libraries to your website. CSS & SVG animations combine the creative elements of design and the technical elements of development. As a designer and developer I love that. Dabbling with CSS & SVG animations as a developer (or designer) is a great introduction to going beyond basic HTML and CSS. Today I’m going to show you how to animate an instagram icon. You can use these same principles to animate any social media icon. This icon animation is featured on trevblake.com , a portfolio site I made for my good friend & hard-working creative, Trevor Blake.

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 IDs are the layers we named when we were in Adobe Illustrator.

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:

  1. bigCircle
  2. camera
  3. littleCircle
  4. lens

That means

  • • 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!