Making a looping drawSVG animation smoother - svg

Question

I'm a novice with GSAP and am experimenting with the plugin. I want to create an effect where a rectangles border is drawn by a small path in a continuous loop. I've mostly achieved this, but the end of the animation is pretty choppy when it resets.
Here's a link to the codepen I'm working on.
How can I avoid that abrupt ending to the animation?
I've tried setting the animation to drawSVG: "100% 115%" and that didn't work.
I haven't tried changing the easing yet as I don't think that would fix it.
Thanks for helping!

Answer 1

I believe this tutorial is exactly what you're trying to achieve Codepen
code required for codepen link
I forked your pen so you can see it in action
Codepen
Hope this is what you where looking for

Answer 2

The previous answer didn't sit right with me as I felt like something more elegant could be done. I found a simple solution where GSAP isn't used, but CSS animations are.
The result is a smooth animation using only one element.
GSAP manipulates CSS animations anyway so this is a simplification of the original problem.
https://codepen.io/strigiforme/pen/zLbYWm
<svg viewbox = "0 0 200 200">
<rect id = "rect" x = "85" y = "20" width="30" height="30" stroke = "red" stroke-width = "1.5" fill="none" stroke-dasharray="30 90" stroke-dashoffset = "240"></rect>
body {
background-color: #222;
overflow: hidden;
}
#rect{
animation: draw 5s linear infinite;
}
#keyframes draw{
14%{
stroke: orange;
}
28%{
stroke: yellow;
}
42%{
stroke: green;
}
56%{
stroke: blue;
}
70%{
stroke: indigo;
}
84%{
stroke: violet;
}
98%{
stroke: red;
}
to{
stroke-dashoffset: 0;
}
}