Draw SVG - Path to stroke problems

[smallio]

Ello guys,

 

Trying to do something like this with Draw SVG. I've watched the tutorial and seen that everything needs to be a stroke which is why I'm guessing that's why this isn't working?  How can I convert these letters to strokes while keeping the same shape and thickness? I've tried adding strokes via css/tl.set which works but they are on the outside. I want each letter to be their own stroke if that's possible.

 

Starting with the first letter "S" I'm trying to draw it out from top to bottom.

 

What's the best way to achieve this kind of style?

 

Top pen is what I'm trying to do, the bottom is my current pen I'm practicing on.

 

Thanks,

Smallio

 

See the Pen oZNYXB?editors=0010 by juliangarnier (@juliangarnier) on CodePen

 

See the Pen ZrzWwd by smallio (@smallio) on CodePen

[mikel]

 

Hi @smallio,

Exactly right, drawSVG only works with strokes. But "writing a special font with strokes" is almost impossible.

@PointC has some examples in the forum that cover this topic.
I quickly found this. The trick: "use drawSVG to animate the mask and reveal the logo" or a letter.

That is still complicated for all letters ...

 

See the Pen XexgJM by PointC (@PointC) on CodePen

 

Happy masking

Mikel

 

 

[Visual-Q]

I would say mikel is right.

 

Your problem is that fonts are outlines of the outer shape and therefore that's where the stroke is placed. Redrawing those fonts as single line strokes even if it's possible would require substantial vector drawing skills. Even this would only work it the fonts are absolutely consistent in their thickness and could be represented as a single stroke. We can see in the "a' right from the start in 'social' that it is not.

 

It might be possible to create a mask from the outer shapes of the fonts and then create  paths that roughy follow the center line of the those shapes with strokes that are large enough to fill them  and animate the paths  inside the mask. This would not require the precision of perfectly redrawing the fonts themselves, as long as long as you're reasonably close it should work.  You'd probably have to set these up in illustrator unless you're a genius at plotting path points.

 

This is sort of what is done in the anime post except that they created an outline object of the stroke letters that lines up with the stroke objects so they don't need a mask for inner stroke and outer stoke animations to line up.

[smallio]

@mikel @Visual-Q

 

Thank you both for the detailed answers! 

 

Very similar to what I've done in the past with after effects! I'm going to give this a try once I have a bit more free time. I'll let you guys know how I get on.

 

Quote

This is sort of what is done in the anime post except that they created an outline object of the stroke letters that lines up with the stroke objects so they don't need a mask for inner stroke and outer stoke animations to line up.

 

 

 

@Visual-Q Outline object? This method sounds like what I want to do, as you can then animate the stroke, however I'm not sure I understand what you mean. How would I go about doing this?

 

Cheers,

Smallio

 

[PointC]

Hi @smallio

 

If it were my project, I’d probably use masks as @mikel suggested. That route will most likely give you the least number of headaches.

That being said, you can recreate fonts with consistent stroke widths. Here’s a quick example of the word ‘social’ from your demo.

 

See the Pen yvBGwP by PointC (@PointC) on CodePen

 

You can see that the ‘s’ and the ‘a’ aren’t exact matches, but they’re close.

 

The problem with the ‘s’ is the tight turns. When you have a closed path, you can easily make the curves, but now we have an open path with a stroke running down the middle. The turns look less smooth as the stroke gets wider. The ‘a’ has a variable width stroke on the curved portion which won’t work so I just made it consistent all the way around.

 

When you have projects like this, you can usually make it work by recreating the font, but you may have to make some artistic choices that will make the font appear slightly different than the original. If you’re using AI, the pencil and/or curvature tools are great for this type of work.

 

I wrote some posts on CodePen about recreating fonts and the handwriting effect. You may find some useful info in them.

 

https://codepen.io/PointC/post/animated-handwriting-effect-part-1

https://codepen.io/PointC/post/animated-handwriting-effect-part-2

 

