A Sea Breeze Blows an SVG

As someone who misses the days of StumbleUpon, it is truly a treat when I come across a fun project. In particular, the projects that interest me most have no apparent purpose; they exist because their creator had an itch to scratch. In this case, the project that I came across was https://getwaves.io.

After perusing this website a bit, I started thinking about what I would want in an SVG generator. SVG generation is not a new topic for me. It first piqued my interest when I found https://github.com/fogleman/primitive. While the project used some fun underlying techniques, the processing made everything a bit magic. To understand it better, I added a couple of additional shape types which worked really nicely (admittedly no, I was not a good open source contributor who pushed the changes upstream). On top of that, and absolutely an article for another day, I built out an SVG color processing library.

For this SVG generation I wanted to take advantage of the natural layering and coloration. The original favicon of this site - which may be the current favicon or not - is the type of design I wanted to create. It layers multiple SVG paths to create an abstract shape. Once the SVG is created, by appending each of the paths within the container, it is a design choice to layer and color them accordingly.

Taking a step back then, I wanted a tool that met the following criteria:

1. Repeatable. The same inputs generate the same outputs. Randomness will strictly come from randomizing the input values.
2. Controllable: Wave harmonics should have simple controls to be individually changed.
3. Stackable: Layering should be built into the tool itself.

The subsequent articles will be the journey I took to figure out how this tool would work as well as the interludes and learnings along the way.