Wavy Canvas

Small library which gives you ability to create a wave animation on the <canvas>.

Includes hidpi-canvas-polyfill (src) by @jondavidjohn

Can be easily used in AMD / CommonJS / ES6 / legacy environments.

"A picture is worth a thousand words"

Demo

Open http://codepen.io/hinok/pen/xOwrKJ

Usage

Options

You must set at least either selector or selectorEl option and radiuses, duration options.

var wavy = new Wavy(options);

• hexFillColor, {string}, defaults #ff0000, optional - Background hex color of waves
• hexStrokeColor {string}, defaults inherits from hexFillColor, optional - Stroke hex color of waves
• onlyWaves {boolean}, defaults false, optional - Whether should render only waves with transparent background or not
• radiuses {Array}, required - Next radiuses of rendered waves
• duration {number}, required - How long waves animation should take in ms (mili seconds)
• selector {string}, optional - A selector of a DOM element where <canvas> should be appended.
• selectorEl {Element}, optional - A DOM element where <canvas> should be appended. Overrides selector option
• centerWaveSelector {string}, defaults .js-wavy-center, optional - A selector of a DOM element which set center (source) of waves. Must be a child of DOM element set by properties: selector or selectorEl
• centerWave {Object}, optional - An object containing props x, y which indicate center of waves. Overrides centerWaveSelector option.

Regular usage

new Wavy({
  hexStrokeColor: '#fff',
  radiuses: [10, 20, 30],
  duration: 3000,
  selector: '.js-dom-element'
});

All options

new Wavy({
  hexFillColor: '#fff',
  hexStrokeColor: '#fff',
  onlyWaves: false,
  radiuses: [10, 20, 30],
  duration: 5000,
  selector: '.js-dom-element',
  selectorEl: document.querySelector('.js-other-dom-element'),
  centerWave: {
    x: 500,
    y: 500
  },
  centerWaveSelector: '.js-child-of-dom-element'
});

For more details look at demo folder.

ES2015 / ES6

import Wavy from 'wavy-canvas/src/Wavy';
 
const wavy = new Wavy({
    radiuses: [10, 30, 50, 80, 120, 160, 200, 280],
    hexFillColor: '#fff',
    hexStrokeColor: '#fff',
    duration: 4000,
    selector: '.js-where-should-I-append-canvas-element'
});
 
wavy.start();

ES5

var wavy = new window.Wavy({
    radiuses: [10, 30, 50, 80, 120, 160, 200, 280],
    hexFillColor: '#fff',
    hexStrokeColor: '#fff',
    duration: 4000,
    selector: '.js-where-should-I-append-canvas-element'
});
 
wavy.start();

Size

Javascript

CSS

Development

npm install         # quite obvious... ¯\_( ͠° ͟ʖ °͠ )_/¯ 
npm start           # starts server, opens browser, watches for files changes 
npm run build       # build js and scss 

License

MIT