Hey everyone! I'm trying to create an animation that simulates text being handwritten. Basically, if I input a letter, like "b", I want an animation that visualizes it being drawn out as if a person was writing it by hand—first the vertical line, then the circular part. I saw something similar in these kanji animations, but I'm not sure how to achieve that for regular text. I know I might have to figure out how to animate each character, but I'm pretty lost on how to get started. I don't have a strong background in font technologies or animation formats. Any tips or advice on where to begin? I'm open to any programming language too. Thanks for your help!
3 Answers
The challenge you’re facing is that TTF fonts don’t directly provide the information needed to animate letters as they're drawn. Each letter in a TTF consists of curves that define its shape, but there’s no simple way to link these to the strokes a person would use when writing. If you want something like the kanji diagrams, those are typically created by manually drawing out each stroke in a vector graphic program. Fortunately, the KanjiVG project shares some stroke orders for kanji, and it’s a great resource! For Latin letters, there's a project on GitHub called decoupled-style-descriptors, which includes examples of handwritten letters. You can animate these strokes quite easily by manipulating SVG properties like `stroke-dasharray`. This could be a good starting point for your project!
Just to clarify, I was thinking of the same thing—had a hunch I'd need to redraw the letters individually. Appreciate your insights!
I stumbled across a tool called Calligrapher.ai that could be useful for your needs. To approach the animation, I recommend looking for a "single-stroke" SVG font, like the ones linked here. You can then use a Python library like svglib to handle the rendering of the letters. It seems like a Python-oriented project, but it’s definitely dive-worthy if you want something specific. Just a heads-up, SVG fonts can be pretty complex, but once you get a grip on them, you’ll find it’s a feasible path!
Interesting find—thanks for sharing!
If you have the vector paths ready (not just the outlines), using a Bezier curve library can really simplify things. You could break the path into segments and animate them from start to finish. For web platforms, Snap.svg has a method called `getSubpath()` that’s perfect for this, and if you’re working on mobile, Skia has similar capabilities. It's all about slicing the Bezier spline into manageable parts and drawing them in sequence, so it should give a smooth handwritten effect!
That project sounds fascinating, I’ll definitely check it out!