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