Need help with SVG Animation

[phfilly]

Hi,

So I have this so far https://codepen.io/phfilly/pen/gXbmmO?editors=1100 but I’m lacking a bit of knowledge on the SVG animation side of things. I would like to animate the fill colour instead (which i commented out to show the animation i’m after) and not necessarily the stroke-dash.

From my findings and research it seems that this can only be achieved by using a clipPath or is there an easier way around it? I’m not sure what attributes to use as the clipPath.

Any help or guidelines will be greatly appreciated.

[Paulie_D]

Animate the fill how?

I suspect you’re making a rod for your own back here.

I’m not even sure clip-path will help depending on the effect you are actually after…and even then if would be a shipload of JS, I suspect.

[phfilly]

I want to know if I could animate the fill. As per codepen in die original post, i want to animate the “fill” similar to that effect happening on the outline of the logo.

Is something like this possible?

[Paulie_D]

All you have done is repeat the request and trying to parse what you are after isn’t the simplest.

What I think you are asking to to draw the logo using the fill and not the stroke…right?

I’m not sure what that would look like but one option might be to define the single path and use the same existing technique but use a very wide stroke.

[Author]

Posts