Create Animated Waves With JavaScript and Canvas – waving.js

Preview:

Description:

waving.js is a tiny yet customizable JavaScript library for drawing animated waves on an HTML5 canvas element.

How to use it:

1. Download and import the waving.js library.

<script src="waving.js"></script>

2. Generate default animated waves on your page.

new Wave();

3. Customize the waves by overriding the default parameters as listed below:

new Wave({
    unit: 100, // wave size
    info: {
      infoSeconds: 0,
      infoTime: 0,
    },
    animationFrame: .014, 
    timeoutSecond: 35
    el: document.createElement('canvas'),
    colorList: ['#0ff', '#ff0', '#f00', '#00f', '#f0f'] , 
    opacity: [0.8, 0.5, 0.3, 0.2, 0.8] , 
    zoom: [3, 4, 1.6, 3, 2],
    startPosition: [0, 0, 0, 100, 0], 
    lineWidth: 1 , 
    xAxis: Math.floor (this.canvas.height / 2),
    yAxis: , 
    stroke: true, 
    fill: false, 
    canvasWidth: document.documentElement.clientWidth,
    canvasHeight: 200,
}),