How to superpose a textarea and a SVG

Question

I'm trying to make an animation (With a SVG Path) on a textarea:

I have two div :

Svg :

<svg class="graph" width="400px" heigth="100px" viewBox="0 0 400 100" preserveAspectRatio="none">
  <path d="m0,0l400,0l0,100l-400,0l0,-100z" />
</svg>

Textarea :

<textarea placeholder="message"></textarea>

I'm trying to superpose the two element (svg element below the textarea). The svg will be the border of the textarea.

Here is the codepen of the two element working separately : http://codepen.io/Dipiks/pen/ogMErr

The SVG react on hover.

Answer 1

You may just use backgrounds and animate them :

textarea{
  resize:none;
  border:none;
  border-radius:0;
  width:400px;
  height:100px;
  left:10px;
  position:relative;
  display:block;
  text-align:left;
  cursor:left;
  background: #f0f0f0;
  -webkit-appearance: none;
  background:
    linear-gradient(to left, black, black)  no-repeat,    
    linear-gradient(to top, black, black)  no-repeat,    
    linear-gradient(to right, black, black) no-repeat,    
    linear-gradient(to bottom, black, black)  no-repeat
    ;
  background-position: left bottom  ,right 100px , 500px top,left -100px ; 
  background-size: 100% 2px, 2px 100%;
  animation : bordout 0.5s linear reverse;
}
textarea:hover {
  animation : bordin 0.5s linear forwards;
}
@keyframes bordin {
  33% {
    background-position: left bottom  ,right 0, 500px top, left -100px;
  } 
  66% {
    background-position: left bottom  ,right 0 , 0 top, left -100px;
  }
  100%  {
    background-position: left bottom  ,right 0 , 0 top, left 0;
  }
}
@keyframes bordout {
  33% {
    background-position: left bottom  ,right 0, 500px top, left -100px;
  } 
  66% {
    background-position: left bottom  ,right 0 , 0 top, left -100px;
  }
  100%  {
    background-position: left bottom  ,right 0 , 0 top, left 0;
  }

}

<textarea placeholder="message"></textarea>

or inside a codepen (with auto prefix) to play with