Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

draw dashed path svg

Recommended Posts

So I've been getting to know the morphsvg and drawsvg plugins the last day or so, and my goal has ultimately been a curved arrow that animates as you see in the attached codepen. The issue I'm having now is that the line for this arrow should be dashed and I'm not sure what the problem is. There's a stroke-dasharray setting on the svg to begin with, but the drawsvg animation seems to override that. So I tried adding a strokeDasharray property to the tween itself but that seems to have no impact (first time using that and honestly not sure if I'm using it properly; couldn't find any documentation on it and only a couple codepen examples of it being used). I have a few, more drastic solutions in mind that seem very hacky to me so I'm hoping there's a clear approach here that I'm just unaware of.

Also, if you disable the js and run the pen that will show what I am trying to get the line to look like. 

See the Pen KYNZZv by tganyan (@tganyan) on CodePen

Link to comment
Share on other sites

Yep, DrawSVG works its magic by making one big dash and animates the offset. You'll need to use a mask to make this work.

See the Pen XQpzYj by PointC (@PointC) on CodePen


I wrote a bit about this here:

Happy tweening.



  • Like 4
Link to comment
Share on other sites

@PointC is a master at this stuff. He's got several codepens that illustrate it very well, as he linked to above (but go through his codepen collections and you'll find plenty of nuggets in there). Enjoy!

  • Like 1
Link to comment
Share on other sites

Thanks! Looks like I'll have to read up some more on svg masks; I have an understanding of what a mask is/does generally speaking, but I still am not quite sure I understand why this particular mask is getting the desired effect. Which I'm sure comes down to a lack of intuition on this from being less experienced.

Update: Nevermind, I definitely get it. I hadn't noticed that the target element in the js was changed to the mask and not the regular motionpath. On initially looking at the markup, I thought just the motionPath was still getting animated and it made no sense to me, this does though.

  • Like 2
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.