Jump to content
Search Community

Drawsvg on my pen - what am I missing?

ErwinHeiser test
Moderator Tag

Recommended Posts

First post here! Just getting started with gsap after attending an svg workshop at the beyond tellerand conference.

Got a test pen up trying out the draw svg plugin but nothing much is happening... anyone have any idea what I'm doing wrong?

I've included the svg file for reference.



See the Pen WNaBBZy by eheiser (@eheiser) on CodePen

Link to comment
Share on other sites

Thank you for the demo.

I removed the drawSVG code and just added a little code to color each of the 5 paths a unique color

See the Pen ExdBrYO by snorkltv (@snorkltv) on CodePen


It appears the paths have some odd gaps in them. The green path is part of the ear on the boy and then it's also most of the girl but her arm has multiple paths (blue and yellow).


I'm not sure if this makes it somehow impossible for drawSVG to calculate stroke lengths and such, but my general advice is to start with much simpler paths. Draw them one at a time and test with DrawSVG often.


DrawSVG handles multiple, continuous paths just fine.

I don't think there was any problem with your actual code.



  • Like 3
Link to comment
Share on other sites

Hi @ErwinHeiser welcome to the forum!


I wanted to jump on on top of @Carl's feedback with the following pen. DrawSVG can animate strokes, and your current paths don't have strokes only a fill color.


As you can see below all your paths have two strokes around the path. If you want to animate something like this you have to redraw them with without a path and only one line with something like the pen or pencil tool from Illustrator, than I think it will look like you want it to. Oh and I also have removed pathLength="1" from the svg, never seen it before and don't know what it is doing and with it looked like it wasn't working. Hoop dat het helpt en veel geluk!


See the Pen oNarmbv?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

  • Like 5
Link to comment
Share on other sites

Also hi @ErwinHeiser! Lovely to see workshop people popping in to the forums 💜


FYI,  pathLength="1" is only needed if you're animating with CSS. (from the workshop docs) It's a bit of a hack to get around the complicated lengths you have to deal with without GSAP helping you out!


  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...