Hi, first of all, thank you for making this thing. It's amazing.
I don't have an issue, I would just like to ask a few questions about the implementation. I'm trying to modify it, I want to fully understand it first. I hope that's ok.
I'm completely new to SVG, as will become apparent from my questions.
- Why do all the paths except from the first one have two animate elements?
<animate attributeName="stroke-dashoffset" values="17.501" fill="freeze" begin="6f22.click"/>
<animate attributeName="stroke-dashoffset" values="17.501;17.501;0" keyTimes="0;0.874;1" dur="1.391s" fill="freeze" begin="0s;6f22.click"/>
I understand what the second animate does, but what about the first one? Why do you explicitly skip it on the first path? I tried removing all of them from all the paths of the generated SVG file, and it seemed to behave in the exact same way. So what are they for?
-
Why did you do the stroke timing through keyTimes?
<animate attributeName="stroke-dashoffset" values="17.501;17.501;0" keyTimes="0;0.874;1" dur="1.391s" fill="freeze" begin="0s;6f22.click"/>
It took me a while to figure it out, but from what I understand, all the strokes are set up to start animating at 0 seconds, but the keyTimes are set so that they do nothing, animating the stroke-dashoffset from stroke length to stroke length until all the previous paths have finished animating. Why did you choose this approach? Couldn't you have just set the beginning time of each path to the end time of the previous one?
-
This one's a bit of a mystery to me. I tried to slow down the animation by adding a coefficient to the stroke duration calculation:
< 15d => pathLength * speedCoeficient / 50d,
< 60d => pathLength * speedCoeficient / 100d,
_ => pathLength * speedCoeficient / 133
It works nicely, except when I slowing the animation way down (10x slower), I noticed that the first stroke doesn't start animating until about halfway through its defined duration.
<animate attributeName="stroke-dashoffset" values="62.489;62.489;0" dur="6.108s" fill="freeze" begin="0s;5922.click" />
The first path doesn't have any keyTimes. So what exactly is delaying the animation?
Thank you.
Hi, first of all, thank you for making this thing. It's amazing.
I don't have an issue, I would just like to ask a few questions about the implementation. I'm trying to modify it, I want to fully understand it first. I hope that's ok.
I'm completely new to SVG, as will become apparent from my questions.
I understand what the second animate does, but what about the first one? Why do you explicitly skip it on the first path? I tried removing all of them from all the paths of the generated SVG file, and it seemed to behave in the exact same way. So what are they for?
Why did you do the stroke timing through keyTimes?
<animate attributeName="stroke-dashoffset" values="17.501;17.501;0" keyTimes="0;0.874;1" dur="1.391s" fill="freeze" begin="0s;6f22.click"/>It took me a while to figure it out, but from what I understand, all the strokes are set up to start animating at 0 seconds, but the keyTimes are set so that they do nothing, animating the stroke-dashoffset from stroke length to stroke length until all the previous paths have finished animating. Why did you choose this approach? Couldn't you have just set the beginning time of each path to the end time of the previous one?
This one's a bit of a mystery to me. I tried to slow down the animation by adding a coefficient to the stroke duration calculation:
It works nicely, except when I slowing the animation way down (10x slower), I noticed that the first stroke doesn't start animating until about halfway through its defined duration.
<animate attributeName="stroke-dashoffset" values="62.489;62.489;0" dur="6.108s" fill="freeze" begin="0s;5922.click" />The first path doesn't have any keyTimes. So what exactly is delaying the animation?
Thank you.