A Pen by Captain Anonymous.

index.html

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 425.5 113.5">
  
  
    <a id="menu" xlink:href="#" >
    <rect id="out-box" x="10" y="10" width="60" height="60" rx="1" ry="1"/>
    <rect class="outside-boxes" id="top-box" x="20" y="20" width="40" height="10" rx="1" ry="1" />
    <rect class="outside-boxes" id="bottom-box" x="20" y="50" width="40" height="10" rx="1" ry="1"/>
    <rect id="middle-box" x="20" y="35" width="40" height="10" rx="1" ry="1" />
</a>
  
  
  <a id="clock" xlink:href="#" >
    <polygon id="clock-triangle" points="212.4,88.4 191.2,52.5 170,16.5 212.4,16.5 254.8,16.5 233.6,52.5 	"/>
    <path id="clock-circle" d="M228.9,42.3c-0.4,9-7.2,15.8-16.2,16.2c-9,0.4-15.8-7.6-16.2-16.2c-0.3-9,7.7-15.8,16.2-16.1 C221.7,25.8,228.6,33.8,228.9,42.3c0,1,1.6,1,1.6,0c-0.4-9.9-7.9-17.4-17.8-17.7c-9.9-0.4-17.5,8.3-17.7,17.7
		c-0.4,9.9,8.3,17.5,17.7,17.8c9.9,0.4,17.5-8.3,17.7-17.7C230.5,41.3,229,41.3,228.9,42.3"/>
    <path id="noon" d="M213.3,27.8v-2.4c0-0.9-1.3-0.9-1.3,0v2.4C212,28.7,213.3,28.7,213.3,27.8"/>
    <path id="three-oclock" d="M227.3,43.1h2.4c1,0,1-1.6,0-1.6h-2.4C226.3,41.5,226.3,43.1,227.3,43.1"/>
    <path id="six-oclock" d="M211.9,56.8v2.4c0,1,1.6,1,1.6,0v-2.4C213.5,55.8,211.9,55.8,211.9,56.8"/>
    <path id="nine-oclock" d="M198.2,41.5h-2.4c-1,0-1,1.6,0,1.6h2.4C199.3,43.1,199.3,41.5,198.2,41.5"/>
    <path id="center-circle" d="M210.1,42.3c0-1.1,0.6-2,1.6-2.4c0.3-0.1,0.6-0.2,1-0.2c1.4,0,2.6,1.2,2.6,2.6c0,1.4-1.2,2.6-2.6,2.6 		S210.1,43.7,210.1,42.3"/>
    <path id="minute-hand" d="M213,30.5c0-0.3-0.5-0.3-0.5,0c-0.3,3.3-0.7,6.6-1,9.9c0,0.1,0.1,0.3,0.3,0.3l1.8-0.1 c0.1,0,0.3-0.1,0.3-0.3C213.5,37,213.2,33.8,213,30.5c0-0.3-0.6-0.3-0.5,0"/>
  </a>
  
  <a id="iris" xlink:href="#" >
    <polygon id="iris-triangle" points="326,18.3 404.3,18.3 365.2,85.8 	"/>
    <path id="leaf5" d="M364.8,26.4l-6.2,11.2l-3.8-6.2C357.5,27.8,362.2,26.7,364.8,26.4"/>
    <path id="leaf4" d="M352.2,34.8l6.3,11.2l-7.3,0.1C349.6,41.7,351.1,37.2,352.2,34.8"/>
    <path id="leaf3" d="M352.8,49.6l12.8,0.2l-3.7,6.4C357.5,55.3,354.4,51.8,352.8,49.6"/>
    <path id="leaf2" d="M372.9,45.4l3.8,6.3c-2.9,3.6-7.5,4.6-10.2,4.8L372.9,45.4"/>
    <path id="leaf1" d="M380,36.8c1.7,4.3,0.1,8.8-1,11.2l-6.3-11.2L380,36.8"/>
    <path id="leaf6" d="M368.9,26.8c4.6,0.6,7.8,4.1,9.4,6.2l-12.8,0.3L368.9,26.8"/>
  </a>
</svg>

script.js

/*$(documtent).ready(function()={ 
$('middle-box').hover(
       $('svg #menu #middle-box').setAttribute("height",30);
)
});*/

style.css

@keyframes timer { 
  to { transform: rotate(1turn); }
}

body { background: #333; }
#out-box { stroke: #efe7bc; fill: none; stroke-width: 5;}
#top-box { stroke: none; fill: #efe7bc;}
#bottom-box { stroke: none; fill: #efe7bc;}
#middle-box { stroke: none; fill:none;}

/*a#menu rect { transition-duration: .8s; 
}*/
a#menu:hover #top-box { transform: translateY(-3px);}
a#menu:hover #bottom-box { transform: translateY(3px);}
a#menu:hover #out-box { stroke-width:0; height:20;}
a#menu:hover #middle-box { fill: #efe7bc;}


a#clock path { fill: #fff; }
a#clock:hover path#minute-hand { 
  transform-origin: center 110%; 
  -webkit-animation: timer 2s forwards linear infinite;  
}
path#hour-hand { 
  transform-origin: center 110%;
  transform: scale(0.8);
}
#clock-triangle { fill: #bfe7dd; transition: 1s; }
a#clock:hover #clock-triangle { fill: #000; }

a#iris polygon { fill: #444341; transition: 1s; }
a#iris:hover polygon { fill: #000; }
a#iris path { 
  fill: #fff; transform: scale(0.8) 50 50; transition-duration: .8s; 
}
a#iris:hover #leaf1 { transform: translateX(-3px); }
a#iris:hover #leaf2 { transform: translateX(-2px) translateY(-3px); }
a#iris:hover #leaf3 { transform: translateY(-3px) translateX(1px); }
a#iris:hover #leaf4 { transform: translateX(3px); }
a#iris:hover #leaf5 { transform: translateX(1px) translateY(3px); }
a#iris:hover #leaf6 { transform: translateX(-2px) translateY(3px); }

SVG-Animated-Navigation-Icons.markdown

SVG Animated Navigation Icons

Work for a student's photography instruction site, using SVG graphics animated with CSS. A detailed tutorial on my blog

Forked from Dudley Storey's Pen SVG Animated Navigation Icons.

A Pen by A Non Ymous on CodePen.

License.