Generate Random SVG Waves Using JavaScript – wavery

Category: Javascript | July 23, 2019
Author: up2pixy
Views Total: 1,206 views
Official Page: Go to website
Last Update: July 23, 2019
License: MIT

Preview:

Generate Random SVG Waves Using JavaScript – wavery

Description:

wavery is a simple, lightweight JavaScript library to generate customizable waves using SVG and plain JavaScript.

Based on bezier-spline-js library to draw smooth curves passing through given points.

See also:

How to use it:

Load the core JavaScript wavery.min.js from the dist folder.

<script src="./dist/wavery.min.js"></script>

Create a container in which you’d like to draw the waves.

<div id="svg"></div>

Create a new Wavery instance and pass the configuration options as follows:

var wavery = new Wavery({
    width: 800,
    height: 600,
    segmentCount: 20,
    layerCount: 10,
    variance: 0.75, // Decimal value between 0 and 1
    strokeWidth: 0,
    strokeColor: "none",
    gradientColors: [
      {
        colorValue: "yellow",
        position: 0
      },
      {
        colorValue: "red",
        position: 0.5
      },
      {
        colorValue: "navy",
        position: 1
      }
    ]
});

Draw the waves in the container element you just created.

var svg = wavery.generateSvg();
var element = document.getElementById("svg");
element.appendChild(svg);

You Might Be Interested In:


Leave a Reply