Why my letters' stroke animation doesn't fill completely?
Hi everybody,
I just start learning to use svg and how to create some animations with them.
So I'm trying here: https://codepen.io/valerio-fluo/pen/gONZmJm , to animate some text. This is an attempt to recreate an handwriting feel. Since I see that the only thing we can near that is to animate strokes, I'm using very thick strokes so they cover the filling of the letters (Sorry if it's not very clear, english isn't my mother's tongue).
But as you can see, the strokes don't write themselves completely.
Could someone please explain to me why it does so? Thank you.
14 Replies
it does
this is what's happening
you have a line that's widened by a stroke
but it is always a straight line
it starts straight, ends straight
and there is always going to be a corner that won't be filled, because the storke ends when it hits the beginning point
(at any angle)
the yellow is where both strokes intersect and over-draw on eachother
(because red + green = yellow)
Try adding
stroke-linecap: square;or even round
but square might do the trick
it does the trick ... mostly
it's actually almost perfect
You can also play around with the
stroke-linejoin to fine-tune it.i will say it is "the best effort you can do"
but good catch on stroke-linecap
it looks a tiny bit funky when it's starting
and the O doesn't look 300% rounded
you can see it better here
but, hey, considering the situation, i see this as an absolute win
well done
It might work better with a different font.
yes, times new roman wasn't made for new times
Wow thank you so much @ἔρως for the crystal clear explanation, thanks to you now I perfectly understand why, and @Chris for the solution.
I know... I know... 😅