How to make this animation for Circle? Without using CSS animate property.

Question

<svg width="1000" height="250">
<rect width="150" height="150" fill="orange">
<animate attributeName="x" from="0" to="300"
dur="3s" fill="freeze" repeatCount="2"/>
</rect>
</svg

I tried changing values circle, y, etc but nothing happening.

Answer 1

<svg width="1000" height="250">
<circle cx="75" cy="75" r=75 fill="orange">
<animate attributeName="cx" from="75" to="300"
dur="3s" fill="freeze" repeatCount="2"/>
</circle>
</svg>

Answer 2

Animated circle
https://code.sololearn.com/WWPL23Lnj8JW/?ref=app

Answer 3

thank you@Игорь Яковенко, i was wondering too how to do that.

Answer 4

Is it possible to move it vertically?

Answer 5

Yes, write: attributeName="cy"

Answer 6

Thanks, got the point

Answer 7

Hope you know this sign - Can we make it as same animation Assistant uses?
<div style="padding-top: 20px;">
<svg width="80px" height="80px">
<circle cx="10" cy="50" r="5" fill="DodgerBlue">
<animate attributeName="cy" from="10" to="5" dur="2s" repeatCount="indefinite" />
</circle>
<circle cx="30" cy="20" r="5" fill="brown">
<animate attributeName="cy" from="10" to="5" dur="2.2s" repeatCount="indefinite" />
</circle>
<circle cx="50" cy="20" r="5" fill="gold">
<animate attributeName="cy" from="10" to="5" dur="2.4s" repeatCount="indefinite" />
</circle>
<circle cx="70" cy="20" r="5" fill="MediumSeaGreen ">
<animate attributeName="cy" from="10" to="5" dur="2.8s" repeatCount="indefinite" />
</circle>
</svg>
</div>

Answer 8

No, not this. Assistant's Animation is different

Answer 9

This is not the replicate of Assistant's animation