: How to create an SVG path reveal animation in Illustrator Handwriting: SVG animation CodePen Ex: 1 Handwriting: SVG animation CodePen Ex: 2 I'm trying to learn how the above "handwriting" effect

@Carla748

Posted in: #AdobeIllustrator #Css #Mask #Path #Svg

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.

Vote Up Vote Down

Login to post a comment!