Draw SVG Plugin Not Animating Path (First Time User of Plugin)

[jstafford 23 Likes (Newbie)]

I was using the draw svg plugin and trying to animate the first path (the capital letter P, there are 7 paths, 6 letters and 1 circle around them). I was modeling my first attempt at this after this example, 

See the Pen bdrjjO by GreenSock (@GreenSock) on CodePen

, but something is off on mine and I can't figure out what it is.

See the Pen ZbpBjw by jstafford (@jstafford) on CodePen

[Diaco 1,997 Likes (Superhero)]

Hi jstafford 

 

pls set stroke attribute for your paths : 

See the Pen XmjNvr by MAW (@MAW) on CodePen

[jstafford 23 Likes (Newbie)]

Thanks Diaco. I think the actual effect I was going for was making the letter look like it is being handwritten, not simply outlined with stroke. Are there ways of achieving this with the plugin?

[ohem 334 Likes (Leader)]

It's not DrawSVG, but this explains one way to mask an SVG:  https://medium.com/@gordonnl/stylised-line-animations-ded23320ffe5

 

I also found this on Codepen: 

See the Pen pJoqpZ by lcdsantos (@lcdsantos) on CodePen

 

 

Would love to see how DrawSVG could be used to achieve the same effect!

[jstafford 23 Likes (Newbie)]

this is a nice solution. I could still use drawsvg on the stroke that fills the mask.

[Diaco 1,997 Likes (Superhero)]

you should to use open paths or use a text mask . 

 

pls check this out : 

See the Pen XmjNvr by MAW (@MAW) on CodePen