1

Handwriting: SVG animation CodePen Ex: 1

Handwriting: SVG animation CodePen Ex: 2

I'm trying to learn how the above "handwriting" effect was achieved using SVG paths and CSS. I've been looking at the HTML and I also imported it into Illustrator to attempt to figure out what is happening. I'm new to Illustrator and my goal is to recreate this in Illustrator using another font.

My understanding thus far: the text, paths, and outlines were created. Then something called a clip-path was drawn through the entirety of the text. Something to do with masks? When you animate the stroke of the clip path it fills in all the spaces of the text.

How do you create this effect in Illustrator? Do I just create a normal path first with the pen tool and then convert it? Also, how would you organize the layers?

Edit: Lots of examples of SVG text animation on the web are animating the outline strokes of a font. Here the only thing being animated is a stroke that travels through an object ands fills in the spaces as it moves forwards in a linear animation.

Improve this question
4
  • Possible duplicate of Animate Drawing of SVG Text
    – Luciano
    Jun 30, 2017 at 15:33
  • @Luciano That's not a good duplicate candidate. Joel is asking for how to set it up by hand in Illustrator while that question asks for a generic way to do it
    – Zach Saucier
    Jun 30, 2017 at 15:35
  • @ZachSaucier true. Retracted.
    – Luciano
    Jun 30, 2017 at 15:37
  • 2
    There is a specific thing that is happening in that animation that I am asking about. It has to do with a 'clip path' or 'masking path'. None of those questions is asking that. I'm also not looking for any outside tools to accomplish it. I just want to know how to create the clip path in illustrator.
    – Joel Hoelting
    Jun 30, 2017 at 15:38

1 Answer 1

Reset to default
0

Solved...

Step 1: Make an object, text, square, circle, etc. If it's text make sure to convert to outline.

Step 2: On a layer below the object, draw a stroke.

Step 3: Highlight object and stroke, make sure object is layer above. Go to object, clipping path and then make. You should now be able to fill in the object with the stroke.

Step 4: Animate the stroke.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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