Fill Path instead of stroke path

[kpomservices]

Currently we get the stroke path for the font, is there is any way to get the fill path data?

[danmarshall]

Should be easy enough for someone to add 2 color pickers, one for stroke and one for fill. Then an input for stroke width and bevel selector.

[kpomservices]

Sorry i think i did not give more details to my question. I will provide more details, so that you can provide help / guidance for this.

Currently for any font i am getting the stroke path

but what i need is the inner / fill path of the letter

Please suggest how to get the fill path?

[danmarshall]

If you look at the generated svg, there is currently a fill="none" attribute. After you have copied and pasted it, you can change fill to your color. You can also change or remove the stroke color and stroke width attributes.

[kpomservices]

Yes i can change the fill color, but I need the bezier path information of that fill area,

I am trying to animate the bezier path of the letter / text, currently its animating the path of the stroke path. But i need to animate the fill section so that it look like hand-writing animation.

[danmarshall]

In SVG, the stroke and fill path are the same thing. It's just a matter of coloring the path itself (for stroke), or the space between the path enclosure (for fill). I think you might be looking for the "centerline" of the fill area? If so, know that this is a somewhat complex computation, not provided in this library. See https://observablehq.com/@veltman/centerline-labeling for an example of creating a Voronoi diagram to achieve the centerline. Also, you may get into situations where the line is circular as in O or multi-jointed as in X. Even with a centerline, I'm uncertain how to animate filling.

Perhaps you might break the outline path into separate polygons and and animate the fill using attributes? https://stackoverflow.com/questions/55609857/how-to-animate-a-svg-polygon-to-fill https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animate

If so, there's still a computation to break into separate polygons.

[danmarshall]

Here's an example which might be the type you're looking for? https://codepen.io/munkholm/pen/EaZJQE

I'm not sure the technique they used.

[kpomservices]

Thanks @danmarshall i will check with your inputs and update whether i can solve it.

[kpomservices]

@danmarshall, I tried to find the way to get the filled path using paper js / maker js libraries but could not find a solution for this.Please let me know if you can provide or help by providing more direction for this?

[danmarshall]

Check out this article: https://css-tricks.com/how-to-get-handwriting-animation-with-irregular-svg-strokes/

[kpomservices]

Thx @danmarshall, in this approach they create the paths / mask manually, i want someway to do these steps dynamically.

There are some single line / single stroke fonts which i am trying to use for this https://www.quantumenterprises.co.uk/handwriting-fonts/single-line-handwriting-fonts-explanation.htm

[danmarshall]

@kpomservices - yes the article uses a manual method. Automating it is the harder issue. Again, I suggest looking at Noah's technique to find the "spine" of a shape https://observablehq.com/@veltman/centerline-labeling

[kpomservices]

Ok Thx.

I tried with single stoke font, but its also showing multiple strokes after getting converted

I will check centerline-labeling technique.

[danmarshall]

Closing this for now, since this library does not provide this functionality. Thanks for bringing it to discussion.