T1 logo in JS+PNG

Initially, my logo was 105K GIF. Now it’s transparent PNG+JS. As easy as:

            var color = 0;
            var interval = 60;  /* time msec, after which color changes */
            var clrInc = 4;     /* HSV degree increment */
            function chcolor(){
                var t1_logo = document.getElementById("t1_tl"); /* div_to_animate */
                color < 360 ? color = color + clrInc : color = 0;
                t1_logo.style.backgroundColor = "hsl("+color+", 100%, 50%)";

            function stchcol(){
                var logoChCol = setInterval(chcolor, interval);
            window.onload = stchcol;


Main page

Benefits are smaller page size, smaller prcessor load. Eventuall, animation in JS consumes lees resources than a GIF rendering. 35% losad with GIF animation vs 15% load with JS animation. At least, in Fedora 16 with nouveau.

The idea was given to me by fiskus, but it was quite a long ago, so I feel I had the same idea at the moment he suggested it to me. Nevertheless, he desrves a credit.

  • While the solution is cool, I would line 6 of your JS a bit. In case later on you will want to increment color not by 4, but something like 7, it will show you a bug with hue being more than 360. For example when color will become 357, the color 360) ? clrInc – 360 : clrInc;

    This way it will properly recalculate the hue.

    • T1

      The value of HUE can be any number, no necessarily less than 360. I have a condition on order to prevent integer overflow.

  • I think my code was escaped, trying with pre:

    color += (color+clrInc>360) ? clrInc-360 : clrInc;

  • hue represents a degree, so it is much better to keep it in 360 limit :)

  • T1

    Not necessarily. There is not much difference between 360 and 720 degrees. But I respect your desire to create extra limits where the do not exist :)