SVG Line Animation Logo Image Fill

Discuss SVG code, accessible via the XML Editor.
pipingdesigner
Posts: 12
Joined: Sat Nov 12, 2016 11:27 pm

SVG Line Animation Logo Image Fill

Postby pipingdesigner » Fri May 05, 2017 1:25 am

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?

Image

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

Moini
Posts: 3381
Joined: Mon Oct 05, 2015 10:44 am

Re: SVG Line Animation Logo Image Fill

Postby Moini » Fri May 05, 2017 2:12 am

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
Something doesn't work? - Keeping an eye on the status bar can save you a lot of time!

Inkscape FAQ - Learning Resources - Website with tutorials (German and English)

v1nce
Posts: 696
Joined: Wed Jan 13, 2010 4:36 am

Re: SVG Line Animation Logo Image Fill

Postby v1nce » Fri May 05, 2017 3:48 am

.path {
stroke-linecap:square;
}
?

pipingdesigner
Posts: 12
Joined: Sat Nov 12, 2016 11:27 pm

Re: SVG Line Animation Logo Image Fill

Postby pipingdesigner » Fri May 05, 2017 5:25 am

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.

pipingdesigner
Posts: 12
Joined: Sat Nov 12, 2016 11:27 pm

Re: SVG Line Animation Logo Image Fill

Postby pipingdesigner » Fri May 05, 2017 5:35 am

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.

bugs_bunny_hook_stage.jpg
bugs_bunny_hook_stage.jpg (19.98 KiB) Viewed 4506 times


Return to “SVG / XML Code”