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>

6. Determine the number of points that make up the wave path, and set the maximum amount each point can deviate from the wave’s center.

<dynamo-wave 
  data-wave-points="100" 
  data-wave-variance="2">
</dynamo-wave>

7. Initialize the wave generator with a deterministic seed.

<dynamo-wave 
  data-wave-seed="custom-seed">
</dynamo-wave>

8. Determine whether the wave should begin and end on the baseline.

<dynamo-wave 
  data-start-end-zero>
</dynamo-wave>

9. Apply customizable animations to the wave.

<dynamo-wave 
  data-wave-speed="3000" 
  data-wave-animate="true">
</dynamo-wave>

10. Add an intelligent IntersectionObserver to your dynamowave.

<!-- One-time wave regeneration -->
<dynamo-wave data-wave-observe="once"></dynamo-wave>
<!-- Continuous wave regeneration -->
<dynamo-wave data-wave-observe="repeat"></dynamo-wave>
<!-- Wave regenerates with 100px expanded viewport -->
<dynamo-wave data-wave-observe="repeat:100px"></dynamo-wave>
<!-- Wave regenerates with 50px contracted viewport -->
<dynamo-wave data-wave-observe="once:-50px"></dynamo-wave>

11. API methods.

const wave = document.querySelector('dynamo-wave');
wave.generateNewWave(duration);
wave.play(duration);
wave.pause();

Changelog:

v2.1.1 (11/20/2025)

• Refine wave seed handling
• Set SVG fill to currentColor

v2.1.0 (11/09/2025)

• Add option for zero-height wave endpoints