Try it Yourself: SVG Animation

SVG Animation

<!DOCTYPE html>
<html>
<body>

<svg viewBox="0 0 120 120">
  <circle cx="60" cy="60" r="20" fill="#e74c3c">
    <animate attributeName="r" from="20" to="40"
             dur="1.5s" repeatCount="indefinite" />
    <animate attributeName="opacity" values="1;0.3;1"
             dur="1.5s" repeatCount="indefinite" />
  </circle>
</svg>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<svg viewBox="0 0 120 120">
  <circle cx="60" cy="60" r="20" fill="#e74c3c">
    <animate attributeName="r" from="20" to="40"
             dur="1.5s" repeatCount="indefinite" />
    <animate attributeName="opacity" values="1;0.3;1"
             dur="1.5s" repeatCount="indefinite" />
  </circle>
</svg>

</body>
</html>