jquery - Using SVG to animate and flip a hexagon -


i have never used svgs reading tutorials , tested stuff. learning how make shapes hexagon need make flip down on vertical axis , expanding in size while keeping bottom of non flipped hexagon top of new flipped hexagon.

my code here:

<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>  

what next steps?

do use library this?

you can use snap, have tagged question that..

snap('#test').animate({ transform: 't0,260s2,-2'},2000, mina.bounce) 

translate 't' scale 's' bottom line automatically drift change whilst scaling (or scale center).

jsfiddle


Comments

Popular posts from this blog

mysql - Dreamhost PyCharm Django Python 3 Launching a Site -

java - Sending SMS with SMSLib and Web Services -

java - How to resolve The method toString() in the type Object is not applicable for the arguments (InputStream) -