Install
<script src="https://unpkg.com/@ondo-graphics/waves@latest/dist/waves.js" type="module"></script>
Use on website
<og-waves
background='{"linearGradient":{"direction":"toRight","colors":[{"color":"rgba(255, 200, 0, 1)","offset":0},{"color":"rgba(255, 220, 0, 1)","offset":1}]}}'
distribution='[2,9]'
speed='1'
complexity='2'
synchronicity='1'
amplitude='2'
waves='[{"linearGradient":{"direction":"toRight","colors":[{"color":"rgb(100% 78.431% 0%)","offset":0},{"color":"rgb(100% 59.251% 29.416%)","offset":1}]}},{"linearGradient":{"direction":"toLeft","colors":[{"color":"rgb(100% 59.251% 29.416%)","offset":0},{"color":"rgb(100% 37.26% 38.911%)","offset":1}]}},{"linearGradient":{"direction":"toRight","colors":[{"color":"rgb(100% 37.26% 38.911%)","offset":0},{"color":"rgb(100% 0% 53.097%)","offset":1}]}},{"linearGradient":{"direction":"toLeft","colors":[{"color":"rgb(100% 0% 53.097%)","offset":0},{"color":"rgb(79.948% 0% 70.471%)","offset":1}]}},{"linearGradient":{"direction":"toRight","colors":[{"color":"rgb(79.948% 0% 70.471%)","offset":0},{"color":"rgb(39.608% 0% 100%)","offset":1}]}}]'
></og-waves>
Preview canvas
Background
Waves
Auto Color Steps
Distribution2 - 9
Amplitude2
Speed1
Complexity2
Synchronicity1
To generate code please use a larger screen