Create your own SVG random wave generator in less than 15 minutes! Quick JS frontend quick tutorial
Waves can take your web design to the next level. They are also so much fun to generate. In this quick tutorial we will write our very own wave generator function. The best part? It's endlessly customizable, giving you the creative freedom to potentially generate awesome and unique patterns for your websites or web applications.
Github Repo:
https://github.com/PikoCanFly/randomW...
Chapters
00:00 - introduction and wave generation motivation
01:16 - define wave generator function
01:30 - Math.sin() method
01:48 - create SVG component + Path component using createElementNS method
03:20 - declare frequency, phase, and amplitude variables
04:05 - declare path data variable as a string literal
04:26 - use the Move to command
04:50 - create a loop that loops through every x coordinates and dynamically generates a y coordinate
07:53 - preview and test function for the first time
08:40 - tweaking variable values
09:25 - turn the wave into a closed shape
10:25 - generate random waves
#javascript #learncoding #frontend #webdevelopment #webdesign #tutorial #SVG #waves