Generate Animated Random SVG Waves With JavaScript – wavejs

Category: Javascript | July 4, 2022
Author:vedantyadu
Views Total:1,257 views
Official Page:Go to website
Last Update:July 4, 2022
License:MIT

Preview:

Generate Animated Random SVG Waves With JavaScript – wavejs

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);

You Might Be Interested In:


Leave a Reply