DEV Community

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

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

inhuofficial profile image InHuOfficial ・7 min read

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

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.

Layers panel in Adobe Illustrator, naming each of the layers

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

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

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)}
}
Enter fullscreen mode Exit fullscreen mode

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

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)}
}
Enter fullscreen mode Exit fullscreen mode

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

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");
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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; 
Enter fullscreen mode Exit fullscreen mode

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.

screenToGif main screen

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

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.

several frames are selected at start of a GIF that are about to be deleted

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

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.

thomasbnt image
devlorenzo image

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:

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

inhuofficial image

Discussion (5)

pic
Editor guide
Collapse
inhuofficial profile image
InHuOfficial Author

I am looking forward to seeing everyone's animated profile pics!

If you do add one, share it here and I will update the article to include it!

Collapse
the_riz profile image
Rich Winter

This entire thing can be done with no JS.

Collapse
inhuofficial profile image
InHuOfficial Author

I did say in the article it was purely because it was easier and this was throwaway code purely to create a GIF.

If you fancy updating the fiddle with css only I will happily add your contribution into the article and give you a shout out!

In theory the whole thing can be done without SVG too but that would have been a lot of work 😂😂

Collapse
afif profile image
Temani Afif

the link to screentogif.com/ is not good in your article.

Collapse
inhuofficial profile image
InHuOfficial Author

It does help if you don't swap the URL with the link text...doh!

Nice spot, fixed it, thanks for that one!