SVG with CSS animation

svg_css_animation.svg

<?xml version="1.0" encoding="UTF-8"?>
<svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
  <style>
    .circle {
      fill: orange;
      animation: pulse 1.5s infinite ease-in-out;
      animation-play-state: running;
      transform-origin: center;
    }

    svg:hover .circle {
      animation-play-state: paused;
    }

    @keyframes pulse {
      0%, 100% {
        r: 20;
        opacity: 0.8;
      }
      50% {
        r: 60;
        opacity: 0.2;
      }
    }
  </style>

  <circle class="circle" cx="60" cy="60" r="20" />
  <text x="15" y="60">hover to pause</text>
</svg>