The SineWaves.js Libary


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!


Rob has been building websites for more than half of his life. You'd think that'd make all this less interesting, but nope! There's a lot of awesome stuff going on webwards, and canvas is definitely one of them.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *