I’m becoming really fond of these tiny canvas libraries that do one thing well. And SineWaves.js definitely falls into that category.
So, sine waves. You remember these guys from trig, right? (Note: most things Canvas get a little less confusing once you remember trig.) This brand new (first commit, 2 days ago), tiny little library (~5k minified) simplifies generating them.
You give them an amplitude, wavelength, speed, and a few other properties, and it handles the rest. Easy-peasy.
I’ll admit, while I thought it was cool, I didn’t really see right away how something like this could really be useful anywhere. And then I saw their borders example.
See the Pen Sine Wave Borders by Isaac Suttell (@isuttell) on CodePen.
And then things clicked. That is really, really sexy. I want all borders everywhere to do this, without me having to take mind-altering drugs first.
So, check out the GitHub repo here and get your sine on!