NoiseGen Demo

Background noise and patterns in this page have been dynamically generated in your browser through JavaScript. That's unless your browser doesn't support the canvas element, in which case a fallback image is used. The jQuery plugin noiseGen takes care of all that.

↑

$("#box1").noiseGen({
  opacity: 1,
  width: 60,
  height: 60,
  grainDimension: 1,
  bias: 5,
  distribution: "bell",
  fromColor: "0088c0",
  toColor: "10a9cf",
  independentChannels: true,
  fallbackImage: "blue.png"
});

↑

$("#box2").noiseGen({
  opacity: 1,
  width: 120,
  height: 80,
  grainDimension: {
    width: 60,
    height: 1
  },
  fromColor: "777777",
  toColor: "BBBBBB",
  distribution: 10,
  bias: -9,
  fallbackImage: "grey.png"
});

↑

$("#box3").noiseGen({
  opacity: 1,
  width: 100,
  height: 70,
  grainDimension: {
    width: 10,
    height: 1
  },
  fromColor: "472B00",
  toColor: "573700",
  distribution: "bell",
  bias: 8,
  fallbackImage: "brown.png"
});