SVG folding line hover effect

index.haml

.cont
  %a(href="#") :HOVER
  %svg(height="40" width="120")
    - (1..120).each do |i|
      %line(x1="#{i}" y1="0" x2="#{i}" y2="40")
 

style.sass

$c1: #035e7b
$c2: #fff
$c3: #eff1c5
$t: 0.3s
$d: $t / 121

@import url('https://fonts.googleapis.com/css?family=Signika+Negative:700')

body
  margin: 0
  background-color: $c3
  font-family: 'Signika Negative', sans-serif

.cont, .cont > a, svg
  position: absolute
  height: 40px
  width: 120px
.cont 
  top: 50vh
  left: 50vw
  margin: -20px 0 0 -60px
  a
    z-index: 2
    display: block
    line-height: 40px
    text-align: center
    text-decoration: none
    font-size: 20px
    color: $c3
    transition: all $t

    &:hover
      ~ svg > line:nth-child(odd)
        transform: scaleY(1.2)
        opacity: 0.2
      ~ svg > line:nth-child(even)
        transform: scaleY(-0.2) translateX(-1px)
        opacity: 0.2
        
      transform: scale(1.1)
      color: $c1
  

svg
  overflow: visible
  line
    stroke: $c1
    stroke-width: 1px
    transition: all $t
    transform-origin: 50% 0%
  @for $i from 1 through 121
    line:nth-child(#{$i})
      transition-delay: $i * $d
  &:hover
    line:nth-child(odd)
      transform: scaleY(1.2)
    line:nth-child(even)
      transform: scaleY(-0.2)

svg-folding-line-hover-effect.markdown

SVG folding line hover effect

A Pen by LukasOe on CodePen.

License.