I applied the animation-delay technique, but to achieve a the handwriting effect animation, I had to cut the object wherever it intersects, and drew a path and converted it to a clipping mask, e.g. letter "W" divided into 4 parts and drew different paths for different part for the said above, and animating it, to give a clean handwriting effect, giving path a stroke width, It took me a lot more time as the font was too complicated.
Currently I am achieving the said animation using animation-delay, CSS function.
CSS Code
#W2-Path {
animation-delay: .5s
}
#W3-Path {
animation-delay: 1s
}
#W4-Path {
animation-delay: 1.5s
}
#O-Path {
animation-delay: 2s
}
#R1-Path-2 {
animation-delay: 3.5s
}
#R2-Path-2 {
animation-delay: 4s
}
#R3-Path-2 {
animation-delay: 4.5s
}
#L1-Path-2 {
animation-delay: 5s
}
#L2-Path-2 {
animation-delay: 5.5s
}
#L3-Path-2 {
animation-delay: 6s
}
#D1-Path {
animation-delay: 6.5s
}
#D2-Path {
animation-delay: 7s
}
I was thinking if there is any other way through which I can start the 2nd animation as the 1st animation completes, and it just keeps going on giving the animation more smoother effect and perfect timing, implementing JQuery?
CodePen: https://codepen.io/ToxifiedM/pen/MWKeERr
Original Question: How Can I Make SVG Text Animation Seamless And Accurate?
Linked Question 1: To Control SVG CSS Based Animation Using Jquery?
Linked Question 2: To Control The Speed Of Multiple SVG Elements Using Jquery?
See Question&Answers more detail:os