A more or less fast and easy way to create animated tile-based graphics using div-elements.

How to use

How to use:
 - Import jQuery and Pixels.js
 - Create the graphics:
logo = new Pixels();
logo.createNew(5,5); //5x5 tiles
logo.def_fg = '#04B404'; //Set foreground color. Default is #000
logo.def_bg = '#111'; //Set background color. Default is #333
logo.width = 30; //Set tile-width in px. Default is 10
logo.height = 30; //Set tile-height in px. Default is 10
logo.paddingx = 5; //Set space between tiles in px. Default is 2
logo.paddingy = 5; //Set space between tiles in px. Default is 2
logo.id = 'logo'; //Set the id-attribute of the div. Change to create more than one graphics. Default is 'pixel'
logo.print_inactive = true; //To print background-tiles, set this to true. Default is false (Performance)

logo.setActive(0,0,3,3); //start and end indexes (x,y,endx,endy)
logo.setActive(3,3,4,4,'#f00'); //To use a different color with the selected tile(s), put it at the end
logo.setActive(4,4,7,7);
logo.setActive(4,0); //To just activate one tile, omit the end-indexes 
logo.setActive(0,4);

 - Print the logo at the desired location and start the animation
logo.print();
$(document).load(logo.showRandom(20, 200)); //First Number is the delay between the animation-starts, second is the duration of each animation

Pixels.js

function Pixels() {
    this.pixels = '';
    this.height = 10;
    this.width = 10;
    this.paddingx = 2;
    this.paddingy = 2;
    this.def_bg = '#333';
    this.def_fg = '#fff';
    this.id = "pixel";
    this.print_inactive = false;

    this.createNew = function (x, y) {
        this.pixels = new Array(x);
        for (var i = 0; i < x; i++) {
            this.pixels[i] = new Array(y);
            for (var k = 0; k < y; k++) {
                this.pixels[i][k] = '';
            }
        }
    };

    this.setActive = function (x, y, xend, yend, color) {
        xend = xend === undefined ? x + 1 : xend;
        yend = yend === undefined ? y + 1: yend;
        
        for (var i = x; i < xend; i++) 
            for (var k = y; k < yend; k++) 
                this.pixels[i][k] = color === undefined ? 'x' : color ;
    };

    this.print = function () {
        document.write('<div id="' + this.id + '" class="pixels" style="position: relative; height: ' + (this.pixels[0].length * (this.height + this.paddingy) - this.paddingy) + 'px; width: ' + (this.pixels.length * (this.width + this.paddingx) - this.paddingx) + 'px;">');
        
        for (var i = 0; i < this.pixels.length; i++) {
            for (var k = 0; k < this.pixels[i].length; k++) {
                if(this.pixels[i][k] === '' && !this.print_inactive) continue;
                document.write('<div class="pixel ' + (this.pixels[i][k] === '' ? 'inactive' : 'active') + '" id="' + this.id + '_' + i + '-' + k + '" style="position: absolute; display: none; top: ' + k * (this.height + this.paddingy) + 'px; left: ' + i * (this.width + this.paddingx) +'px; height: ' + this.height + 'px; width: ' + this.width + 'px; background-color:' + this.getColor(i, k) + '"></div>');
            }
        }
        
        document.write('</div>');
    };
    
    this.getColor = function (x, y) {
        return (this.pixels[x][y] == 'x' ? this.def_fg : (this.pixels[x][y] === '' ? this.def_bg : this.pixels[x][y]));
    };
    
    this.toggleAll = function() {
        for (var i = 0; i < this.pixels.length; i++) {
            for (var k = 0; k < this.pixels[i].length; k++) {
                $('#' + this.id + '_' + i + '-' + k).toggle();
            }
        }
    };
    
    this.showLeftRight = function(delay, duration) {
        for (var i = 0; i < this.pixels.length; i++) {
            for (var k = 0; k < this.pixels[i].length; k++) {
                $('#' + this.id + '_' + i + '-' + k).delay(delay*i).fadeIn(duration);
            }
        }
    };
    
    this.showTopBottom = function(delay, duration) {
        for (var i = 0; i < this.pixels.length; i++) {
            for (var k = 0; k < this.pixels[i].length; k++) {
                $('#' + this.id + '_' + i + '-' + k).delay(delay*k).fadeIn(duration);
            }
        }
    };
    
    this.showRightLeft = function(delay, duration) {
        for (var i = 0; i < this.pixels.length; i++) {
            for (var k = 0; k < this.pixels[i].length; k++) {
                $('#' + this.id + '_' + i + '-' + k).delay(delay*(this.pixels.length - i)).fadeIn(duration);
            }
        }
    };
    
    this.showBottomTop = function(delay, duration) {
        for (var i = 0; i < this.pixels.length; i++) {
            for (var k = 0; k < this.pixels[i].length; k++) {
                $('#' + this.id + '_' + i + '-' + k).delay(delay*(this.pixels[i].length - k)).slideDown(duration);
            }
        }
    };
    
    this.hintBottomTop = function(delay, duration) {
        for (var i = 0; i < this.pixels.length; i++) {
            for (var k = 0; k < this.pixels[i].length; k++) {
                $('#' + this.id + '_' + i + '-' + k).delay(delay*(this.pixels[i].length - k)).slideDown(duration).slideUp(duration);
            }
        }
    };
    
    this.showRandom = function(delay, duration) {
        var actives = [];
        var inactives = [];
        var index_act = 0;
        var index_inact = 0;
        for (var i = 0; i < this.pixels.length; i++) {
            for (var k = 0; k < this.pixels[i].length; k++) {
                if(this.pixels[i][k] === '') {
                    inactives[index_inact] = new Array(2);
                    inactives[index_inact][0] = i;
                    inactives[index_inact][1] = k;
                    index_inact++;
                } else {
                    actives[index_act] = new Array(2);
                    actives[index_act][0] = i;
                    actives[index_act][1] = k;
                    index_act++;
                }
            }
        }
        actives = shuffleArray(actives);
        for(i = 0; i < actives.length; i++) {
            $('#' + this.id + '_' + actives[i][0] + '-' + actives[i][1]).delay(delay*i).show(duration);
        }
        for(i = 0; i < inactives.length; i++) {
            $('#' + this.id + '_' + inactives[i][0] + '-' + inactives[i][1]).delay(delay * actives.length + 0.1 * delay * i + duration).fadeIn(duration);
        }
    };
}

