Handwriting Effect with DrawSVG

[juliebam]

Hi!

I am working on an SVG handwriting effect. I've got it to work but I can't figure out how to make it not show the "crossing" points of the letters as shown in the codepen. 

Also, I need the final SVG animation to have a gradient such as in the image below but can't figure out how to change the color of the stroke which is currently black to a gradient.

Hope my questions make sense. 

Thanks!

See the Pen KKVBYLq by juliebam (@juliebam) on CodePen

[ZachSaucier]

Hey Julie and welcome to the GreenSock forums!

 

7 minutes ago, juliebam said:

can't figure out how to make it not show the "crossing" points of the letters as shown in the codepen. 

@PointC has made a great in depth tutorial on making this effect. It's not a trivial task with complex fonts like you have. The MotionTricks website has a lot of other great content as well to learn from.

 

8 minutes ago, juliebam said:

I need the final SVG animation to have a gradient such as in the image below but can't figure out how to change the color of the stroke which is currently black. 

In SVG you create gradients then can use them as the fill as shown in this MDN page.

 

The steps you'll have to take are: 

1. Create the path that you want (of the text) and apply the gradient.
2. Create a mask that covers the text as exactly as possible. It's difficult with varying width stroke. You'll likely have to do a lot of tweaking by hand.
3. Animate the mask to "draw" the text.

Perhaps Craig can give you some additional pointers  

 

Side note: We highly recommend using the GSAP 3 formatting. It's sleeker and you get to us some new features of GSAP 3 like defaults! For more info:

 

[PointC]

Yeah, I usually choose a font with a nice consistent width throughout the animation. That's much easier.

 

About the only way I've been able to make varying width strokes work well is using multiple masks. That's the only way I could figure out how to not show the undesired crossing points. How many masks you need will depend on the font and at how many points it crosses itself. Sequencing the masks to play with GSAP and DrawSVG is super easy. You just need to decide if all the extra vector work is worth it for a specific font.

 

I wish I had a magic solution, but as with many things involving SVG animation, it all comes down to artwork prep.

 

Happy tweening.

 

[akapowl]

Hey @juliebam

 

Can't tell you anything new on that topic that wasn't already stated above, but I have just recently tried to get this working for myself.

So I thought, I'd share my pen anyways, maybe you see something, that might help:

 

See the Pen 184a8048eb288057e35373a348926421 by akapowl (@akapowl) on CodePen

 

I have been using masks for every single letter, so I could adjust the stroke width for every single one of those masks if I wanted to.

In the end it really comes down to how much effort you wanna put in when creating the SVGs and especially the masks in your SVG editor.

 

For me it was just too much effort to get the masks the exact right way, as you might notice on the intersection of the letter "o".

But I think, when you play the animation at a speed, where it comes close to immitating real hand-writing, one might not really notice it anyway - at least it doesn't bother me this way.

 

 

[PointC]

Nice work @akapowl 

 

Thanks for sharing.