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?
Hi everybody!
I am currently learning how to animate some svg elements with css and keyframes.
So I'm trying to recreate the animation here: https://youtu.be/vqXLGX0szIQ?si=u0uawtQtUnxRmI7-&t=10737
I've remade the svg used on the exercise, using Affinity Designer (I'm saying this because, maybe it's what causes my issue, I don't know).
And so following instructions I've coded this: https://codepen.io/valerio-fluo/pen/zxYOKxj
The code of my svg is a bit long so I will give you the key lines:
• in the HTML part:
► line 61: is the path of my dotted-line I would like to animate
• in CSS part:
► line 251: is the styling of my dotted-line element
► line 260: is my "dash" animation
My issue is that, with my code, unlike in the video, my dots seem to reduce de space between them in my animation, which is weird regarding the "dash-array" property I've set.
When I play with dash-array values, it seem that in fact there is some dots that go to the left meanwhile others to the right.
I don't understand why it does that.
I guess it's because of the path of my dotted-line, since the svg is the only thing that differs from the code used in that video, but I have no idea of how to edit this in the good way.
Could a good soul please, explain this to me, and how to fix it? That would be much appreciated.
19 replies
KPCKevin Powell - Community
•Created by ValerioFluo on 9/24/2024 in #front-end
Why my letters' stroke animation doesn't fill completely?
27 replies