Animated signature with strokeDasharray

[Lars Ejaas]

Hi everybody

 

I just wanted to share how you can animate an SVG signature with a clipping path.

 

I took me some time to get it right, and didn't really find a good guide to this - so thought I would share it.

 

Browser support will probably be better using the DRAWsvg plugin. But if you want to do it without the plugin - this is the way to do it:

 

 

ONE IMPORTANT NOTE! It is very crucial that you make sure that the inline SVG DOES not contain any STROKE-dasharray or  STROKE-dashoffset data under "style" for the clipping path: Otherwise the animation won't work! just manually delete the data under <STYLE>

 

See the Pen mdbobdj by lars-ejaas (@lars-ejaas) on CodePen

[mikel]

Hey @Lars Ejaas,

 

Good work. Here's another note about SVG:
You can use SVGOMG to clean your svg data.

 

See the Pen XWrLYNL by mikeK (@mikeK) on CodePen

 

Happy clipping ...

Mikel

[Lars Ejaas]

Thanks Mikel!

elegantseagulls was so kind to introduce me to the SVGOMG tool already.

But I must admit that my Pen was made kind of fast to show the JavaScript. I am still working on my first GSAP animation - where this technique is implemented. Maybe I should even share the final result when I am done ?