Canvas based jQuery smoky backgrounds generator – waterpipe.js

Waterpipe.js is a jQuery smoky backgrounds generator, which uses HTML5 canvas to generate dynamic, abstract background effects.

jQuery smoky backgrounds generator – nice effects based on Canvas

This solution is a plugin for smoky backgrounds generation, based on HTML5 Canvas. There is lot of options to custom parameters like the color, opacity, size, shape, or gradient. It works on all major browsers with HTML5 canvas support.

waterpipe.js - jQuery smoky backgrounds generator
waterpipe.js – jQuery smoky backgrounds generator


Include jQuery and waterpipe.js:

<script src="jquery.min.js"></script>
<script src="waterpipe.js"></script>

Create wrapper with canvas element inside:

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

Initialize the plugin. The following example comes with default parameters:

var smokyBG = $('#bg-wrapper').waterpipe({
    gradientStart: '#000000',
    gradientEnd: '#222222',
    smokeOpacity: 0.1,
    numCircles: 1,
    maxMaxRad: 'auto',
    minMaxRad: 'auto',
    minRadFactor: 0,
    iterations: 8,
    drawsPerFrame: 10,
    lineWidth: 2,
    speed: 1,
    bgColorInner: "#ffffff",
    bgColorOuter: "#666666"

License: MIT

Demo / homepage:

Get the jQuery smoky backgrounds generator plugin from GitHub:


You may also like:

CSS3 fullscreen background image slideshow – a tutorial

Tutorial: An introduction to CSS 3D transforms

jQuery fancy input box with amazing CSS3 effects

JavaScript physics animations library – dynamics.js