In this post I'll animate svg elements in order to get nice hamburger menu css animation effects. To see the effect which will result from our code scroll to the bottom of the page where and play the video. In order to animate the SVG elements we just need few lines of CSS and toggleClass js function.

Hamburger Menu CSS Animation

Here is all 3 SVG code for our animations:

<svg class="ham ham1" viewBox="0 0 100 100" width="80" onclick="this.classList.toggle('active')">
      <path class="line top" d="m 70,33 h -40 c -6.5909,0 -7.763966,-4.501509 -7.763966,-7.511428 0,-4.721448 	3.376452,-9.583771 13.876919,-9.583771 14.786182,0 11.409257,14.896182 9.596449,21.970818 -1.812808,7.074636 -15.709402,12.124381 -15.709402,12.124381" />
  			<path class="line middle" d="m 30,50 h 40" />
  			<path class="line bottom" d="m 70,67 h -40 c -6.5909,0 -7.763966,4.501509 -7.763966,7.511428 0,4.721448 3.376452,9.583771 13.876919,9.583771 14.786182,0 11.409257,-14.896182 9.596449,-21.970818 -1.812808,-7.074636 -15.709402,-12.124381 -15.709402,-12.124381" />
    </svg>
    <svg class="ham ham2" viewBox="0 0 100 100" width="80" onclick="this.classList.toggle('active')">
  			<path class="line top" d="m 70,33 h -40 c -11.092231,0 11.883874,13.496726 -3.420361,12.956839 -0.962502,-2.089471 -2.222071,-3.282996 -4.545687,-3.282996 -2.323616,0 -5.113897,2.622752 -5.113897,7.071068 0,4.448316 2.080609,7.007933 5.555839,7.007933 2.401943,0 2.96769,-1.283974 4.166879,-3.282995 2.209342,0.273823 4.031294,1.642466 5.857227,-0.252538 v -13.005715 16.288404 h 7.653568" />
  			<path class="line middle" d="m 70,50 h -40 c -5.6862,0 -8.534259,5.373483 -8.534259,11.551069 0,7.187738 3.499166,10.922274 13.131984,10.922274 11.021777,0 7.022787,-15.773343 15.531095,-15.773343 3.268142,0 5.177031,-2.159429 5.177031,-6.7 0,-4.540571 -1.766442,-7.33533 -5.087851,-7.326157 -3.321409,0.0092 -5.771288,2.789632 -5.771288,7.326157 0,4.536525 2.478983,6.805271 5.771288,6.7" />
  			<path class="line bottom" d="m 70,67 h -40 c 0,0 -3.680675,0.737051 -3.660714,-3.517857 0.02541,-5.415597 3.391687,-10.357143 10.982142,-10.357143 4.048418,0 17.88928,0.178572 23.482143,0.178572 0,2.563604 2.451177,3.403635 4.642857,3.392857 2.19168,-0.01078 4.373905,-1.369814 4.375,-3.392857 0.0011,-2.023043 -1.924401,-2.589191 -4.553571,-4.107143 -2.62917,-1.517952 -4.196429,-1.799562 -4.196429,-3.660714 0,-1.861153 2.442181,-3.118811 4.196429,-3.035715 1.754248,0.0831 4.375,0.890841 4.375,3.125 2.628634,0 6.160714,0.267857 6.160714,0.267857 l -0.178571,-2.946428 10.178571,0 -10.178571,0 v 6.696428 l 8.928571,0 -8.928571,0 v 7.142858 l 10.178571,0 -10.178571,0" />
    </svg>
    <svg class="ham ham3" viewBox="0 0 100 100" width="80" onclick="this.classList.toggle('active')">
  			<path class="line top" d="m 30,33 h 40 c 13.100415,0 14.380204,31.80258 6.899646,33.421777 -24.612039,5.327373 9.016154,-52.337577 -12.75751,-30.563913 l -28.284272,28.284272" />
  			<path class="line middle" d="m 70,50 c 0,0 -32.213436,0 -40,0 -7.786564,0 -6.428571,-4.640244 -6.428571,-8.571429 0,-5.895471 6.073743,-11.783399 12.286435,-5.570707 6.212692,6.212692 28.284272,28.284272 28.284272,28.284272" />
  			<path class="line bottom" d="m 69.575405,67.073826 h -40 c -13.100415,0 -14.380204,-31.80258 -6.899646,-33.421777 24.612039,-5.327373 -9.016154,52.337577 12.75751,30.563913 l 28.284272,-28.284272" />
    </svg>

And here is our css:

*{
  margin:0;
  padding:0;
  box-sizing: border-box;
}
body{
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  margin:0;
  overflow: hidden;
  position: absolute;
  width: 100%;
}
.ham{
  cursor: pointer;
  -webkit-tap-highlight-color:transparent;
  transition: transform 400ms;
  -webkit-user-select:none;
  -ms-user-select:none;
  user-select:none;
}
.hamRotate.active{
  transform: rotate(45deg);
}
.hamRotate180.active{
  transform: rotate(180deg);
}
.line{
  fill:none;
  transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
  stroke:#000;
  stroke-width:5.5;
  stroke-linecap:round;
}
.ham1 .top{
  stroke-dasharray: 40 121;
}
.ham1 .bottom{
  stroke-dasharray: 40 121;
}
.ham1.active .top,
.ham1.active .bottom{
  stroke-dashoffset:-102px;
}

.ham2 .top{
  stroke-dasharray:40 130;
}
.ham2 .middle{
  stroke-dasharray:40 140;	
}
.ham2 .bottom{
  stroke-dasharray:40 205;	
}
.ham2.active .top{
  stroke-dasharray: 75 130;
  stroke-dashoffset:-63px;
}
.ham2.active .middle{
  stroke-dashoffset:-102px;
}
.ham2.active .bottom{
  stroke-dasharray: 110 205;
  stroke-dashoffset:-86px;
}


.ham3 .top{
  stroke-dasharray: 40 172;
}
.ham3 .middle{
  stroke-dasharray: 40 111;
}
.ham3 .bottom{
  stroke-dasharray: 40 172;
}

.ham3.active .top{
  stroke-dashoffset: -132px;
}
.ham3.active .middle{
  stroke-dashoffset: -71px;
}
.ham3.active .bottom{
  stroke-dashoffset: -132px;
}

Video tutorial: