This package provides the ability to create beautiful waves with the use of the HTML canvas element. Fluctus uses vanilla JS and is super lightweight.
Install through npm
npm install fluctus
Then require or import Fluctus in:
import fluctus from 'fluctus'
Install through repo files
Fluctus Requires 2 things:
- A Canvas element
<canvas class="fluctus" id="wave1"></canvas>
Creating a new wave is as simple as passing in 6 arguments into the Fluctus method:
The ID of the canvas element the wave should be drawn on.
The fill color (HEX) of the wave.
The Zoom value should be anywhere from 0 to 2.5 to produce desirable results. The lower the zoom value, the more waves the Fluctus will produce.
The Delay value shifts the wave left and right. Lower values shift the wave to the right while higher values shift the wave to the left. Nominal values are 0 through 1000.
The opacity parameter sets the alpha of the wave. A value of 1 would be completely opaque while a value of 0 would be completely transparant.
The Height parameter manipulates the height of the wave. This is useful for "stacking" waves. The default height is 80.
Mess around with the Zoom, Delay, Opacity, and Height values to get the desired effect.
Multiple Stacked Waves
<canvas id="wave1"></canvas> <canvas id="wave2"></canvas> <canvas id="wave3"></canvas>