Jump to content


Animate SVG tspan texts as handwriting animations

Moderator Tag

Recommended Posts

Hi, I have a SVG text and I'd like to animate it as though someone was writing it. I know it'd be easier with paths elements but I have it as tspans instead.

I have tried using drawSVG but it seems that only works with paths.

Any help is totally  appreciated.


The SVG code:

<g id="Group_80" data-name="Group 80" transform="translate(-649.918 -257.351)">
                <g id="Brand" transform="translate(652.062 329.976)">
                        data-name="Check me out and see"
                        transform="matrix(0.985, -0.174, 0.174, 0.985, 0, 88.908)"
                        fontFamily="Satisfy-Regular, Satisfy"
                        <tspan x="0" y="61" ref={bstext}>
                            Check me{' '}
                        <tspan x="0" y="155">
                            out and{' '}
                        <tspan x="0" y="249">

A screenshot:




Link to comment
Share on other sites

Hey there!  It needs to be paths. DrawSVG animates the stroke of SVG paths and shapes. Not text.

It's not particularly a 'plug and play' effect (certainly not just pointing a plugin at some text). There's a lot of prep that goes into it before you get to coding. But it looks great so it can be worth the effort.

Here's a great article series outlining the steps from @PointC


  • Like 4
Link to comment
Share on other sites

  • 8 months later...

Hi there Diana. I'm not seeing how this post and the previous about transformOrigins are related to animating text spans. The previous post from Adam is out of context and was posted 8 months later (it seems like spam to me.)

If you are in need of help could you elaborate or potentially start a new thread with a minimal demo? Thanks so much!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.