SVG Mosaic
HTML
<div id="canvas"></div>
JavaScript
var draw = SVG('canvas');
var colors = [
'red',
'green',
'blue'
];
var images = [
'http://foto.hrsstatic.com/fotos/0/3/256/256/80/FFFFFF/http%3A%2F%2Ffoto-origin.hrsstatic.com%2Ffoto%2F3%2F9%2F0%2F9%2F390989%2F390989_a_1291220.jpg/an1mdqkoFYkZhQNwwTDtSA%3D%3D/128,128/6/Sunset_Beach_Resort_Spa-Ko_Samui-Aussenansicht-2-390989.jpg',
'http://foto.hrsstatic.com/fotos/0/3/256/256/80/FFFFFF/http%3A%2F%2Ffoto-origin.hrsstatic.com%2Ffoto%2F5%2F8%2F2%2F0%2F582035%2F582035_u_3121177.jpg/Y%2Fx0JFDEwUcdv703xL8fsw%3D%3D/138,200/6/Forest_Park_Hotel-Foini-Info-9-582035.jpg',
'http://foto.hrsstatic.com/fotos/3/3/256/256/80/FFFFFF/http%3A%2F%2Ffoto-origin.hrsstatic.com%2Ffoto%2F0%2F3%2F8%2F8%2F038898%2F038898_u_3787324.jpg/rDTrDsa7DVB3Os8KujJ9lA%3D%3D/1073,856/6/Tradewinds_Sandpiper_Sandpiper_Beach_Resort-St_Petersburg-Info-55-38898.jpg'
];
var group = draw.group();
var count = 40;
var size = 50;
var gap = 5;
for (var i = 0; i < count; i++) {
var gap
for (var j = 0; j < 6; j++) {
// cycle colours
var color = colors[Math.floor(j % colors.length)];
var img = images[Math.floor(Math.random() * images.length)];
var origin = group.group();
var yOffset = 0;
var xOffset = 0;
var polygon = null;
var mask = '0,0 0,50 50,25';
var q = i - Math.floor(i / 4) * 4;
if (q == 1 || q == 2) {
yOffset = (size + gap * 2) / 2;
}
if (q == 1 || q == 3) {
mask = '50,0 50,50 0,25';
}
origin.move((size + gap) * Math.floor(i / 2), (size + gap * 2) * j + yOffset);
var rect = origin.image(img, 50, 50);
rect.scale(0, 1);
rect.animate(500, '-', 500 * i + Math.random() * 1500).scale(1, 1);
var polygon = draw.polygon(mask).fill({ color: '#fff' });
rect.clipWith(polygon);
/*
rect.mouseover(function(e) {
console.log(e);
});
*/
...