Hammy menu / svg / animation

hammy-menu-svg-animation.markdown

Hammy menu / svg / animation

A Pen by hosein shurabi on CodePen.

License.

index.html

<a href="#" class="link">
<svg viewBox="0 0 8 8" xmlns="http://www.w3.org/2000/svg" class="svg-hammy">
  <line x1="1" y1="1" x2="10" y2="1" stroke="black" stroke-linecap="round" class="settings-icon__line" />
  <line x1="7" y1="4" x2="1" y2="4" stroke="black" stroke-linecap="round" class="settings-icon__line" />
 <line x1="1" y1="7" x2="10" y2="7" stroke="black" stroke-linecap="round" class="settings-icon__line" />
</svg>
</a>

style.css

html,body,svg { height:100% }
.settings-icon__line{
   transition: cubic-bezier(0, -0.01, 0.91, -3) all .4s;
}
.link:hover .settings-icon__line:nth-child(2){
  transform:translateX(3px);
}