<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');
});
This Pen doesn't use any external CSS resources.