Wavelength Generator App

As I was attempting to create a design for a Light Spectrum graphic for a product web page, I found it frustrating to create a smooth vector path to depict the variable wavelength across frequencies.

I couldn't find any Figma plugins that could generate a wave with variable frequency (although there is likely a easy Illustrator effect that can accomplish this in seconds).

Out of curiosity, I took to ChatGPT to see if it could generate the code for an SVG path...

After iterating through several prompts, I was able to create a very crude, but functional front-end application that generated a variable wavelength SVG using javascript.

I wanted to see how far I could continue developing it. I was able to add functionality for a frequency input slider with a live preview window that renders the SVG, additional functions for Sawtooth, Square, and Triangle waves, plus a direct download button to save the SVG file.

Once I had a functioning version, I went back and created a simple UI design in Figma and developing those styles with basic CSS.

I published the Wavelength Generator App live so you can try it out for yourself. I will probably continue to add more features later on.