Старт

Для начала предлагаю посмотреть саму анимацию:

И траекторию движения анимации:

Понравилось? Тогда вот ссылка на демо и для скачивания примера.

Как использовать

Подключаем JavaScript перед закрывающимся тегом </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>

Подключаем JavaScript перед закрывающимся тегом </body>:

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

Подключаем CSS перед закрывающимся тегом </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>

И подключаем код меню. Большой размах анимации:

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

Анимация размером с иконкой:

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

Поддержка браузеров

Chrome FireFox IE 9+ Safari Opera

Скачать

Проект на Github: https://github.com/codrops/AnimatedMenuIcon.