<div id="menu">
	<div class="top-bar"></div>
	<svg width="84" height="84" viewBox="0 0 84 84"
     xmlns="http://www.w3.org/2000/svg">
		<path class="mid-bar" fill="none" stroke-width="4px"  stroke-miterlimit="10" d="M22,42h40
																																						 c5,0, 20, -10, 14.641,-20
																																						 A40,40, 0 0 0 42 2 
																																						 A40,40, 0 0 0 2 42	
																																						 A40 40 0 0 0 42 82
																																						 A40 40 0 0 0 82 42
																																						 A40 40 0 0 0 42 2
																																						 A40 40 0 0 0 2 42			
																																			"/>
	</svg>
	<div class="btm-bar"></div>
</div>

<h5>UI Designed by <a href="https://dribbble.com/shots/1623679-Open-Close" target="_blank">UI8</a></h5>

//animation works on current chrome and firefox, not work on IE and Edge
@import url('https://fonts.googleapis.com/css?family=Ubuntu:300,400')
@mixin openAnimate($degree)
	transform-origin: 40px
	transform: translateX(-4px) rotate($degree)
	transition: all 0.75s cubic-bezier(1, -1.5, 0.5, 2)

body
	background-color: #31aa39


#menu
	margin: 150px auto
	display: block
	width: 84px
	height: 84px
	box-sizing: content-box
	cursor: pointer
	position: relative
	&.open
		.top-bar
			@include openAnimate(-45deg)
		.btm-bar
			@include openAnimate(45deg)
		.mid-bar
			stroke-dasharray: 0 120 251 251
			stroke-dashoffset: 1

.top-bar, .btm-bar
	position: absolute
	width: 43px
	height: 4px
	background: white
	left: 20px
	top: 27px
	border-radius: 10px
	transition: all 500ms cubic-bezier(1, -1, 0.5, 2)

.btm-bar
	top: 53px

.mid-bar
	stroke-linecap: round
	stroke: #fff
	stroke-dasharray: 0 100 40 400
	stroke-dashoffset: 101
	transition: all 750ms ease

h5,a
	color: #00630d
	font-family: 'Ubuntu', sans-serif
	text-decoration: none
	text-align: center

a:hover
	color: white

let menuBtn = document.getElementById('menu');
menu.addEventListener('click', () => {
	menuBtn.classList.toggle('open');
})