<figure class="animation-demo is-menu">
  <figcaption>Animated Navicon</figcaption>
  <div class="animation-demo-svg">
    <svg class="navicon" id="navicon-full" viewbox="0 0 100 100">
      <path id="path" d="M10 10 L 90 10 M10 50 L 90 50 M10 90 L 90 90">
      <animate id="menu-to-arrow"
               attributeType="XML"
               attributeName="d"
               from="M10 10 L 90 10 M10 50 L 90 50 M10 90 L 90 90"
               to="M50 10 L 10 49 M90 50 L 10 50 M50 90 L 10 51"
               dur="0.25s"
               begin="indefinite" 
               fill="freeze"
               />
      <animate id="arrow-to-menu"
               attributeType="XML"
               attributeName="d"
               from="M10 49 L 50 10 M10 50 L 90 50 M10 51 L 50 90"
               to="M90 10 L 10 10 M90 50 L 10 50 M90 90 L 10 90"
               dur="0.25s"
               begin="indefinite"
               fill="freeze"
               />
        
    </path>
  </svg>
  </div>
  <div class="animation-demo-buttons">
    <button class="button to-arrow">Switch to arrow icon</button>
    <button class="button to-menu">Switch to menu icon</button>
  </div>
</figure>
@import "compass/css3";

*{
  box-sizing:border-box;
}

body{
  padding:0 1em;
}

figure{
  padding:1em 0;
  margin:0 0 0.5em;
}

figcaption{
  display:block;
  width:100%;
  padding:0.5em 0;
  border-bottom:solid thin;
  margin:0 0 1em 0;
}

pre{
  color:white;
  background:rgb(30, 30, 30);
  padding:1em;
}
.navicon{
  width:100%;
  fill:none;
  stroke:white; 
  stroke-linecap:round; 
  stroke-width:10;
  display:block;
  background:rgb(70, 70, 70);
  padding:10%;
  border-radius:15%;
}
.animation-demo-svg{
  width:20%;
  margin:0 0 1em;
}

// Button states
.button{
/*   display:block; */
  margin-bottom:1ex;
}

.is-menu .to-menu,
{
  display:none;
}

.is-arrow .to-arrow,
{
  display:none;
}
View Compiled
menuToArrow = document.getElementById('menu-to-arrow');
arrowToMenu = document.getElementById('arrow-to-menu');


function animateMenuToArrow(){
  menuToArrow.beginElement();
}

function animateArrowToMenu(){
  arrowToMenu.beginElement();
}

// Demo script

wrapper = $('.animation-demo');

$('.to-arrow').click(function(){
  animateMenuToArrow();
  wrapper.addClass('is-arrow').removeClass('is-menu');
});

$('.to-menu').click(function(){
  animateArrowToMenu();
  wrapper.addClass('is-menu').removeClass('is-arrow');
});


Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js