A demo SVG for experimenting with the <object> element

demo.svg

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <style>
    .item {
      opacity: 0;
      transition: opacity 200ms;
    }

    .step-1 .item-1 {
      opacity: 1;
    }
    .step-2 .item-1,
    .step-2 .item-2 {
      opacity: 1
    }
    .step-3 .item-1,
    .step-3 .item-2,
    .step-3 .item-3 {
      opacity: 1;
    }
  </style>
  <g id="root">
    <g class="item item-1">
      <circle cx="30" cy="30" fill="forestgreen" r="25" />
    </g>
    <g class="item item-2">
      <circle cx="50" cy="50" fill="lightseagreen" r="25" />
    </g>
    <g class="item item-3">
      <circle cx="70" cy="70" fill="royalblue" r="25" />
    </g>
  </g>
</svg>