shape animation html5

Question

<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

Answer 1

Please post question link, rather than posting the whole code here

Answer 2

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.

Answer 3

<svg width="150" height="200">

This tag is used for savage.

Answer 4

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