logo vmapp.org

 query : 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.

10.01% popularity Vote Up Vote Down


Report

1 Comments

Sorted by latest first Latest Oldest Best

@Carla748

@Carla748

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.

10% popularity Vote Up Vote Down


Report

Back to top | Use Dark Theme