Jump to content
Search Community

Animated handwriting effect with complicated font (multiple masks and open paths)

DW92 test
Moderator Tag

Go to solution Solved by PointC,

Recommended Posts

Hi!

 

I have an svg with pretty complidated font

1384480421_Screenshot2023-02-19at16_13_49.png.8999c931866640db258bfb904e4ce89a.png

 

I would like to make an animation, that imitated handwriting effect.

i've encountered this topic:


And as far as I can see there are two ways of doing it - one mentioned is - doing it with multiple masks on svg, and the other one is with open paths method (so I guess I'm gonna need Adobe Illustrator knowledge to do it).

Can you please explain it to me - how the multiple masks method works? Can you share some tutorials on this topic?

Is it even possible to do it with a font like that?

PS. Font name is "Manila" btw.

 

Thanks!

Link to comment
Share on other sites

  • Solution
1 hour ago, DW92 said:

Is it even possible to do it with a font like that?

Anything is possible. Some fonts will require much more work and several masks to complete the effect. Whether that's worth all the extra time... 🤷‍♂️

 

I have a tutorial here:

https://www.motiontricks.com/svg-calligraphy-handwriting-animation/

 

See the Pen ba382ee79baa22bfd47028edd4e9247e by PointC (@PointC) on CodePen

 

Hopefully that helps. Happy tweening.

:)

  • Like 1
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.
×
×
  • Create New...