.wrapper
    form.form-example
        input.input(id='email' type='text', placeholder='email')
        input.input(id='password' type='password', placeholder='password')
        svg.svg(viewBox='0 0 100 100')
            path(id='path' stroke='#fff' fill='none' d='m10 19 L 90 19 C 97 19, 97 36, 90 36 L 10 36' stroke-linecap='round' stroke-dasharray='80 185' stroke-dashoffset='81')
        
View Compiled
@import url('https://fonts.googleapis.com/css?family=Acme');

body {
    background: #260F26;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.wrapper {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    background: #361F36;
    box-shadow: 0 0 1rem rgba(0, 0, 0, .5);
}

.form-example {
    position: relative;
    padding: 2rem 3rem;
    width: 30rem;
    
    > .input {
        width: 100%;
        padding: 1rem 0;
        margin: 1rem 0;
        background: #361F36;
        color: #fff;
        border: none;
        outline: none;
        font-family: 'Acme', sans-serif;
        
        &:focus {
            &::placeholder {
                opacity: .3;
            }
        }
        
        &::placeholder {
            color: #fff;
            opacity: .8;
            font-family: 'Acme', sans-serif;
            transition: opacity .2s ease;
        }
    }
    
    > .svg {
        position: absolute;
        top: 0;
        left: 0;
        width: 30rem;
        height: 30rem;
        pointer-events: none;
    }
}
View Compiled
let email = document.getElementById('email'),
    password = document.getElementById('password');

let currentAnimation = null;

email.addEventListener('focus', () => {
    if (currentAnimation) {
        currentAnimation.pause();
    }
    
    currentAnimation = anime({
        targets: '#path',
        strokeDashoffset: 0,
        easing: 'easeInOutQuart'
    })
});

email.addEventListener('blur', () => {
    if (currentAnimation) {
        currentAnimation.pause();
    }
    
    currentAnimation = anime({
        targets: '#path',
        strokeDashoffset: 81,
        easing: 'easeInOutQuart'
    })
});

password.addEventListener('focus', () => {
    if (currentAnimation) {
        currentAnimation.pause();
    }
    
    currentAnimation = anime({
        targets: '#path',
        strokeDashoffset: -102,
        easing: 'easeInOutQuart'
    })
});

password.addEventListener('blur', () => {
    if (currentAnimation) {
        currentAnimation.pause();
    }
    
    currentAnimation = anime({
        targets: '#path',
        strokeDashoffset: 81,
        easing: 'easeInOutQuart'
    })
});
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js