chakotay

I'm trying to create an SVG that has clickable shapes, which, when clicked fills the entire shape from the inside out. http://codepen.io/anon/pen/OMBPar ^ This works well for filling the entire region at the same time but what I'm trying to achieve is a "ripple effect" which will fill outwards from the point at which the click took place. So the fill "diffuses" out to the edges of the shape (and stays within the clicked shapes). Essentially, I'm after something like the following effects: http://tympanus.net/Tutorials/SVGRipples/ http://codepen.io/zavoloklom/pen/wtApI http://codepen.io/Craigtut/pen/dIfzv http://codepen.io/anon/pen/BjYQeM But ideally just using Tweening - is this possible? Any help is much appreciated! Thanks.

That's great thanks for all your help guys.

Thanks for your help guys, much appreciated. I've had a go but I'm making a bit of a mess of it, I'm getting some weird opacity masking, any chance you could fork my original codepen by way of example? Here's where I got to: http://codepen.io/anon/pen/RrYxXq I want it to start filled white and fill with colors.

I'm trying to animate fills on SVG paths. I can use Tween to fill the entire paths progressively but I'm looking to animate the filling progressively from an origin and was wondering whether this was even possible with GSAP? In the linked Codepen (http://codepen.io/anon/pen/RrYxXq), I've been able to fill each pencil in-turn, but the desired effect is to have each pencil filled one-by-one from the bottom upwards, (filling each pencil from white to the full colour from the bottom up as if filling with water) - sort of an equalizer effect. Any help/guidance would be much appreciated! Thanks!