function shuffleArray(o){ //v1.0
    for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
    return o;
}

Pixels.min.js

eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('9 18(){3.4=\'\';3.m=10;3.l=10;3.q=2;3.t=2;3.I=\'#1g\';3.A=\'#1f\';3.8="F";3.G=1e;3.1c=9(x,y){3.4=p u(x);7(6 i=0;i<x;i++){3.4[i]=p u(y);7(6 k=0;k<y;k++){3.4[i][k]=\'\'}}};3.1a=9(x,y,a,b,c){a=a===w?x+1:a;b=b===w?y+1:b;7(6 i=x;i<a;i++)7(6 k=y;k<b;k++)3.4[i][k]=c===w?\'x\':c};3.19=9(){v.z(\'<s 8="\'+3.8+\'" C="4" D="B: 14; m: \'+(3.4[0].5*(3.m+3.t)-3.t)+\'n; l: \'+(3.4.5*(3.l+3.q)-3.q)+\'n;">\');7(6 i=0;i<3.4.5;i++){7(6 k=0;k<3.4[i].5;k++){H(3.4[i][k]===\'\'&&!3.G)Z;v.z(\'<s C="F \'+(3.4[i][k]===\'\'?\'Y\':\'U\')+\'" 8="\'+3.8+\'g\'+i+\'-\'+k+\'" D="B: T; O: 13; P: \'+k*(3.m+3.t)+\'n; Q: \'+i*(3.l+3.q)+\'n; m: \'+3.m+\'n; l: \'+3.l+\'n; R-S:\'+3.M(i,k)+\'"></s>\')}}v.z(\'</s>\')};3.M=9(x,y){K(3.4[x][y]==\'x\'?3.A:(3.4[x][y]===\'\'?3.I:3.4[x][y]))};3.V=9(){7(6 i=0;i<3.4.5;i++){7(6 k=0;k<3.4[i].5;k++){$(\'#\'+3.8+\'g\'+i+\'-\'+k).W()}}};3.X=9(a,b){7(6 i=0;i<3.4.5;i++){7(6 k=0;k<3.4[i].5;k++){$(\'#\'+3.8+\'g\'+i+\'-\'+k).h(a*i).r(b)}}};3.11=9(a,b){7(6 i=0;i<3.4.5;i++){7(6 k=0;k<3.4[i].5;k++){$(\'#\'+3.8+\'g\'+i+\'-\'+k).h(a*k).r(b)}}};3.12=9(a,b){7(6 i=0;i<3.4.5;i++){7(6 k=0;k<3.4[i].5;k++){$(\'#\'+3.8+\'g\'+i+\'-\'+k).h(a*(3.4.5-i)).r(b)}}};3.N=9(a,b){7(6 i=0;i<3.4.5;i++){7(6 k=0;k<3.4[i].5;k++){$(\'#\'+3.8+\'g\'+i+\'-\'+k).h(a*(3.4[i].5-k)).E(b)}}};3.15=9(a,b){7(6 i=0;i<3.4.5;i++){7(6 k=0;k<3.4[i].5;k++){$(\'#\'+3.8+\'g\'+i+\'-\'+k).h(a*(3.4[i].5-k)).E(b).16(b)}}};3.17=9(a,b){6 c=[];6 d=[];6 e=0;6 f=0;7(6 i=0;i<3.4.5;i++){7(6 k=0;k<3.4[i].5;k++){H(3.4[i][k]===\'\'){d[f]=p u(2);d[f][0]=i;d[f][1]=k;f++}1b{c[e]=p u(2);c[e][0]=i;c[e][1]=k;e++}}}c=J(c);7(i=0;i<c.5;i++){$(\'#\'+3.8+\'g\'+c[i][0]+\'-\'+c[i][1]).h(a*i).1d(b)}7(i=0;i<d.5;i++){$(\'#\'+3.8+\'g\'+d[i][0]+\'-\'+d[i][1]).h(a*c.5+0.1*a*i+b).r(b)}}}9 J(o){7(6 j,x,i=o.5;i;j=L.1h(L.1i()*i),x=o[--i],o[i]=o[j],o[j]=x);K o}',62,81,'|||this|pixels|length|var|for|id|function|||||||_|delay||||width|height|px||new|paddingx|fadeIn|div|paddingy|Array|document|undefined|||write|def_fg|position|class|style|slideDown|pixel|print_inactive|if|def_bg|shuffleArray|return|Math|getColor|showBottomTop|display|top|left|background|color|absolute|active|toggleAll|toggle|showLeftRight|inactive|continue||showTopBottom|showRightLeft|none|relative|hintBottomTop|slideUp|showRandom|Pixels|print|setActive|else|createNew|show|false|fff|333|floor|random'.split('|'),0,{}))