GrahamTheDev

Posted on Mar 21, 2021

Create an animated dev.to profile pic with SVG, CSS and JS, then convert it to a GIF [tutorial].

#javascript #css #showdev #codepen

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

Before I stacked them on top of each other I grouped them (Ctrl + G) 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.

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

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").

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:

.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 🤣

I had forgot the transform-origin...doh!

.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".

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.

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.

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.

/* 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".

transition: opacity 0.2s linear;

And there we have it, a hacked together logo animation.

Step 4 - capturing the animation

The final step is to grab the animation.

For this I use Screen To GIF.

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.

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

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 Del to remove them.

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.

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