Fill Path instead of stroke path about google-font-to-svg-path HOT 13 CLOSED

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.

from google-font-to-svg-path.

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?

from google-font-to-svg-path.

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.

from google-font-to-svg-path.

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.

from google-font-to-svg-path.

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.

from google-font-to-svg-path.

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.

from google-font-to-svg-path.

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

from google-font-to-svg-path.

@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?

from google-font-to-svg-path.

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

from google-font-to-svg-path.

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

from google-font-to-svg-path.

@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

from google-font-to-svg-path.

Ok Thx.

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

I will check centerline-labeling technique.

from google-font-to-svg-path.

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

from google-font-to-svg-path.