How to make this animation for Circle? Without using CSS animate property. | Sololearn: Learn to code for FREE!
+ 1

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

<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.

18th Jan 2019, 9:54 AM
Dev Anand
Dev Anand - avatar
9 Answers
+ 4
<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>
18th Jan 2019, 10:22 AM
Игорь Яковенко
Игорь Яковенко - avatar
18th Jan 2019, 12:24 PM
Calviղ
Calviղ - avatar
+ 1
thank you@Игорь Яковенко, i was wondering too how to do that.
27th Apr 2019, 2:51 PM
Devotha Mwenda
Devotha Mwenda - avatar
0
Is it possible to move it vertically?
18th Jan 2019, 11:01 AM
Dev Anand
Dev Anand - avatar
0
Yes, write: attributeName="cy"
18th Jan 2019, 11:03 AM
Игорь Яковенко
Игорь Яковенко - avatar
0
Thanks, got the point
18th Jan 2019, 11:08 AM
Dev Anand
Dev Anand - avatar
0
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>
18th Jan 2019, 11:31 AM
Dev Anand
Dev Anand - avatar
0
No, not this. Assistant's Animation is different
18th Jan 2019, 12:30 PM
Dev Anand
Dev Anand - avatar
0
This is not the replicate of Assistant's animation
18th Jan 2019, 3:54 PM
Dev Anand
Dev Anand - avatar