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!

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?

Thanks alig and rodrigo! 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

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!