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).
Comments
Post a Comment