How to morph a SVG diamond into a circle

Question

I've recently been dipping my toe into SVGs and I'm currently trying to morph a diamond into a circle when the user hovers over it.

I found this tutorial over at CSS Tricks

I've noticed that they're using points to do the animation however my SVG shapes are:

<circle cx="49.873" cy="50.155" r="49.845"/>

and

<rect x="15.211" y="14.798" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -20.8426 50.3112)" width="70.198" height="71.034"/>

Is there a way to do this? How would I get the points of these shapes so I could follow the CSS Tricks tutorial?

Answer 1

For those interested:

<svg viewBox="0 0 300 300" width="500" height="500" style="border:1px solid red;"preserveAspectRatio="xMinYMax meet">
   <rect id="shape2" rx="0" y="0" x="100" width="50" height="50" transform="rotate(45)">
      <animate begin="shape2.mouseover" attributeName="rx" dur="700ms" to="50%" fill="freeze"/>
      <animate begin="shape2.mouseout" attributeName="rx" dur="700ms" to="0" fill="freeze"/>
    </rect>
</svg>

http://jsfiddle.net/4e71gra6/