Smooth curves in Canvas paths -- another randomized line animation

Project URL:

Previously I had made something like this, but with SVG paths that had dynamically updated path attributes that moved on randomized curves. It was meant to simulate water and you can see it here: Once I really had it animating the way I wanted though, I saw that it was pretty heavy on the browser, so I decided to try the same thing out in HTML5 Canvas!

The math had to be a little different (due to the different methods available for forming curves/arcs in Canvas vs SVG) but I got a real kick out of it :slight_smile: I hope you do too!


1 Like