JSFiddle: https://jsfiddle.net/piper/96gg5tfc/1/

The idea here is to have one letter line-animate itself, then fade-in a fill with a background image. Then the next letter does the same with a different background image.

Also, how can I avoid the awkward line joins as circled and arrowed in the linked screen cap?



Any help is welcome. I'm kind of new to SVG and am experimenting.

Haven't taken a closer look at yours, but here's another example I know of: https://inkscape.org/en/~jabiertxof/%E2 ... er-logo-in

.path {
stroke-linecap:square;
}
?

v1ince's stroke-linecap response led me to

http://apike.ca/prog_svg_line_cap_join.html

which is going to help a lot.

Thank you.

Moini wrote:Haven't taken a closer look at yours, but here's another example I know of: https://inkscape.org/en/~jabiertxof/%E2 ... er-logo-in

Thank you. I'm having "fun" trying to wrap my head around SVG line animation. I have a feeling that the slow fade-in image background is going to be even more funner.

I think there are some dashoffsets in my brain though, cause there are gaps in my understanding. Or maybe I'm getting the wrong kind of strokes.