Takes an element, creates and prepends an HTML5 canvas element (if supported), and draws a series of randomized circles and rotated rectangles on the canvas. Usage:
var cgts = new CircleGetsTheSquare(elem, options);
Default options are outlined below, but you can pass your custom options object in as the 2nd argument to the constructor. You can also call setOptions on your instance to change any of the options (passing in only the keys you want to change), with an optional boolean 2nd argument to regenerate the background immediately. (This won't change the className on the canvas or the resize behavior, though—it's mainly to vary the appearance for dynamic setups.)
canvasClassName: 'cgtsCanvas'
// randomized circle radii
minRadius: 20,
maxRadius: 60,
// randomized rect dimensions
minRectSide: 40,
maxRectSide: 120,
// randomized color values
// (generates rgba)
rMin: 0,
rMax: 255,
gMin: 0,
gMax: 255,
bMin: 0,
bMax: 255,
aMin: 0.2,
aMax: 0.8,
// x/y spacing for center points
spacing: 40,
// randomized +/- variance of center points
// to avoid appearance of a rigid grid
jitter: 6
// resize behavior
regenOnWinResize: true,
resizeThrottle: 100, // milliseconds
Will regenerate on window.resize unless you set the relevant option to false.
On github if you want to modify or contribute.