<svg viewBox="0 0 300 300" width="400">
  <circle id="circle" r="30" cx="150" cy="150"/>
  
  <animate id="another" xlink:href="#circle"
           attributeName="r"
           values="30;50;30"  
           repeatCount="indefinite"
           dur="3s"/>
  <animate begin="another.begin" xlink:href="#circle"
           attributeName="fill"
           values="#000000;#ffe3e3;#000000"
           repeatCount="indefinite"
           dur="3s"/>
  <animate begin="another.begin" xlink:href="#circle"
           attributeName="cx"
           values="150;180;150"
           repeatCount="indefinite"
           dur="3s"/>
</svg>

body {
  background-color: #ffe3e3;
}

svg {
  border: 1px solid #000;
}