How To Animate Parts Of This Logo?


I want to try and animate the pink circle parts of the attached logo, not sure where to start or if it is possible.

Would like the circles to either flash or change colour?

Hope that makes sense, and I hope somebody can help me with this.

Many Thanks

It’s possible but you’d need to mockup an attempt and we go from there.


That’s just it, I have no idea how to even start!


Would I need to create separate images for each circle?

It just seems like a lot of work or little benefit.

Unless you wanted all those pink things to be an image, and then on hover you swap background images…I mean that’s the only way I’d even bother with this.

I’ve moved this to Design & UX, which seems a better fit at the moment.

I’m guessing here, as I really have no idea, but could you use an animated gif, with the background a slightly different colour in each frame?

I thought of that too but wouldn’t that get annoying to have a constantly updating graphc on the page? TBH (my opinion) I’d only ever want something like that changing on hover.

Just one mans opinion though.

It would indeed - but AFAIK, you can set an animated gif to stop after x frames, so it would cycle through one colour change then stop.

Any animated image will suffer from the same problems, unless there’s a pause/stop mechanism. (And change on hover won’t be visible to keyboarders or touchscreen users - not important for a purely decorative effect, I imagine.)

1 Like

Ah - ok I never knew you could just stop the GIF from continuously going. Guess that makes sense :slight_smile: . Also I forgot about the accessibility part of that.


Thanks for the responses, the logo to be animated in some way has been requested I agree it is not to some tastes!

The logo is meant to be like a ‘disco’ glitter ball. I thought their might be a Jquery solution or CSS3 solution to achieve the dots fading in and out.

There is but you’d need ot make all those elements in HTML/CSS first, and then include the “disco” code to make it animate.

I don’t see how it’s worth it.

Find out the specs of the requirements. Animated always? Use an animated image.

Animated only on hover? Use two images; one normal state and one disco state. Swap between them on hover.

I wouldn’t bother going down the HTML/CSS route for this.

OK thanks for your responses, I think I will just create a simple animated gif.

just rememer to keep an eye on the filesize - it can climb alarmingly quickly :wink:

You could try making something like this with GIMP…
It’s not perfect, but with a little effort it could be what you are after…


I quite like that, I have Photoshop, how did you do that in GIMP?

Thanks for the response :smile:

i know you said this was a client request but have you explained to them how distracting this is - even if it’s not continuous (in which case you have to allow for different downloads times as to how it displays for) and this example - as an example - weighs 448kb.

put it on a page and maybe it’s wow. the first time. now start reading oh it’s still rotating and blinking. revisit the page several times and try and concentrate on the text - after all you’ve seen the logo now so you quickly look down to content. oh that damn rotating logo thing :smile:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.