1

I'm trying to replicate this SVG animation: Codepen-original but with my SVG logo. Here is the same codepen with my SVG logo: Codepen-with-my-SVG.

I'm new to dealing SVG's and started learning and using Inkscape.

Two concepts are really confusing me right now, In this Post it is mentioned that you need to use two properties to animate an SVG path: stroke-dasharray & stroke-dashoffset.

But what i want to achieve is the same kind of animation as shown in the codepen however i want my logo to fill with its original color which includes some gradients, so i don't know how the strokes come into play with what i want to do and how i should alter my SVG logo in Inkscape.

I know you guy's have to take your time to look at the codepens i provided to understand what i want to do, so i appreciate your time in advance and really appreciate any help for me to understand how this is supposed to be done.

  • Would this Inkscape extension be helpful: gitlab.com/Moini/ink_line_animator ? – Moini Jun 1 at 23:24
  • Ah, sorry. For animating fills, the dashoffset will not help at all. Try to use a moving mask, or a moving clip, or opacity, for putting the fill in. – Moini Jun 1 at 23:25
  • Thanks for your input @Moini, I will look into -Moving clips- and see what i can do, still trying to figure this out, I'm sure it's actually something very simple but only if you know it :). Basically i just want the logo to fill in from bottom-up or random points from nothing. – Ikai Yanasaki Jun 2 at 0:43
  • @Moini From what i have gathered so far, I'm assuming that i can use something like a moving mask or clip to replicate the effect but i think i have to create separate masks/clips to expose different parts/objects of my logo? – Ikai Yanasaki Jun 2 at 12:21
  • 1
    Thanks for your help @Moini I actually ended up going for a morph animation which is much nicer than what i had in mind, it was just too complicated to figure out at the moment. – Ikai Yanasaki Jun 5 at 2:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.