Create an animated dev.to profile pic with SVG, CSS and JS, then convert it to a GIF [tutorial].
Tags: javascript, css, showdev, codepen
Published: 2021-03-21 18:33:39

Whenever I join a community one of the things I like to do is see if I can make my avatar animated. 

Now in the past I had to resort to all sorts of hacks to make it work but on dev.to they make it easy, they accept `.gif` format images for profile pictures and don't do any sort of checks on them...time for some fun!

So if all you wanted to know was how I have an animated profile picture it is as simple as that, just upload an animated GIF!

This post shows how I hacked the animated GIF together in about 30 minutes. I wouldn't recommend it as a permanent workflow but if you want to spit an animation out quickly this post might be for you!

Not sure why I am drawing attention to the fact that you can upload an animated GIF to be honest...I don't want anyone else to do this...it makes my posts stand out in the feed 🤣🤣🤣

## Hacking something together
I didn't want to spend too long on this, mainly because whenever sites realise people can upload animated avatars they tend to put a stop to it pretty quickly.

So I needed a quick way to create the animation, being a front-end dev it was obvious that SVG, CSS and JS were the quickest way to get it done.

### Step 1 - illustrator design
I am sure some clever person would build the whole thing in CSS, but I am not clever enough for that so Adobe Illustrator is a much better option for me!

I obviously already had the logo so all I had to do here was design the elements I want to replace the "InHu" text in the middle.

I decided I would do "We ❤ dev.to" as the text.

I quickly grabbed a heart icon and changed the colours to match the InHu branding and then positioned them above each other just to check they look balanced

![All components laid out in Illustrator ready for naming](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/33yasjzjud16xbw1pjqh.jpg)

Before I stacked them on top of each other I grouped them (<kbd>Ctrl</kbd> + <kbd>G</kbd>) and then went to the "layers" panel. 

I then named each of the groups that were relevant to the end animation, so I could easily reference them later with CSS and JS.

![Layers panel in Adobe Illustrator, naming each of the layers](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5gpqokgcnov6a5j4srmw.jpg)

Finally once that was done I stacked all the items in the centre of the circle and saved the SVG.

![All components stacked in illustrator ready for animating](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/angsy425fu56q6sylcfq.jpg)

### Step 2 - Copy the SVG text into jsfiddle
When you save an SVG in illustrator you have the option to grab the raw text that describes the image (provided you use "save as").

![SCV Code button located at bottom of second save screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9r4ls4cty74gu549z4i5.jpg)

Pressing "SVG Code..." on the second save screen opens notepad and puts the raw HTML into notepad for you so you can copy it easily. 

I then pasted this into a jsfiddle and set to work animating.

### Step 3 - Animate it
First thing I wanted to do was animate the circle surrounding the logo so it spins. 

Should be simple enough:

```css
.rotate{
animation:spin 6s linear infinite;
}
@keyframes spin {
100% { transform: rotate(360deg)}
}
```

Oh - that didn't quite work as expected, my circle is on an orbit not rotating 🤣

![outer circle flies off the screen due to mistake](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j1zc3bamgbtfv5g34nza.gif)

I had forgot the `transform-origin`...doh!
```css
.rotate{
    animation:spin 6s linear infinite;
    transform-origin: 50% 50%; /* 50% 50% is the center */
}
@keyframes spin {
    100% { transform: rotate(360deg)}
}
```

#### Uh oh, the rotating circle looks wobbly!
Now that I had the `transform-origin` set the circle was rotating around the correct point. 

The problem is the circle had a little "wobble". 

![Wobbling GIF as center not quite right](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ygegqr2gmscmkx630t2a.gif)

This is because I centred everything in illustrator but the circle has a bit missing at the bottom. This results in the centre point moving so we can't transform at 50% 50%, it needs a minor adjustment.

The other issue is I can't just adjust the position of the outer ring as then everything else will be off centre.

What I did was draw another circle over the top, grab the centre coordinates and then worked out how far from centre the ring was.

The final coordinates came in at `50.00007`, `50.03474`

Plugging that into our `transform-origin` we get a perfectly smooth rotation!

#### Animating using JS as I am lazy
Next I needed to loop through the text "we", "❤", "dev.to" and "InHu".

As this was dirty that was easily done with JavaScript. Remember when we grouped items in illustrator earlier? Well doing that adds an `id` to the group that we can now target.

``` javascript
var we = document.querySelector("#we");
var heart = document.querySelector("#heart");
var devto = document.querySelector("#devto");
var inhu = document.querySelector("#inhu");
```
Then we simply set a timer every 100ms and decide which item should show when.

