Material Design 'delightful' animated hamburger menu, done in SVG/SMIL

delightful-hamburger

<svg xmlns="http://www.w3.org/2000/svg" width="214" height="214" viewBox="0 0 24 24">
	<path d="M0 0h24v24h-24z" fill="none" />

	<rect style="fill:#000;" width="18" height="2" x="3" y="11">
		<animateTransform attributeName="transform" begin="0s" dur="2s" calcMode="spline" keySplines="0.4, 0, 0.2, 1" type="rotate" from="0 12 12" to="180 12 12" repeatCount="1" fill="freeze" />
		
		<animateTransform attributeName="transform" begin="3s" dur="2s" calcMode="spline" keySplines="0.4, 0, 0.2, 1" type="rotate" from="180 12 12" to="360 12 12" repeatCount="1" fill="freeze" />
	</rect>

	<rect style="fill:#ff0000;" width="18" height="2" x="3" y="6">
		<animateTransform attributeName="transform" begin="0s" dur="2s" calcMode="spline" keySplines="0.4, 0, 0.2, 1" type="rotate" from="0 12 12" to="225 12 12" repeatCount="1" fill="freeze" additive="sum" />
		<animateTransform attributeName="transform" begin="0s" dur="2s" calcMode="spline" keySplines="0.4, 0, 0.2, 1" type="scale" from="1 1" to=".7 1" repeatCount="1" fill="freeze" additive="sum" />
		<animateTransform attributeName="transform" begin="0s" dur="2s" calcMode="spline" keySplines="0.4, 0, 0.2, 1" type="translate" from="0 0" to="6 -1" repeatCount="1" fill="freeze" additive="sum" />
		
		<animateTransform attributeName="transform" begin="3s" dur="2s" calcMode="spline" keySplines="0.4, 0, 0.2, 1" type="rotate" from="225 12 12" to="360 12 12" repeatCount="1" fill="freeze" />
		<animateTransform attributeName="transform" begin="3s" dur="2s" calcMode="spline" keySplines="0.4, 0, 0.2, 1" type="scale" from=".7 1" to="1 1" repeatCount="1" fill="freeze" additive="sum" />
		<animateTransform attributeName="transform" begin="3s" dur="2s" calcMode="spline" keySplines="0.4, 0, 0.2, 1" type="translate" from="6 -1" to="0 0" repeatCount="1" fill="freeze" additive="sum" />
	</rect>

	<rect style="fill:#00ff00;" width="18" height="2" x="3" y="16">
		<animateTransform attributeName="transform" begin="0s" dur="2s" calcMode="spline" keySplines="0.4, 0, 0.2, 1" type="rotate" from="0 12 12" to="135 12 12" repeatCount="1" fill="freeze"  additive="sum" />
		<animateTransform attributeName="transform" begin="0s" dur="2s" calcMode="spline" keySplines="0.4, 0, 0.2, 1" type="scale" from="1 1" to=".7 1" repeatCount="1" fill="freeze" additive="sum" />
		<animateTransform attributeName="transform" begin="0s" dur="2s" calcMode="spline" keySplines="0.4, 0, 0.2, 1" type="translate" from="0 0" to="6 1" repeatCount="1" fill="freeze" additive="sum" />
		
		<animateTransform attributeName="transform" begin="3s" dur="2s" calcMode="spline" keySplines="0.4, 0, 0.2, 1" type="rotate" from="135 12 12" to="360 12 12" repeatCount="1" fill="freeze"  />
		<animateTransform attributeName="transform" begin="3s" dur="2s" calcMode="spline" keySplines="0.4, 0, 0.2, 1" type="scale" from=".7 1" to="1 1" repeatCount="1" fill="freeze" additive="sum" />
		<animateTransform attributeName="transform" begin="3s" dur="2s" calcMode="spline" keySplines="0.4, 0, 0.2, 1" type="translate" from="6 1" to="0 0" repeatCount="1" fill="freeze" additive="sum" />
	</rect>

</svg>

I expanded on this a bit, using some basic JS to control the animation, like you would when opening/closing a menu:

http://codepen.io/jakobud/pen/WbrENy

HE HE, nice and usefull