svg How to animate arc along svg circle path smoothly?

[autumn]

I have learned from the doc that how can I animate rect along path. For advance, how can I make the arc-shaped element（id="pin-arc" in the codepen demo） move around the circle path, and always fits to the circle radian？
Is this possible with only MotionPathPlugin?

Or are there any other solution for this, (yet prefer not to includes other plugins).

Thank ahead!

See the Pen dyaKJPE by cc5324 (@cc5324) on CodePen.

[Cassie]

Hi there!

 

Not entirely certain of the question. Are you trying to get the grey arc to act the same as the red one?

You can define a number in degrees for autoRotate? Does that help?

See the Pen rNPKdBM?editors=0010 by GreenSock (@GreenSock) on CodePen.

[autumn]

Yes, I am trying to make the grey arc act the same as the red one!

 

Your solution does help! Thank you!

 

But now the grey arc is a little away from the circle path,

Is it possible to make the grey arc exactly move along the path of circle (cover on it)?

Thanks again!

[PointC]

For circles and arcs, I find it easier to clone the original circle path, show a section of it and simply rotate around its center. Super simple with the drawSVG plugin.

 

See the Pen a33f6c2d7e7fa58d1c50e59a4f3ea24e by PointC (@PointC) on CodePen.

 

You can also use the pathLength = "1" trick and achieve the same result without the plugin.

See the Pen f9214e6d849c0bec87e065008e4b855e by PointC (@PointC) on CodePen.

 

Just my two cents, Happy tweening.

[autumn]

Thank you! Using pathLength s a nice trick, simple but looks nice!