``` javascript
var change = function(){
    if(count > 59){
        count = 0;
    }


    if(count == 0){
        we.classList.add('active');
        heart.classList.remove('active');
        devto.classList.remove('active');
        inhu.classList.remove('active');
    } 
    
     if(count == 12){
        we.classList.remove('active');
        heart.classList.add('active');
        devto.classList.remove('active');
        inhu.classList.remove('active');
    } 
     if(count == 24){
        we.classList.remove('active');
        heart.classList.remove('active');
        devto.classList.add('active');
        inhu.classList.remove('active');
    } 
		 if(count == 36){
        we.classList.remove('active');
        heart.classList.remove('active');
        devto.classList.remove('active');
        inhu.classList.add('active');
    } 
    count++;
}

var timer = setInterval(change, 100);
```  
Yet again because this is throwaway code I didn't even remove the unnecessary `classList.remove` parts as it made it easier to check.

Next I just needed to set up the CSS to change the visibility on the `active` class being applied to a group.

``` css
/* originally hidden */
#we, #heart, #devto, #inhu{
  opacity: 0;
}

/* only show if the class "active" is applied */
#we.active, #heart.active, #devto.active, #inhu.active{
    opacity: 1;
}
```

Finally I added a transition of 0.2 seconds to the opacity just so it wasn't jarring when the text changed and instead we get a subtle "fade-out-fade-in".

``` css
transition: opacity 0.2s linear; 
```
And there we have it, a hacked together logo animation.

{% jsfiddle https://jsfiddle.net/r5zg9qd8/2/ result js css html %}

### Step 4 - capturing the animation
The final step is to grab the animation.

For this I use [Screen To GIF](https://www.screentogif.com/).

It is super simple to use, you launch it and get an options screen giving you options depending on what you want to do. 

In this instance we want to use the "recorder" to record part of the screen.

![screenToGif main screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lvp8dvwrswnqt7r2g93d.jpg)

Clicking that gives us an empty frame that we can position over the element we want to record

![screenToGif positioned over animation ready to record](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u6c5q1btb8nk73oe9mcw.jpg)

At the bottom you can set the frame rate you want to record at and when you are ready click "record".

We leave the animation to do just over one full cycle and then press "stop".

This then pops up the editor screen. 

On this screen we can play the animation back and find our loop point. Then we select the frames we don't want and press <kbd>Del</kbd> to remove them.

![several frames are selected at start of a GIF that are about to be deleted](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ejj1itcsoxofuqam3fb6.jpg)

With a bit of fine tuning we then have a perfect loop ready for export.

Finally we go to the "file" menu, click "save" and choose our output type (.gif in this instance) and file location.

![Set format to "GIF" and set the file path before saving in ScreenToGif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6zui3esy0dax6cyyfp94.jpg)

Then the encoder will optimise your GIF the best it can and save it for you.

### Step 5 - profit!
Upload the `.gif` as your profile picture and away we go!

One last "gotchya" was that my existing posts in the feed did not have my animated gif - had I wasted my time?

It turns out each post stores the path to your logo individually (that seems really inefficient for server storage space but I haven't had chance to see whether that is just some caching mechanism or if that is the way dev.to actually works to avoid additional lookups etc.)

So I simply went through my last few posts (luckily I am still quite new here 😀) and just pressed "edit" and then immediately saved them again. Now my animated avatar shows up!

## To Wrap Up
There you go, one way to create a quick animated GIF. 

Now as I said, don't go making your own animated GIF for your profile as I want to stand out 😋...**I am joking, let me know if you do add an animated GIF as your profile picture in the comments!**

As I said this will probably get patched if too many people do it, but if that happens at least this gave me a quick post just to fill some "quiet time" while I finalise my content release schedule.


**Thanks for reading**

---

### Bonus - Others with animated profile GIFs
I found a couple of others with animated profile GIFs, go give them a follow.

{% user thomasbnt %}
{% user devlorenzo %}

## Enjoy this post? Here are a couple of others by me...
If you enjoyed this article you may enjoy a couple of my other posts:

{% link https://dev.to/inhuofficial/have-you-ever-built-a-completely-unique-website-5d4h %}

{% link https://dev.to/inhuofficial/my-old-website-100-100-page-speed-insights-unique-design-4dgd %}

And obviously if you want to see what I am working on next then you can always give me a quick follow:

{% user inhuofficial %}