Fill Path instead of stroke path
kpomservices opened this issue · comments
Currently we get the stroke path for the font, is there is any way to get the fill path data?
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.
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?
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.
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.
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.
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.
Thanks @danmarshall i will check with your inputs and update whether i can solve it.
@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?
Check out this article: https://css-tricks.com/how-to-get-handwriting-animation-with-irregular-svg-strokes/
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
@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
Ok Thx.
I tried with single stoke font, but its also showing multiple strokes after getting converted
I will check centerline-labeling technique.
Closing this for now, since this library does not provide this functionality. Thanks for bringing it to discussion.