Animated letter

[RomainVernoux]

No description provided.

[JeremiePat]

Great demo, here are some suggestions to make it awesome.

[JeremiePat]

Hey Romain! Thanks for that nice contribution.

I made a lot of suggestions to improve it. Feel free to dig in and it will become amazing.

[RomainVernoux]

Thanks for the comments! Updated a few things. Not sure if perfect yet.
About the path vs text, actually this sample is taken from an old version of Zenika Labs' website and the letter is from Zenika's logo, not a known font exactly but close, and I find it cool to show that this can be down on any path :)

[JeremiePat]

I find it cool to show that this can be down on any path :)

If the intent is to make a simple demo to highlight the effects of animating the stroke-dashoffset, I would suggest to add the pathLength attribute to the <path> element so that it allows to provide a cleaner value than "81.1px" 😉

<style>
path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
</style>
<path pathLength="1" d="…"/>

[RomainVernoux]

It's not working (a few pixels are not drawn and the path is not closed properly). To make it work with pageLength=1, I need to have

stroke-dasharray: 1.005;
stroke-dashoffset: 1.005;

Any idea why?