Abstract Smoky Background with jQuery and Canvas - waterpipe.js

waterpipe.js is a cool jQuery plugin that makes use of HTML5 canvas to dynamically generate an abstract smoky background for your web page. Comes with lots of options to custom the color, opacity, size, gradient and shape of your smoky background. Works on all major browsers which support HTML5 canvas element.

Basic usage:

1. Include the latest version JQuery library and waterpipe.js at the end of the document so the pages load faster.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="waterpipe.js"></script>

2. Create a container where you want to apply on a smoky background.

<div id="demo" style="width: 100%; height: 100%;"> 
    <canvas>Your browser does not support HTML5 canvas.</canvas>
</div>

3. Initialize the plugin by calling the function on the container element you just created.

$('#demo').waterpipe();

4. Default options.

gradientStart: '#000000',
gradientEnd: '#222222',
smokeOpacity: 0.1,
numCircles: 1,
maxMaxRad: 'auto',
minMaxRad: 'auto',
minRadFactor: 0,
iterations: 8,
drawsPerFrame: 10,
lineWidth: 2,
speed: 1,
//Background
bgColorInner: "#ffffff",
bgColorOuter: "#666666",

---

This awesome jQuery plugin is developed by dragdropsite. For more Advanced Usages, please check the demo page or visit the official website.