Is it possible to animate circles and lines? | Sololearn: Learn to code for FREE!
New course! Every coder should learn Generative AI!
Try a free lesson
0

Is it possible to animate circles and lines?

I've tried to animate circles and lines. I could do this with rectangles. I copied the same animate line from the rectangle to the circle but it isn't working.

15th May 2017, 3:56 PM
Adam
Adam - avatar
6 Answers
+ 19
<svg width="2000" height="2000"> <rect height="200" width="300" fill="blue" x="60" y="60" style="stroke:red; stroke-width:10px"> <animate attributeName="x" from="0" to="300" dur="3s" fill="remove" repeatCount="4" /> </rect> <circle cx="100" cy="100" r="25" fill="green" style="stroke:red; stroke-width:5px;"> <animate attributeName="cy" from="0" to="500" dur="2s" fill="freeze" repeatCount="3" /> </circle> </svg>
15th May 2017, 4:16 PM
Valen.H. ~
Valen.H. ~ - avatar
+ 18
@Jubbs no, i added a "c" ..... ^_^
15th May 2017, 6:28 PM
Valen.H. ~
Valen.H. ~ - avatar
+ 16
Yes it is..... Maybe give us the bugged code?....
15th May 2017, 4:03 PM
Valen.H. ~
Valen.H. ~ - avatar
+ 4
you guys posted the same code lol
15th May 2017, 6:05 PM
Jubbs
Jubbs - avatar
+ 2
<svg width="2000" height="2000"> <rect height="200" width="300" fill="blue" x="60" y="60" style="stroke:red; stroke-width:10px"> <animate attributeName="x" from="0" to="300" dur="3s" fill="remove" repeatCount="4" /> </rect> <circle cx="100" cy="100" r="25" fill="green" style="stroke:red; stroke-width:5px;"> <animate attributeName="y" from="0" to="500" dur="2s" fill="freeze" repeatCount="3" /> </circle> </svg>
15th May 2017, 4:15 PM
Adam
Adam - avatar
+ 1
thanks
15th May 2017, 6:36 PM
Adam
Adam - avatar