source | info | more demos

Click and drag the Channel 9 guy heads to rearrange them.
This sample was written using the Dojo Toolkit gfx library with Silverlight as the output type. Below I've listed the main JavaScript for this code.

    dojo.require("dojox.gfx");
    dojo.require("dojox.gfx.move");

    var container = null;
    var container_position = null;
    var surface = null;
    var surface_size = null;

    function getRand(from, to){
	    return Math.random() * (to - from) + from;
    }

    function addGuys(itemCount){
	    for(var j = 0; j < itemCount; ++j){		    
			var eyeColor = "black";
			var baseColor = "white";			
			var metalColor = "gray";			
			var hornColor = "#ffcc00";
			var hornStrokeColor = "#ff9900";
			
			var r = 30;
			var dx = getRand(r, surface_size.width  - r);
		    var dy = getRand(r, surface_size.height - r);
			
			var ch9guy = surface.createGroup();			
			
			var headShadow = ch9guy.createCircle({cx: 32, cy: 39, r: 25})
			    .setFill({
		            type:"radial",
		            cx:32,cy:39,r:25,
		            colors:[{offset:0.5, color:metalColor}, {offset:1, color:"#F9F9F9"}]
	            });
			    ; 
			
			var headSetBase = ch9guy.createCircle({cx: 8, cy: 36, r: 8})
			    .setFill(metalColor)
			    .setStroke({color: eyeColor, width: 1})
			    ;
			   
			var head = ch9guy.createCircle({cx: 30, cy: 35, r: 25})
			    .setFill(baseColor)
			    .setStroke({color: eyeColor, width: 1})
			    ;		
			var eye = ch9guy.createCircle({cx: 22, cy: 33, r: 3})
			    .setFill(eyeColor)
			    ;
			var eyeLite = ch9guy.createCircle({cx: 21, cy: 32, r: 1})
			    .setFill(baseColor)
			    ;
			var eye2 = ch9guy.createCircle({cx: 38, cy: 33, r: 3})
			    .setFill(eyeColor)
			    ;
		    var eyeLite2 = ch9guy.createCircle({cx: 37, cy: 32, r: 1})
			    .setFill(baseColor)
			    ;			
			var mouth = ch9guy.createPath("M 20,46 40,46z")
			    .setStroke({color: eyeColor, width: 1})
			    ;
			var mouth2 = ch9guy.createPath("M 21,47 39,47z")
			    .setStroke({color: metalColor, width: 1})
			    ;
            var horn2 = ch9guy.createRect({x: 15, y: 2, width:10, height:16, r: 2})
			    .setFill(hornColor)
			    .setStroke({color: hornStrokeColor, width: 1})
			    ;
            var horn3 = ch9guy.createRect({x: 35, y: 2, width:10, height:16, r: 2})
			    .setFill(hornColor)
			    .setStroke({color: hornStrokeColor, width: 1})
			    ;
			var horn1 = ch9guy.createRect({x: 24, y: 1, width:12, height:19, r: 2})
			    .setFill(hornColor)
			    .setStroke({color: hornStrokeColor, width: 1})
			    ;
			var headSet = ch9guy.createPath("M 5,33 S 2,37 5,40 10,47 13,46 14,41 7,37z")
			    .setFill(metalColor)
			    .setStroke({color: eyeColor, width: 1})
			    ;
			    
			ch9guy.setTransform({xx: 1, xy: 0, yx: 0, yy: 1, dx: dx, dy: dy});					
			
		    new dojox.gfx.Moveable(ch9guy);
	    }
    }

    function initGfx(){        
	    container = dojo.byId("gfx_holder");
	    container_position = dojo.coords(container, true);
	    surface = dojox.gfx.createSurface(container, 500, 500);
	    surface_size = {width: 500, height: 500};
	    
	    //background
	    surface.createRect({x: 0, y: 0, width:500, height:500, r: 10})
			    .setFill({
		            type:"linear",
		            x1:0.5, y1:0, x2:0.5, y2:1,
		            colors:[{offset:0, color:"#f9f9f9"}, {offset:1, color:"#ededed"}]
	            });

	    addGuys(9);
	    
	    //canvas outline
	    surface.createRect({x: 0, y: 0, width:500, height:500, r: 10})
			    .setStroke({color: "#ededed", width: 1})
			    ;
    }   

    dojo.addOnLoad(initGfx);