Jump to content

Search In
  • More options...
Find results that contain...
Find results in...
Lars Ejaas

Animated signature with strokeDasharray

Recommended Posts

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>


  • Like 1
  • Thanks 1

Share this post

Link to post
Share on other sites

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


  • Like 1
  • Thanks 1

Share this post

Link to post
Share on other sites

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 😉 

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.