Pure CSS hamburger animation

The Pure CSS hamburger animation is always a great fun.  It helps you to create different types of CSS3 toggle icons for navigation which can be used on mobile device mostly but nowadays, we have seen a lot of one page or personal website use such type of toggle icons.

It gives an extra creativity to web design. The hamburger menu gets visibility in the modern-day web design when Google has implemented it on their website.

This menu looks good and takes less space on the webpage and easily accessible all over the web. It attracts the user to click on it and find useful links quickly.

How to Add Hamburger Animation Using CSS Only

Let’s download the source file and find out the HTML and CSS file. You simply need to add the style.css file in the head of a webpage.

<link rel="stylesheet" href="dist/style.css" />

Each icon base on SVG and you will find all the icons in the HTML file. Let’s have a look at the SVG of the first icon:

<svg class="ham hamRotate ham1" viewBox="0 0 100 100" width="80" onclick="this.classList.toggle('active')">
<path
class="line top"
d="m 30,33 h 40 c 0,0 9.044436,-0.654587 9.044436,-8.508902 0,-7.854315 -8.024349,-11.958003 -14.89975,-10.85914 -6.875401,1.098863 -13.637059,4.171617 -13.637059,16.368042 v 40" />
<path
class="line middle"
d="m 30,50 h 40" />
<path
class="line bottom"
d="m 30,67 h 40 c 12.796276,0 15.357889,-11.717785 15.357889,-26.851538 0,-15.133752 -4.786586,-27.274118 -16.667516,-27.274118 -11.88093,0 -18.499247,6.994427 -18.435284,17.125656 l 0.252538,40" />
</svg>

It’s simple and easy to use. You simply need to take the SVG which you like the animation and then add it into your web page.

Here is another SVG hamburger animation.

<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 -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>