Jump to content
Search Community

DrawSVG - starting from the top center of a rect

Jacob Raccuia test
Moderator Tag

Recommended Posts


I have scoured the forums before posting - I can't seem to change the starting point of the rectangle to start drawing from the top center. I don't understand how the %s work, and when I change them, the lines draw at different speeds.

I would like the rectangle to draw from the top center and go both left and right at the same time / speed.

My Codepen also is acting up - the code is the same as in my project but it doesn't seem like drawsvg is being loaded. I can't tell if that's a me issue or if it's stemming from something else...

Thanks for your help and hopefully i explained my problem adequately enough!

See the Pen PoBebqX by jacob-raccuia (@jacob-raccuia) on CodePen

Link to comment
Share on other sites

Thanks alig and rodrigo!

41 minutes ago, alig01 said:



@PointC has an article about the same issue you are facing and explains very well step by step how to solve the problem. 


I have additionally changed your imported scripts since you mentioned that they are not loading correctly.


Hope this helps.

That solution does work - but it uses a path and not a rect. Would I just need to draw the path with a border radius? I can try and figure that out :)

  • Like 1
Link to comment
Share on other sites

I'd say most of the time, if you want to set funky start positions for rectangles it's probably best / easiest just to use a path as @alig01 suggested.

However, using the width and height you can calculate the top center and bottom center coordinates.


See the Pen wvxjJwP?editors=1010 by snorkltv (@snorkltv) on CodePen


If you add rx attributes to both it will require some tweaking of the numbers, which again would bring us back to a <path> 

  • Like 3
Link to comment
Share on other sites

Thanks @Carl.

I am not very good at svgs and I cannot figure out how to create a path with 100% width and height and also rounded edges.

In an attempt to understand drawsvg more, I do have a few questions.
Can you explain the two percentages used for DrawSVG:X, X? And why do you need to set it first before running it?
Why is the speed some times uneven when moving in both directions?


Link to comment
Share on other sites

i noticed you have "0 0 100% 100%" as your viewBox. I don't think I've ever seen that before and I'm not sure if it's even valid. 

As far as making an svg element 100% width and height svgs naturally scale and everything inside them will scale with them (based on viewBox and viewport settings). 


In the demo below the rounded edge <rect> i started out with is inside an svg that is only 300px by 300px but you will see it scales up with the window size. 


See the Pen gOjzKoE?editors=1010 by snorkltv (@snorkltv) on CodePen


as far as the percentage values used by DrawSVG I really can't explain it much better than the interactive example in the docs



In the examples where we have the lines drawing from center-top i have a full lesson on how those measurements are calculated in my SVG Animation with GreenSock course. the reason i use a set is because we need to specify the starting and ending values, you could also use a fromTo().


If you are struggling with creating svg elements, I strongly recommend BoxySVG it's free and I use it loads in my course.


In the video below you'll see how to:

  • create a rectangle with rounded corners
  • convert it to a path
  • add a custom start point 


view the rounded rectangle as path svg (in google chrome)


Trust me, SVG is full of pitfalls and it took me years to really figure it all out and I'm still learning. 


Hopefully these resources can help get you closer to achieving the goals of your project.


  • Like 1
Link to comment
Share on other sites

I much appreciate the long response. It was very helpful. I feel I have a much better understanding on svg, viewbox (you are right, the 100% is super invalid!!) and how to draw paths.

It seems that if i remove the aspect ratio of a path with rounded corners, they will distort, as they aren't being kept to scale. I am thinking (as design takes priority over animations) that I must settle with just drawing the rect and starting the animation from the corner.

Thanks for all of your help, this was very useful and taught me a lot!

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...