Usando SVG para animar y voltear un hexágono
Realmente nunca he usado SVG, pero leí algunos tutoriales al respecto y probé algunas cosas. Estoy aprendiendo a hacer formas como un hexágono, pero ahora necesito hacerlo voltear hacia abajo en el eje vertical y expandir su tamaño, manteniendo la parte inferior del hexágono no volteado como la parte superior del nuevo hexágono volteado.
Mi codigo esta aqui:
<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>
¿Cuáles son mis siguientes pasos?
¿Utilizo una biblioteca para hacer esto?