Jump to content


SVG Dotted Stroke Animation

Recommended Posts

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

Link to comment
Share on other sites

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.
  • Like 3
  • Thanks 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.