Search code examples
jqueryanimationwebadobe-illustratorvivus

Make a dashed path in Illustrator, each dash it's own path


I'm trying to create a path animation using an svg and a jQuery plugin called Vivus that helps create animated svgs. The problem I'm having is that my path is dashed and since it's only one path, when the script is ran, it connects it in a straight line. I tried creating each dashed line manually but it doesn't look great. My question is, is there a way to make a dashed path and then divide each dashed line into its own path? Or what other way can I achieve this?

Here's the kind of path I'm talking about: Path


Solution

  • Draw a small line segment and drag it into the brushes panel. When it pops up, choose pattern brush. Change the spacing percentage (play with values until something works). Then, go draw a line and set the brush to be the pattern you just made. Now go and choose Object -> Expand Appearance and you'll get little lines instead of shapes.