DrawSVG - starting from the top center of a rect

[Jacob Raccuia]

hi!

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

[alig01]

Hey,

 

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

 

See the Pen LYBmWgW?editors=0010 by alig01 (@alig01) on CodePen

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

 

Hope this helps.

[Rodrigo]

Hi @Jacob Raccuia and welcome to the GreenSock forums!

 

When you need to create a Codepen example with the the bonus plugins always use this one as a starting point:

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

Finally thanks for being a Club GreenSock member and supporting GreenSock! 🥳

Happy Tweening!

[Jacob Raccuia]

Thanks alig and rodrigo!
 

41 minutes ago, alig01 said:

Hey,

 

@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

[Carl]

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> 

[Jacob Raccuia]

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?

 

[Carl]

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

https://greensock.com/docs/v3/Plugins/DrawSVGPlugin

 

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.

 

[Jacob Raccuia]

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!