ValerioFluo
KPCKevin Powell - Community
โขCreated by ValerioFluo on 2/9/2025 in #front-end
[SVG] why my stroke-dashoffset based animation doesn't seem to push my dots?
thank you both for your help!
19 replies
KPCKevin Powell - Community
โขCreated by ValerioFluo on 2/9/2025 in #front-end
[SVG] why my stroke-dashoffset based animation doesn't seem to push my dots?
Yes that works ! Thank you!
So just to be sure, was the problem in the fact that my path was discribing the outline of my curve in the first place?
So everytime I design a curve with affinity design I will have to cut half the path in the svg's code?
19 replies
KPCKevin Powell - Community
โขCreated by ValerioFluo on 2/9/2025 in #front-end
[SVG] why my stroke-dashoffset based animation doesn't seem to push my dots?
here is the lightened codepen: https://codepen.io/valerio-fluo/full/ogNvapz
19 replies
KPCKevin Powell - Community
โขCreated by ValerioFluo on 2/9/2025 in #front-end
[SVG] why my stroke-dashoffset based animation doesn't seem to push my dots?
So I've been playing with the svg and it appears that, this not the space between the dashes that changes, in fact, it's like it considers my path not as a line, but as a shape with "up stroke" and "bottom stroke".
So what we see, that looks like a changing of space between dashes is in fact "up stroke" and "bottom stroke" that are exactly on the same y axes level, "up stroke" going to the right and "bottom stroke" going to the left, simultaneously, as they are on the same level we got the impression that dashes are just decreasing and increasing their space between but it's not.
So my question is (it's the last I promess ๐
): please how could I modify this "dotted-line" element, to be made of just one stroke like the one on the video, not an up one and bottom one?
PS: I have modified my codepen, so you can see what I'm talking about
19 replies
KPCKevin Powell - Community
โขCreated by ValerioFluo on 2/9/2025 in #front-end
[SVG] why my stroke-dashoffset based animation doesn't seem to push my dots?
thank you very much for this solution.
But how would you do all that?
Using transform property in CSS?
19 replies
KPCKevin Powell - Community
โขCreated by ValerioFluo on 2/9/2025 in #front-end
[SVG] why my stroke-dashoffset based animation doesn't seem to push my dots?
Yes I've already read this but maybe I'm missing something (English isn't my mother tongue) but when I translate this in french, it says that stroke-dashoffset is shifting the dot from its initial position.
So I'm wandering why is it doing this in two different ways in my case?
19 replies
KPCKevin Powell - Community
โขCreated by ValerioFluo on 2/9/2025 in #front-end
[SVG] why my stroke-dashoffset based animation doesn't seem to push my dots?
Yes sorry, that's why I had written the line number of the element ^^
19 replies
KPCKevin Powell - Community
โขCreated by ValerioFluo on 9/24/2024 in #front-end
Why my letters' stroke animation doesn't fill completely?
I know... I know... ๐
27 replies
KPCKevin Powell - Community
โขCreated by ValerioFluo on 9/24/2024 in #front-end
Why my letters' stroke animation doesn't fill completely?
Wow thank you so much @แผฯฯฯ for the crystal clear explanation, thanks to you now I perfectly understand why, and @Chris for the solution.
27 replies