You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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?
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.
The text was updated successfully, but these errors were encountered:
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.
The text was updated successfully, but these errors were encountered: