Вот, сделал небольшой пример с использованием одного бесшовного *png изображения:
http://learn.javascript.ru/play/4qNur
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
.noise {
background: url('http://learn.javascript.ru/files/play/54/9f/549fdabb5db7c.png');
height: 480px;
width: 640px;
}
</style>
</head>
<body>
<div class="noise"></div>
<script type="text/javascript">
(function() {
var getRandom = function(max) {
return Math.floor(Math.random() * ++max);
},
noise = document.querySelector('.noise'),
noiseStyle = noise.style;
setInterval(function() {
noiseStyle.backgroundPosition = getRandom(200) + 'px ' + getRandom(200) + 'px';
}, 30);
})();
</script>
</body>
</html>
В данном примере меняется стиль background-position со случайными значениям от 0 до 200 (т.к. размер текстуры 200x200). Частоту кадров можно изменить с помощью второго аргумента setInterval.
Вроде вполне хорошо смотрится, и вес текстуры всего 5кб.
