index.html

<canvas width="800" height="600"></canvas>

script.js

    var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
                                window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
    window.requestAnimationFrame = requestAnimationFrame;

(function(global, $) {

    var colorDiff = function(c1, c2) {
        return [c1[0] - c2[0], c1[1]  - c2[1], c1[2] - c2[2]];
    };
    var colorSum = function(c1, c2) {
        return [c1[0] + c2[0], c1[1]  + c2[1], c1[2] + c2[2]];
    };
    var colorMult = function(s, c) {
        return [s * c[0], s * c[1], s * c[2]];
    };

    var Noise = function(canvas, options) {
        this.canvas = canvas;
        this.options = $.extend({}, this.options, options);

        this.initVars();
    };
    Noise.prototype = {
        options: {
            originColor: [6, 105, 222],
            destinationColor: [255, 255, 255],
            darkStep: 0.85,

            darkVariation: 20,
            darkInitialSize: 30,
            minDarkSize: 200,
            maxDarkSize: 220
        },

        initVars: function() {
            this.boundAnimate = this.animate.bind(this);
            this.context = this.canvas.getContext('2d');
            this.width = this.canvas.width;
            this.height = this.canvas.height;
            this.imageData = this.context.getImageData(0, 0, this.width, this.height);
            this.imageDataData = this.imageData.data;

            this.darkInit = -this.options.darkInitialSize;
            this.darkEnd = 0;
        },

        stop: function() {
            this.stopped = true;
        },

        start: function() {
            this.stopped = false;
            this.animate();
        },

        animate: function() {
            if (this.stopped) {
                return;
            }

            var ctx = this.context,
                data = this.imageDataData,
                w = this.width,
                h = this.height,
                offset = 0;

            var colorDifference = colorDiff(this.options.destinationColor, this.options.originColor);

            for (y = 0; y < h; ++y) {
                var isDark = false;
                if (y >= this.darkInit && y < this.darkEnd) {
                    isDark = true;
                }
                for (x = 0; x < w; ++x, offset += 4) {
                    var randomFactor = Math.random();
                    if (isDark) {
                        randomFactor *= this.options.darkStep;
                    }
                    var newRgb = colorSum(this.options.originColor, colorMult(randomFactor, colorDifference));

                    data[offset] = newRgb[0];
                    data[offset + 1] = newRgb[1];
                    data[offset + 2] = newRgb[2];
                    data[offset + 3] = 255;
                }
            }

            this.darkInit += Math.random() * this.options.darkVariation;
            this.darkEnd += Math.random() * this.options.darkVariation;

            var darkSize = this.darkEnd - this.darkInit;
            if (darkSize < this.minDarkSize) {
                this.darkEnd = this.minDarkSize;
            }
            if (darkSize > this.maxDarkSize) {
                this.darkEnd = this.maxDarkSize;
            }
            if (this.darkInit >= this.height) {
                this.darkInit = -darkSize;
                this.darkEnd = 0;
            }

            ctx.putImageData(this.imageData, 0, 0);

            requestAnimationFrame(this.boundAnimate);
        }
    };

    global.Noise = Noise;

}(this, jQuery));


var noise = new Noise($('canvas')[0]);
noise.start();