Generate Highly Customizable SVG Waves With Dynamowaves.js

Preview:

Description:

Have you attempted to make your own wave shapes using SVG? It might seem easy at first glance but it’s actually harder than you would have imagined.

Dynamowaves.js seems to address this issue by providing a lightweight JS library that allows users to create highly customizable waves dynamically with low complexity and with easier use of SVG.

How to use it:

1. Download and load the Dynamowaves.js library in the document.

<script src="dynamowaves.min.js"></script>

2. Add a basic wave to the page. It is worth noting that this SVG wave will automatically change shape as the page refreshes.

<dynamo-wave></dynamo-wave>

3. Customize the background color of the wave.

<dynamo-wave 
  style="fill:steelblue">
</dynamo-wave>

4. Set the direction of the wave. Default: bottom.

<dynamo-wave 
  data-wave-face="top">
</dynamo-wave>
<dynamo-wave 
  data-wave-face="bottom">
</dynamo-wave>
<dynamo-wave 
  data-wave-face="left">
</dynamo-wave>
<dynamo-wave 
  data-wave-face="right">
</dynamo-wave>

5. Determine whether to automatically change the wave’s shape as you scroll down/up the page.

<dynamo-wave 
  data-wave-observe="true">
</dynamo-wave>