Generate Animated Random SVG Waves With JavaScript – wavejs

Preview:

Description:

Yet another library for creating animated random waves using JavaScript and SVG.

How to use it:

1. Download and import the wave.js.

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

2. Create an empty SVG element on the page.

<svg class="wave" id="wave" preserveAspectRatio="none" viewbox="0 0 1200 50">
</svg>

3. Generate an animated wave. Available parameters:

• SVG: SVG element
• anchors: number of anchors
• minSpeed: Min speed in seconds
• maxSpeed: Max speed in seconds

// Wave(svg, anchors, minSpeed, maxSpeed)
var myWave = new Wave(document.querySelector("#wave"), 10, 0.03, 0.05);