Begin

Take a look to menu animation:

And the trajectory of the animation:

Liked? Then here's a link to the demo and for download of example.

How to use

Include JavaScript before the closing tag </head>:

<head>
    <!-- ... -->
    <!--[if IE]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <script src="/pathToFolder/js/segment.min.js"></script>
    <script src="/pathToFolder/js/ease.min.js"></script>
    <!-- ... -->
</head>

Include JavaScript before the closing tag </body>:

<body>
    <!--...-->
    <script src="js/main.js"></script>
</body>

Include CSS before the closing tag </head>:

<head>
    <!-- ... -->
    <link rel="stylesheet" type="text/css" href="/pathToFolder/css/demo.css" />
    <link rel="stylesheet" type="text/css" href="/pathToFolder/css/component.css" />
    <!-- ... -->
</head>

And add the menu code. Animated menu icon:

<div id="menu-icon-wrapper" class="menu-icon-wrapper" style="visibility: hidden">
    <svg width="1000px" height="1000px">
        <path id="pathA" d="M 300 400 L 700 400 C 900 400 900 750 600 850 A 400 400 0 0 1 200 200 L 800 800"></path>
        <path id="pathB" d="M 300 500 L 700 500"></path>
        <path id="pathC" d="M 700 600 L 300 600 C 100 600 100 200 400 150 A 400 380 0 1 1 200 800 L 800 200"></path>
    </svg>
    <button id="menu-icon-trigger" class="menu-icon-trigger"></button>
</div>

<div id="dummy" class="dummy">
    <div class="dummy__item"></div>
    <div class="dummy__item"></div>
    <div class="dummy__item"></div>
    <div class="dummy__item"></div>
</div>

Scaled menu:

<div id="menu-icon-wrapper2" class="menu-icon-wrapper" style="visibility: hidden">
    <svg width="1000px" height="1000px">
        <path id="pathD" d="M 300 400 L 700 400 C 900 400 900 750 600 850 A 400 400 0 0 1 200 200 L 800 800"></path>
        <path id="pathE" d="M 300 500 L 700 500"></path>
        <path id="pathF" d="M 700 600 L 300 600 C 100 600 100 200 400 150 A 400 380 0 1 1 200 800 L 800 200"></path>
    </svg>
    <button id="menu-icon-trigger2" class="menu-icon-trigger"></button>
</div>

<div id="dummy2" class="dummy">
    <div class="dummy__item"></div>
    <div class="dummy__item"></div>
    <div class="dummy__item"></div>
    <div class="dummy__item"></div>
</div>

Browser support

Chrome FireFox IE 9+ Safari Opera

Download

This project on Github: https://github.com/codrops/AnimatedMenuIcon.