Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

wavy-canvas

0.0.7 • Public • Published

Wavy Canvas

npm version GitHub version

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"

Wavy canvas in action

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

wavy.js wavy.js (gzip) wavy.min.js wavy.min.js (gzip)
33.94 KB 8.64 KB 16.47 KB 5.19 KB

CSS

style.css style.css (gzip)
327 B 205 B
0.33 KB 0.21 KB

Development

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

License

MIT

install

npm i wavy-canvas

Downloadsweekly downloads

8

version

0.0.7

license

MIT

last publish

collaborators

  • avatar