Animation SVG hamburger icon

animation-svg-hamburger-icon.markdown

Animation SVG hamburger icon

A Pen by Roman Milkovic on CodePen.

License.

index.pug

span.navToggle
  svg.hamburger(viewbox='0 0 28 28')
    g(stroke-width='2', stroke-linecap='round', stroke-miterlimit='10')
      line.one(x1='4', y1='6', x2='24', y2='6')
      line.two(x1='4', y1='14', x2='24', y2='14')
      line.three(x1='4', y1='22', x2='24', y2='22')

script.js

$(document).ready(function() {
  $('.navToggle').click(function() {
    $('.navToggle').toggleClass('active');
  });
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.scss

body {
  position: relative;
  color: #000;
}

.navToggle {
  fill: #333;
  stroke: #333;
  color: #333;
}

.navToggle {
  cursor: pointer;
  left: 2em;
  position: absolute;
  top: 2em;
  display: block;
}
.navToggle svg {
  height: 1.75em;
  width: 1.75em;
  z-index: 999;
}

.navToggle svg line {
  transition: transform 0.5s ease;
}

.hamburger .one {
  transform: rotate(0deg);
}
.hamburger .two {
  transition: opacity 0.2s ease;
}
.hamburger .three {
  transform: rotate(0deg);
}

.active .hamburger .one {
    transform: translate(8.8px, 0.5px) rotate(45deg);
}
.active .hamburger .two {
    opacity: 0;
}
.active .hamburger .three {
    transform: translate(-11px, 9px) rotate(-45deg);
}