My response is specifically focused on the latter W
I decided to modify the svg code you provided in a more simplified manner.
You were previously using 2 groups to wrap each line, but I have opted for using just the lines directly. Additionally, instead of utilizing
style="clip-path: url(#clip-path)"
, I adjusted it to a presentational attribute format like this:
clip-path="url(#clip-path)". This adjustment allows for setting
animation-delay as an inline style for the lines within JavaScript.
Another enhancement includes applying stroke-dasharray: 8 and stroke-dashoffset: 8 since the length of the lines representing the letter W is 8. The determination of the line lengths was achieved by using the getTotalLength() method.
The stroke and stroke-width properties are now set at the group level, considering that all lines representing the letter share the same styling.
The JavaScript section involves selecting all lines within the group, iterating through them, and establishing the animation-delay:${i*1}s where i represents the index of each line. It's important to note that the order of the lines within the group should be from first to fourth, contrary to the original positioning in your provided code snippet.
let Wls = document.querySelector("#W").querySelectorAll("line");
Wls.forEach((l,i) => {
// For each line in the W group
// Set the style attribute
l.setAttribute("style", `animation-delay:${i*1}s`);
})
body {
background: white;
}
svg {
width: 90vh;
border: solid;
}
#W line {
stroke-dasharray: 8;
stroke-dashoffset: 8;
animation: letter-animation 1s linear forwards;
}
@keyframes letter-animation {
0% {
stroke-dashoffset: 8;
}
100% {
stroke-dashoffset: 0;
}
}
<svg id="WOYP" viewBox="0 0 9 9">
<defs>
<clipPath id="clip-path-44" transform="translate(-5.561 -10.291)">
<path id="W4" d="M11.676,16.41l.234.578c.236-.631.477-1.261.715-1.891q.222-.6.449-1.188t.409-1.063q.181-.476.308-.8c.084-.214.136-.348.156-.4s.05-.12.066-.16a.594.594,0,0,1,.061-.111.754.754,0,0,1,.086-.1.768.768,0,0,1,.151-.11h-1.03c.121.053.192.117.212.19a.481.481,0,0,1-.04.291c0,.007-.025.079-.076.216s-.118.319-.2.546-.18.483-.287.767-.216.573-.323.867Z" />
</clipPath>
<clipPath id="clip-path-45" transform="translate(-5.561 -10.291)">
<path id="W3" d="M11.675,16.358Zm0,0h0l.011.029h0l.232.575c-.152.4-.311.82-.474,1.252L10.176,15.07q-.242-.6-.478-1.183t-.433-1.058q-.2-.474-.333-.793c-.09-.213-.146-.343-.166-.389a1.8,1.8,0,0,0-.176-.27.774.774,0,0,0-.348-.209h1....
UPDATE
The user is seeking additional guidance:
During my implementation attempts, I encountered an issue with the letter "O" since it contains a path rather than a line. I attempted to apply your solution, but it didn't work for paths. Do you have any suggestions on how to address this?
In such cases where paths are involved, they need to be animated differently. Unlike before, there is no requirement for a separate CSS animation, and given that the final value for stroke-dashoffset is 0, another animation isn't necessary either. However, calculating the total length of the path is crucial for determining the values of stroke-dasharray and stroke-dashoffset, which in this instance amounts to 20.4.
let Wls = document.querySelector("#W").querySelectorAll("line");
Wls.forEach((l,i) => {
l.setAttribute("style", `animation-delay:${i*1}s`);
})
body {
background: white;
}
svg {
width: 90vh;
border: solid;
overflow: visible;
}
#W line {
stroke-dasharray: 8;
stroke-dashoffset: 8;
animation: letter-animation 1s linear forwards;
}
#O path {
stroke-dasharray: 20.4;
stroke-dashoffset: 20.4;
animation: letter-animation 1s linear forwards;
animation-delay: 4.5s;
}
@keyframes letter-animation {
100% {
stroke-dashoffset: 0;
}
}
<svg id="WOYP" viewBox="0 0 29 9">
<defs>
<clipPath id="clip-path-44" transform="translate(-5.561 -10.291)">
<path id="W4" d="M11.676,16.41l.234.578c.236-.631.477-1.261.715-1.891q.222-.6.449-1.188t.409-1.063q.181-.476.308-.8c.084-.214.136-.348.156-.4s.05-.12.066-.16a.594.594,0,0,1,.061-.111.754.754,0,0,1,.086-.1.768.768,0,0,1,.151-.11h-1.03c.121.053.192.117.212.19a.481...