Menu toggle svg animation

index.html

<div>
  <svg viewBox="0 0 800 600">
    <path d="M300,220 C300,220 520,220 540,220 C740,220 640,540 520,420 C440,340 300,200 300,200" id="top"></path>
    <path d="M300,320 L540,320" id="middle"></path>
    <path d="M300,210 C300,210 520,210 540,210 C740,210 640,530 520,410 C440,330 300,190 300,190" id="bottom" transform="translate(480, 320) scale(1, -1) translate(-480, -318) "></path>
  </svg>
</div>

Menu-toggle-svg-animation.markdown

Menu toggle svg animation

Live Version of this Dribbble shot: http://drbl.in/lUcg

A Pen by Tamino Martinius on CodePen.

License.

script.coffee

i = setInterval ->
  $("div").toggleClass "cross"
, 1500

$("div").click ->
  clearInterval i
  $("div").toggleClass "cross"

resize = ->
  $("body").css
    "margin-top": ~~((window.innerHeight - 150) / 2) + "px"
    
$(window).resize resize
resize()

style.stylus

easeInOutSine = cubic-bezier(0.445, 0.050, 0.550, 0.950)
easeOutBack   = cubic-bezier(0.250,-0.250, 0.750, 1.250)
easing = easeOutBack
duration = .5s

body
html
div
  background #292A38
  margin 0
  padding 0
  width 100%
  height 100%
  text-align center

dash-offset-cross = 0px
cross-length = 950px

svg
  width 200px
  height 150px
  cursor pointer
  transform translate3d(0,0,0)

path
  fill none
  transition stroke-dashoffset duration easing, stroke-dasharray duration easing
  stroke-width 40px
  stroke-linecap round
  stroke #A06BA5
  stroke-dashoffset 0px
  &#top
  &#bottom
    stroke-dasharray 240px cross-length
  &#middle
    stroke-dasharray 240px 240px

.cross
  path
    &#top
    &#bottom
      stroke-dashoffset -650px
      stroke-dashoffset -650px
    &#middle
      stroke-dashoffset -115px
      stroke-dasharray 1px 220px