I want to achieve such a web effect.
It’s like the animation effect of the text writing path after text input.
Like this.==>codepen
<svg ...>
<path class="path" stroke="#000000" ... >
</svg>
svg {
stroke-width:17;
width:200px;
height:100px;
transition:transform .5s ease-out;
path {
stroke-dasharray: 1200;
stroke-dashoffset: 1200;
stroke-width:5;
animation:summerbird-s .75s linear forwards .5s;
}
}
And I learned that it is implemented using svg-path and stroke-dashoffset.
Reference documentation1
Reference documentation2
But I still need to convert the font family to svg path. It would be great if there is a better implementation process or a suitable js library to help me.
Hope I can get other thoughts and help.
Thank you very much.