Help make this look more realistic

[shubhra 2 Likes (Newbie)]

Greetings to all,

 

So I am trying to make a sort of trickle down effect in an svg. I have a open medicine capsule and I want the granules coming out of the capsule to fall down like a waterfall effect. Although I have tried making this effect using 'y' and fade with yoyo, It doesn't look very realistic.

 

Can you give me some pointers on how to make this better?

 

Thanks!!

See the Pen RWoRJx by shubhra (@shubhra) on CodePen

[Diaco 1,997 Likes (Superhero)]

Hi shubhra 

 

Svg isn't really good choice for particles effect ( from performance wise ) . so , i've made a demo with svg capsule + divs as particles .

 

pls check this out : 

See the Pen ojYzdP by MAW (@MAW) on CodePen

[shubhra 2 Likes (Newbie)]

This is so much better! I was wondering about those zillion circle tags and gradients and how much time it takes to load the svg. Also learnt about even odd in javascript. Thanks!