Ripple effect, radiating out from an object

Hi again :)
What’s the best way to create an effect where an object (let’s say a square) radiates waves, like a stone thrown into water?
This is the best example I found of the effect html - Rings with ripple animation CSS ONLY - Stack Overflow

Would it be creating another square with thick borders and transparent center (let’s call it Frame) + automate it’s scale so it’ll radiate out?
What if I would like to have three such waves visible at a time, each with a lower transparency further from the center square, should I create three such Frames?

Or maybe a trick with 'Ripple Image Directionally? It may have worked, if only the lines would extend and connect to form a square. And if it would die out on the third one instead of extending forever.

My best shot at this attached, but that is very far from what I’m aiming for.
Thanks :)

RippleTraceDemo.vuo (4.48 KB)

Screen Shot 2019-09-04 at 22.48.07.png


Here’s a composition using Ripple Image Radially that may be helpful.

circleripple.vuo (3.01 KB)


Thanks @jmcc , that was easy as 1-2-3, right? I totally learned a new trick from you (automating weird inputs with time), this will sure be useful <3
Any ideas though on how co create ripples for non-round shapes? Or a least a square shape. Somethings like this:


Joined are some work directions to play with maybe.
A stripe image on a quad layer rendered as a 4 directions Kaleidoscope.


Ripple (12.9 KB)


@Bodysoulspirit that’s just beyond, thanks! That’ll keep me busy for some time. Interesting use of quad to thin out the outer ripples + some other concepts I’ll dig into.
Thanks again everyone!

1 Like