<label for="inp" class="inp">
  <input type="password" id="inp" placeholder="Password" pattern=".{6,}" required>
  <svg width="280px" height="18px" viewBox="0 0 280 18" class="border">
    <path d="M0,12 L223.166144,12 C217.241379,12 217.899687,12 225.141066,12 C236.003135,12 241.9279,12 249.827586,12 C257.727273,12 264.639498,12 274.514107,12 C281.097179,12 281.755486,12 276.489028,12"></path>
  </svg>
  <svg width="14px" height="12px" viewBox="0 0 14 12" class="check">
    <path d="M1 7 5.5 11 L13 1"></path>
  </svg>
</label>
</form>
$primary = #0077FF

html, body
  height: 100%

body
  display: grid
  font-family: Avenir
  -webkit-text-size-adjust: 100%
  -webkit-font-smoothing: antialiased
  overflow: hidden
  
*
  box-sizing: border-box
  
.inp
  position: relative
  margin: auto
  width: 100%
  max-width: 280px
  height: 53px
  .border
    position: absolute
    left: 0
    bottom: 0
    height: 18px
    fill: none
    path
      stroke: #C8CCD4
      stroke-width: 2
      d
        transition: all .2s ease
  .check
    position: absolute
    top: 20px
    right: 20px
    fill: none
    transform: translate(0,9px) scale(0)
    transition: all .3s cubic-bezier(.5, .9, .25, 1.3)
    transition-delay: .15s
    path
      stroke: $primary
      stroke-width: 2 

  input
    -webkit-appearance: none
    width: 100%
    border: 0
    font-family: inherit
    padding: 0
    height: 48px
    font-size: 16px
    font-weight: 500
    background: none
    border-radius: 0
    color: #223254
    transition: all .15s ease
    &:focus
      outline: none
      + .border path
        stroke: $primary
    &:valid
      + .border 
        path
          animation: elasticInput .8s ease forwards
        + .check
          transform: translate(0,0) scale(1)
        
::placeholder
  color: #9098A9
      
@keyframes elasticInput
  33%
    d: path("M0,12 L226,12 C220,12 220.666667,12 228,12 C239,12 245,1 253,1 C261,1 268,12 278,12 C284.666667,12 285.333333,12 280,12")
  66%
    d: path("M0,12 L226,12 C220,12 220.666667,12 228,12 C239,12 245,17 253,17 C261,17 268,12 278,12 C284.666667,12 285.333333,12 280,12")
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.