How to implement circle rewind animation?

Question

Canvas

Help solve the following problem, you need to implement the animation of the circle rewinding to a straight line. Any ideas or suggestions?
Thank you.

Answer 1

I sketched a small example, it can lead you to the right decision,
I suggest making an svg circle and removing the border from it gradually and at the same time shifting the circle to the right the
second animation is drawing the line
https://codepen.io/freislot/pen/KywqZw