[How to export an SVG with an empty path]

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

[How to export an SVG with an empty path]

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

[How to export an SVG with an empty path]

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?

[How to export an SVG with an empty path]

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!).

[How to export an SVG with an empty path]

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