Jump to content
Search Community

DRAW SVG, direction

CarpeDiem test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I am trying to understand how to use DRAW SVG and am having some success.  BUT, for the life of me, I can't figure out why a simple animation of, for example, drawing the letter W, goes from right to left, instead of left to right.  The animation looks great but it is drawing the wrong way.  Does this make sense to anybody?  Can anyone help?

  • Like 1
Link to comment
Share on other sites

Hello Lauren Johnson, and Welcome to the GreenSock Forum!


Do you have any code to post and or have a live code example? This way we can see your code in context to see what you actually are doing.


Here is a nice video tut by GreenSock on how to create a code pen demo example



This way we can better help you by seeing your code in context. Thanks :)

Link to comment
Share on other sites

Like Jonathan said, a demo will really help, but when it comes to SVG it is really important where the first point on the path is.


We may look at a W as humans and assume the first point should be the top left, but a program like illustrator may put it somewhere else.


With DrawSVG you should be able to change the direction by altering the start and end values of your tween

  • Like 1
Link to comment
Share on other sites

We may look at a W as humans and assume the first point should be the top left, but a program like illustrator may put it somewhere else.

Just to expand a bit on Carl's good information here:


A quick tip for reversing path points in Adobe Illustrator.

  1. Open path: select the pen tool and click on the first point of your path and it will reverse the points.
  2. Closed path: right click the path and make it a compound path, choose menu-window-attributes and then use the Reverse Path Direction buttons.

(Note: If the Path Direction buttons are not visible in the attributes panel, click the upper right menu of that panel and choose 'Show All')

  • Like 10
Link to comment
Share on other sites

  • 1 year later...
  • 2 months later...

I downloaded a silhouette of Philadelphia from Freepik and extracted the stroke. Like CarpeDiem, I too needed to go from left to right with my DrawSVG animation but could only seem to animate right to left. I kept looking at the points within the <path> tag and figured that somewhere in that mess lies the solution to my problem.  But who knew that  all I needed was a click of the pen tool on my open path. You did @PointC!!! Thanks for sharing that!!!


If anyone is interested in seeing my riff on the Frasier tv show opening, here it is.


See the Pen XeRQQK by gmw (@gmw) on CodePen


BTW, love GSDevTools! What a timesaver!!

  • Like 2
Link to comment
Share on other sites

  • 8 months later...



You have to draw your path in a counter clock-wise manner.


You can either write the SVG path yourself. Or the drawing software used to create the SVG to edit the current path by reversing it.


In Illustrator is under: "Object > Path > Reverse Path Direction".



Link to comment
Share on other sites

Hi @hyconnect,


SVGs plus GreenSock and code is easy ...


<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />

MorphSVGPlugin.convertToPath("circle, rect, ellipse, line, polygon, polyline");


Happy cycling (?) ...


  • Thanks 1
Link to comment
Share on other sites

Look at the two of you making the poor hyconnect confused...


Mind you, he (she?) said he (she?) wanted to draw counter-clockwise... So, more control is needed over the paths.


17 minutes ago, hyconnect said:

Write a path for a circle?


You can write the SVG code for any shapes you want if you spend the time learning the commands. For simpler shapes is actually better to write the path, more legible. For complex ones, no way, jose. Go use a software that's been designed to do it.


Here's a little example. It's not the most round of circles but it will give you an idea.


See the Pen PadaQM?editors=1100 by dipscom (@dipscom) on CodePen


For more detailed info, look up MDN docs and/or a bit of online searching will yield plenty of results.




  • Like 1
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...