How can I create animations using SVG?

How can I create animations using SVG?

You can create animations in SVG using the <animate> element or CSS animations. Would you like a specific example?

Yes, please show me an example using the <animate> element.

Sure! Here's a simple example:

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="red">
    <animate attributeName="r" from="40" to="20" dur="1s" begin="0s" repeatCount="indefinite" />
  </circle>
</svg>

This will animate the radius of the circle from 40 to 20 repeatedly.

That looks great! Can I also use CSS for animations?

Absolutely! You can use CSS animations with SVG elements. Would you like to see an example of that?