Trajectory for svg animation

Question

When we use svg animation we set from and to values. Can we add a moving trajectory? For it to be not lineral but, for example circle.

Answer 1

Thank you! It is a nice idea. But I'd like to know if there is a chance to make something like analog watch using svg animation or to make a ball move by a Bezier curve. But it is also cool.

Answer 2

When I asked, I didn't know. And tried to make an analog watch. So I made there false animation. And then I found an answer.

Answer 3

Can be any shape.

To give you an idea:

https://css-tricks.com/svg-line-animation-works/

For a circle, start with:

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/circle

Then animate as you see fit.

I hope this helps! 🙂

Answer 4

Yes, of course.

SVG Path is very flexible. If you scroll down a little ways (or find in page "Bezier") you can get an idea of some of your options here:

https://css-tricks.com/svg-path-syntax-illustrated-guide/

Answer 5

To make such kind of animation we should use animateMotion tag. The trajectory should be set in path tag. I performad this task in the code below.
https://code.sololearn.com/WD246tH81xU0/?ref=app

Answer 6

🤔
Sounds like you knew the answer to your own question. If so, why ask?