HTML canvas: how do I create these distorted circles?

I'd like to automatically generate the circles in the attached image, but I don't know if it's possible. Ideally, I'd select a few colors, and then I'd use canvas to create these stacked, semi-random, distorted circles. Could someone point me in the right direction? I've only used canvas to draw basic shapes, but haven't done layering or distortion...or masking.
Who is Participating?
Tom BeckCommented:
Looks like circles with varying stroke thicknesses layered on top of each other.

Here's a jsFiddle that simulates the effect from that perspective;
A mix of alpha-blending, masking, gradients could possibly make it work. I can only point you to some useful links.
zumpoofAuthor Commented:
Wow, thank you for putting the work into this, Tom. This is exactly what I was looking for.
Tom BeckCommented:
You're welcome. It was fun. Thanks for the points.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.