Texto com fundo de mosaico de fotos CSS JS

Estava brincando com a colocação de fotos do usuário no fundo de algum texto grande.

imagem do usuário

Utilizando a cor de texto transparente CSS3 e o clipe de fundo, é possível fazer um mosaico de imagens dentro do texto.

Confira a cópia de trabalho completa aqui: JSBin

HTML, CSS e JS básicos. JS provavelmente poderia ser um pouco limpo.

<html>
<body >
<div id="numbers">
1,024

</div>
</body>
</html>

#numbers {

font: bold 180px Impact, Sans-Serif;

top: 10px;

position: absolute;

-moz-text-fill-color: transparent;

-webkit-text-fill-color: transparent;

-moz-background-clip: text;

-webkit-background-clip: text;

background-size: 20px;

background-position: 0 0;

background-repeat: no-repeat;

}


$(function(){

var $num = $("#numbers");

var maxWidth = $num.width() + 20;

var size = 20;

var xpos = 0;

var ypos = 0;

var time = 0;

var backImage = $num.css("background-image");

var backSize = $num.css("background-size");

var backRepeat = $num.css("background-repeat");

var backPosition = $num.css("background-position");

for (i=0; i<295; i++) {

var img = getRandomObj(images);

backImage += ', url(' + img.src + ')';

backSize += ', ' + String(size) + 'px ' + String(size) + 'px';

backPosition += ', ' + String(xpos) + 'px ' + String(ypos) +'px';

xpos = xpos + size;

if(xpos > maxWidth) {

if(time===0){

xpos = 10;

time = 1;

}else{

xpos = 0;

time = 0;

}

ypos = ypos + size;

}

backRepeat += ', norepeat';


}

$num.css("background-image", backImage);

$num.css("background-size", backSize);

$num.css("background-position", backPosition);

$num.css("background-repeat", backRepeat);

});