Использование SVG для анимации и переворачивания шестиугольника

Я никогда не использовал SVG, но сейчас читаю некоторые уроки и проверяю некоторые вещи. Я учусь делать фигуры, похожие на шестиугольник, но теперь мне нужно, чтобы он переворачивался вниз по вертикальной оси и увеличивался в размерах, сохраняя при этом нижнюю часть не перевернутого шестиугольника в качестве вершины нового перевернутого шестиугольника.

Мой код здесь:

<html>
  <style>    
    #test:hover {
      fill: yellow;
    }
  </style>
  <body>
    <div class="viewBox">
      <h1>SVG Testing</h1>
      <svg height="900" width="400" version="1.1" xmlns="http://www.w3.org/2000/svg" style="background-color: gray;">
        <path d="M0 86.60254037844386L50 0L150 0L200 86.60254037844386L150 173.20508075688772L50 173.20508075688772Z" fill="green" id="test"></path>
      </svg>
    </div>
  </body>
</html> 

Каковы мои дальнейшие шаги?

Я использую библиотеку, чтобы сделать это?

Ответы на вопрос(3)

Ваш ответ на вопрос