Synchronized animation with offset

<svg width="200" height="200">
  <circle cx="60" cy="60" r="30" style="fill: #f9f; stroke: gray;">
    <animate id="c1" attributeName="r" attributeType="XML"
      begin="0s" dur="4s" from="30" to="10" fill="freeze"/>
  </circle>

  <circle cx="120" cy="60" r="10" style="fill: #9f9; stroke: gray;">
    <animate attributeName="r" attributeType="XML"
      begin="c1.begin+1.25s" dur="4s" from="10" to="30" fill="freeze"/>
  </circle>
</svg>