4

I've had some background mostly in pixel-based graphics and web design. However, I've never came across SVGs. A Google search for this problem convinced me that the answer might be to use SVG for the first time!

What I'm trying to do is to create an animation from the drawing of text. So far, I found this and it looks pretty good, but the animated path is just a line, not text.

Is it even possible to create svg paths for text?

Can svg text be animated?

Are there any other ideas or approaches to this?

2

The reason why a good library for animating text characters themselves does not exist is because all fonts are different. Making a general, programmatic approach to compensate for all fonts is approaching the realm of impossible.

In order for something like this to exist, the library would have to analyze each and every character of the given font, calculate when to change stroke width, calculate the stroke direction (likely breaking each character into multiple smaller lines to simulate natural writing), then recreate the character in SVG or Canvas so that it can be animated piece by piece. There are likely several other things that I'm missing out, but the point is that it's definitely not easy to make generic.

Therefore, we are left with two ways of doing what you want, neither are dynamically editable. The first is to use a video (or gif) of the text being written, which is fairly difficult to create for non-handwritten fonts.

The second is to use the line approach that you linked to in the question, by turning the text into a path (which can be done in an editor like InkScape or Illustrator). Once that is done, the same exact approach can be used as in the tutorial you linked. You can also animate the SVG lines in different ways by using a plugin like this one.

If you are looking to have an animation of the text being typed, you can use this approach. There is likely some library to do it more naturally, but I haven't searched hard for one yet.

0

you can view this plugin :

http://www.pixel-conception.com/font_anim/

It do exactly that you want.

You can choose your font, define color, background, gradient, etc.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.