+ 2

shape animation html5

<svg width="2000" height="2000"> <circle cx="400" cy="400" r="300" style="fill:green; stroke:yellow; stroke-width:3;"> <animate attributeName="x" from="0" to="300" dur="3s" fill="freeze" repeatCount="2"/> </circle> </svg> why the circle shape not animate??? I wrote this code

27th Mar 2019, 8:21 AM
Sanaa Hareb
Sanaa Hareb - avatar
4 Answers
+ 7
Please post question link, rather than posting the whole code here
27th Mar 2019, 8:26 AM
Letsintegreat
Letsintegreat - avatar
+ 6
Your circle is not moving 'cause you're animating for the attributeName "x" but there's no attribute called "x" in the <circle>. Use "cx" , "cy" or "r" attributes to animate. And by the next time, as Zlytherin suggested, kindly share the link of your code rather than posting entire code over here.
27th Mar 2019, 8:40 AM
ŠØŠ°Ń‰Šø Š Š°Š½Š¶Š°Š½
ŠØŠ°Ń‰Šø Š Š°Š½Š¶Š°Š½ - avatar
0
<svg width="150" height="200"> This tag is used for savage.
12th Oct 2021, 5:26 AM
Shubham Bhatia
Shubham Bhatia - avatar
0
Shape animation in HTML5 refers to the use of HTML5 code to create dynamic and interactive shapes that move or change on a web page. It allows for the creation of engaging visuals without the need for external plugins. Additionally, HTML5 supports 2d animation video creation, enabling developers to incorporate animated shapes seamlessly into their web projects for enhanced user experience and visual appeal. you can explore more animation resources at : https://animationgravity.com/2d-animation
26th Feb 2024, 11:11 AM
Richard Butcher
Richard Butcher - avatar