How to export an SVG with an empty path

[GreenGiant]

Hi. I'm new to graphics in general and Adobe Illustrator so please bear with me. I've been pulling my hair out for 3 evenings on this now desperately Googling round and I'm sure it's something simple I'm not grasping.

 

I've used the brush tool to create a random line in Illustrator, exported it as an SVG to grab the code, and used it in a DrawSVG animation. The problem is that GSAP is animating a stroke that goes all the way around the shape - i.e. it goes down one edge, and then back down the other again as you scroll. I don't have a codepen for this, but you can see an identical example in the 4th comment down on the link below, with the red border going around the yellow arrow.

 

 

In the many hours of Googling I've seen a term mentioned called an 'Open Path' (e.g. in the link above, OR the top comment on the link below mentions an 'open wavy path').

 

I know this isn't strictly a GSAP question, but could anyone please explain (as simply as possible to a newb like me) how I can create and export something in Illustrator in a way that will animate properly with DrawSVG?

 

Many thanks

[PointC]

Hi @GreenGiant 

 

Welcome to the forum.

 

Yep - the brush tool is gonna kick out a filled path. Not what you want here. You'd want to use the pen tool to make an open path with a stroke. You can also use the curvature too or maybe the pencil.

 

You can reveal your filled path with a mask (made with the brush) but that will require an open path with a stroke to do so with the DrawSVG plugin so you may as well make the main path with one of the tools I mentioned.

 

Does that make sense?

 

Happy tweening and welcome aboard.

[GreenGiant]

Hi Craig,

 

Thank you so much for the prompt response.

 

I understand about using the pen tool but I'm not quite following your second paragraph about revealing the filled path with a mask

 

However, I'm going to follow your advice and give it a go now with the simpler pen tool now and will let you know how I get on (determined not to let this stretch into a 4th night!).

[PointC]

3 minutes ago, GreenGiant said:

I understand about using the pen tool but I'm not quite following your second paragraph about revealing the filled path with a mask

Sorry -  probably shouldn't be talking about masks at this point since you're just getting started. Basically, you'd reveal a filled path with an open path with a stroke, but we'll cover that more as you get going.

 

Feel free to post your results with a CodePen and I'll be happy to help. Don't worry about struggling a bit with everything right now. We all start at the beginning.

 

Happy tweening.

 

[GreenGiant]

Thank you so much for the advice, it worked!!!! I've included a codepen of what I've done, does it look like the way you'd do it? (This is part of a timeline I'm building but I've stripped it down to a simple gsap.from command for this example): 

See the Pen ZEvyNbE by GreenGiant88 (@GreenGiant88) on CodePen

 

I've not used the pen tool before - if I was looking to create a line with straight edges (e.g. an 'L' shape) can the pen tool do this?

[PointC]

Yep - that looks good.

 

The pen tool can make straight lines too. Just Click at each point without dragging and you'll create a corner anchor rather than a smooth anchor.

 

Have fun. 

 

[GreenGiant]

Brilliant, thanks again for the help, I can go to bed now!

[PointC]

Happy to help. Let us know if you have any additional GSAP questions. 

 

For more SVG tutorials (& a bunch of GSAP too), check out my site:

https://www.motiontricks.com/

[GreenSock]

Definitely check out Craig's site, motiontricks.com. It's full of fantastic information, tutorials, etc. 👍

[GreenGiant]

Thank you both, I shall definitely check it out as I continue with this project.