How to change the shape of an svg shape so that when you hover the mouse it "flows" from one to another, and returns back if the mouse is removed?

Question

Animation

Good day!
It's not the first day I've been racking my brains on how to make an animation of an svg icon when you hover over it with the mouse and return to the stock one after the mouse is removed.
I have the following code (see below), where id="btn_aPlay_stok" is the default shape and id="btn_aPlay_hover" is on hover. I'm trying to implement the following: by default, the element id="btn_aPlay_stok" is displayed, and on hover it should change to id="btn_aPlay_hover". At the moment, I have implemented this with two different svg files and the "opacity" property using css, but I would like to do exactly the animation. How can this be implemented?

<svg id="btn_aPlay" width="20px" height="20px" fill="#d2e1ff"
xmlns="http://www.w3.org/2000/svg">
  <g id="btn_aPlay_stok">
    <g transform="matrix(1 0 0 -1 0 30)">
      <rect x="4" y="19" width="4" rx="2">
      <animate attributeName="height" begin="0s" dur="2.6s" values="12;8;3;12;8;3;12;8;3;12" calcMode="linear" repeatCount="indefinite" />
      </rect>
      <rect x="10" y="19" width="4" rx="2">
      <animate attributeName="height" begin="0s" dur="2s" values="3;12;3;6;12;3;6;12;3" calcMode="linear" repeatCount="indefinite" />
      </rect>
      <rect x="16" y="19" width="4" rx="2">
      <animate attributeName="height" begin="0s" dur="2s" values="3;8;10;3;8;10;3;8;10;3" calcMode="linear" repeatCount="indefinite" />
      </rect>
    </g>
    <rect x="4" y="7" width="4" rx="2">
    <animate attributeName="height" begin="0s" dur="2.6s" values="12;8;3;12;8;3;12;8;3;12" calcMode="linear" repeatCount="indefinite" />
    </rect>
    <rect x="10" y="7" width="4" rx="2">
    <animate attributeName="height" begin="0s" dur="2s" values="3;12;3;6;12;3;6;12;3" calcMode="linear" repeatCount="indefinite" />
    </rect>
    <rect x="16" y="7" width="4" rx="2">
    <animate attributeName="height" begin="0s" dur="2s" values="3;8;10;3;8;10;3;8;10;3" calcMode="linear" repeatCount="indefinite" />
    </rect>
  </g>
  <g id="btn_aPlay_hover">
    <rect x="4" y="7" width="4" height="4" rx="2" />
    <rect x="10" y="2" width="4" height="14" rx="2" />
    <rect x="16" y="2" width="4" height="14" rx="2" />
  </g>
</svg>