<div class="search">
  <input type="search" autocomplete="off" required/>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="-20 -20 1000 150">
    <path class="path" fill="none" d="M924.4 85.2c-19.5 19.5-50.8 19.7-70.3 0-19.3-19.4-19.3-51 .3-70.6 19.5-19.5 51-19.4 70.6 0 19.3 19.7 19.3 50.8-.5 70.6l35.4 35.3H0"/>
  </svg>
</div>

$length: 1324
$start: 363

@mixin center($w, $h)
  position: absolute
  width: $w
  height: $h
  top: 0
  left: 0
  right: 0
  bottom: 0
  margin: auto

html, body
  background: rgb(26, 128, 90)

.search
  @include center(300px, 50px)
  overflow: hidden

  svg
    width: 300px
    transform:  translate3d(-125px, 0, 0)
    transition: .5s
    pointer-events: none
   
  input
    position: absolute
    bottom: 0
    left: 0
    width: 100%
    height: 100%
    background: transparent
    border: none
    color: #fff
    font-family: sans-serif
    font-size: 1.5rem
    padding: 10px 55px 10px 10px
    box-sizing: border-box
    cursor: pointer
    
    &::selection
      background: rgba(black, 0.3)
      
    &:valid, &:focus
      cursor: auto
      + svg
        transform: translate3d(0, 0, 0)
    
    &:focus
      cursor: auto
      outline: none
      + svg
        .path
          stroke-dasharray: $length - $start, $start
          stroke-dashoffset: -$start
    
  .path
    stroke-dasharray: $start, $length - $start
    stroke-dashoffset: 0
    stroke: #fff
    stroke-width: 10
    stroke-linejoin: round
    stroke-linecap: round
    transition: .5s