SVG Dotted Stroke Animation

[shunyadezain]

Hi guys!

 

I'm trying to make a simple weather app on Codepen and I have a hard time to make one animation with dotted strokes.

I want to make these strokes to move like rain drops.

 

I tried drawSVG first but, I found an article about a line animation using stroke-dashoffset on CSS Tricks and it kind of works.

There are still dots on the sides and look not good...

Here is the article: https://css-tricks.com/svg-line-animation-works/

 

Is there any solution for this?

Thank you

 

See the Pen gOrjvYv?editors=1010 by shunyadezain (@shunyadezain) on CodePen.

[ZachSaucier]

Hey shunyadezain. As usual with SVG, asset prep is key. Why not use three paths for the rain instead of a bunch of smaller paths? I think that'd make syncing things easier. 

 

Minor notes:

• You're currently animating the strokeDashoffset of your cloud which is extra work for no gain. I might use a class to specify which paths to animate.
• You have a couple of <g>s that aren't doing anything. It doesn't really hurt to leave them but it doesn't help you at all.

[shunyadezain]

Hi @ZachSaucier,

 

Thank you so much. It looks great now! I'm sorry about the code was messy.

Have a nice day!