Here’s the final demo from those posts.

 

See the Pen MpLVvO by PointC (@PointC) on CodePen

 

Hopefully that helps. Happy tweening.

 

[smallio]

19 minutes ago, PointC said:

Hi @smallio

 

If it were my project, I’d probably use masks as @mikel suggested. That route will most likely give you the least number of headaches.

That being said, you can recreate fonts with consistent stroke widths. Here’s a quick example of the word ‘social’ from your demo.

 

See the Pen yvBGwP by PointC (@PointC) on CodePen

 

You can see that the ‘s’ and the ‘a’ aren’t exact matches, but they’re close.

 

The problem with the ‘s’ is the tight turns. When you have a closed path, you can easily make the curves, but now we have an open path with a stroke running down the middle. The turns look less smooth as the stroke gets wider. The ‘a’ has a variable width stroke on the curved portion which won’t work so I just made it consistent all the way around.

 

When you have projects like this, you can usually make it work by recreating the font, but you may have to make some artistic choices that will make the font appear slightly different than the original. If you’re using AI, the pencil and/or curvature tools are great for this type of work.

 

I wrote some posts on CodePen about recreating fonts and the handwriting effect. You may find some useful info in them.

 

https://codepen.io/PointC/post/animated-handwriting-effect-part-1

https://codepen.io/PointC/post/animated-handwriting-effect-part-2

 

Here’s the final demo from those posts.

 

See the Pen MpLVvO by PointC (@PointC) on CodePen

 

Hopefully that helps. Happy tweening.

 

 

Oh my lord, you guys are way too kind. This forum is honestly the best I've ever been on! Can't wait to be good enough to give back  This example rocks man.

 

I've just read your guides. Very informative, although I'm still struggling with why variable width strokes won't work. Could you shed some light on that? I'd love to be able to make the tight turns on the S & A even if it means spending hours in illustrator aha.

 

If you still have it I'd love to see the project file so I can see how you've layered everything including the strokes, then I can compare it to your example and figure out what the different strokes look like and how I can recreate this for myself.

 

Once again, thank you SO much,

Smallio

 

[Visual-Q]

Quote

This is sort of what is done in the anime post except that they created an outline object of the stroke letters that lines up with the stroke objects so they don't need a mask for inner stroke and outer stoke animations to line up.

 

 

Sorry this was probably confusing.

 

Same as point c just did in this pen, one set of objects that are the stroked solid path, they look like filled text but they're not they just have big strokes.

 

Then another set of objects which are an outline of the originals for the hollow text. Illustrators outline path will create these for you.

 

 

 

 

 

 

[PointC]

Currently you can only have a single width on a SVG stroke. Variable widths may be coming in the SVG 2.0 (or later) spec, but for now you're stuck with a single width. You can create an open path in AI with a variable width stroke using the width tool, but as soon as you export it to SVG you'll get a closed path. Here's an example of an open path with a 10px stroke and a variable width stroke (which is actually a closed path) being revealed with a mask.

 

See the Pen JpPzvN by PointC (@PointC) on CodePen

 

You can certainly attempt to add points and pull Bezier handles around for hours, but even the most perfect open path curve will eventually overlap itself if you make the stroke too wide. Here's an open curve with three stroke-width versions (2, 24, and 48).

 

See the Pen ddbrKZ by PointC (@PointC) on CodePen

 

You can see the first one is a nice curve, but as that stroke gets wider, it gets really ugly. As I mentioned,  you can add points and adjust handles but accurately matching an existing font with an open path can be tricky. Choose your font wisely.  Of course, you can always just use a mask for the reveal too. 

 

Hopefully that helps. Happy tweening.

 

[yaroslav.rodionov]

Actually, we managed to create a script that makes a full handwriting animation of several fonts and on our way to animate full LaTex fonts  for math education. Have a look. Is is that hat you are looking for?

https://www.youtube.com/watch?v=uvL-ZqG5aVo