CodePen Embed - URL Favicon Input

<div class="url-input">
    <div class="icon">
        <svg viewBox="0 0 18 18">
            <path d="M10.05 7.95001C11.55 9.45001 11.55 11.775 10.05 13.275L7.95 15.375C6.45 16.875 4.125 16.875 2.625 15.375C1.125 13.875 1.125 11.55 2.625 10.05L4.5 8.25001" />
            <path d="M7.9502 10.05C6.4502 8.55 6.4502 6.225 7.9502 4.725L10.0502 2.625C11.5502 1.125 13.8752 1.125 15.3752 2.625C16.8752 4.125 16.8752 6.45 15.3752 7.95L13.5002 9.75" />
        </svg>
        <div class="favicon"></div>
    </div>
    <div class="text">
        <input type="text" placeholder="Your URL" />
    </div>
    <button class="clear">
        <svg viewBox="0 0 24 24">
            <path class="line" d="M2 2L22 22" />
            <path class="long" d="M9 15L20 4" />
            <path class="arrow" d="M13 11V7" />
            <path class="arrow" d="M17 11H13" />
        </svg>
    </button>
</div>

<!-- dribbble - twitter -->
<a class="dribbble" href="https://dribbble.com/ai" target="_blank"><img src="https://cdn.dribbble.com/assets/dribbble-ball-mark-2bd45f09c2fb58dbbfb44766d5d1d07c5a12972d602ef8b32204d28fa3dda554.svg" alt=""></a>
<a class="twitter" target="_top" href="https://twitter.com/aaroniker_me"><svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" viewBox="0 0 72 72"><path d="M67.812 16.141a26.246 26.246 0 0 1-7.519 2.06 13.134 13.134 0 0 0 5.756-7.244 26.127 26.127 0 0 1-8.313 3.176A13.075 13.075 0 0 0 48.182 10c-7.229 0-13.092 5.861-13.092 13.093 0 1.026.118 2.021.338 2.981-10.885-.548-20.528-5.757-26.987-13.679a13.048 13.048 0 0 0-1.771 6.581c0 4.542 2.312 8.551 5.824 10.898a13.048 13.048 0 0 1-5.93-1.638c-.002.055-.002.11-.002.162 0 6.345 4.513 11.638 10.504 12.84a13.177 13.177 0 0 1-3.449.457c-.846 0-1.667-.078-2.465-.231 1.667 5.2 6.499 8.986 12.23 9.09a26.276 26.276 0 0 1-16.26 5.606A26.21 26.21 0 0 1 4 55.976a37.036 37.036 0 0 0 20.067 5.882c24.083 0 37.251-19.949 37.251-37.249 0-.566-.014-1.134-.039-1.694a26.597 26.597 0 0 0 6.533-6.774z"></path></svg></a>

.url-input {
    --background: #fff;
    --border-default: #E1E6F9;
    --border-active: #275EFE;
    --text-color: #646B8C;
    --placeholder-color: #BBC1E1;
    --icon: #275EFE;
    --close: #646B8C;
    --close-light: #A6ACCD;
    --close-background: #EFF2FB;
    width: 100%;
    max-width: 240px;
    display: flex;
    align-items: center;
    position: relative;
    border-radius: 8px;
    background: var(--background);
    box-shadow: inset 0 0 0 var(--border-width, 1px) var(--border, var(--border-default));
    transition: box-shadow .2s;
    --favicon-scale: 0;
    --icon-offset: 0px;
    --clear-x: 0px;
    --clear-swipe-left: 0px;
    --clear-swipe-x: 0;
    --clear-swipe: 0px;
    --clear-scale: 0;
    --clear-rotate: 0deg;
    --clear-opacity: 0;
    --clear-arrow-o: 1;
    --clear-arrow-x: 0px;
    --clear-arrow-y: 0px;
    --clear-arrow-offset: 4px;
    --clear-arrow-offset-second: 4px;
    --clear-line-array: 8.5px;
    --clear-line-offset: 27px;
    --clear-long-array: 8.5px;
    --clear-long-offset: 24px;
    &.clearing,
    &:focus-within {
        --border-width: 1.5px;
        --border: var(--border-active);
    }
    &.clearing {
        --close-background: transparent;
        --clear-arrow-stroke: var(--close-light);
    }
    .icon {
        position: absolute;
        left: 15px;
        top: 15px;
        pointer-events: none;
        svg,
        img {
            display: block;
            width: 18px;
            height: 18px;
        }
        svg {
            fill: none;
            stroke-width: 1.5;
            stroke-linecap: round;
            stroke-linejoin: round;
            stroke: var(--icon);
            path {
                stroke-dasharray: 24px;
                stroke-dashoffset: var(--icon-offset);
            }
        }
        .favicon {
            position: absolute;
            left: 0;
            top: 0;
            transform: scale(var(--favicon-scale)) translateZ(0);
        }
    }
    .text {
        flex-grow: 1;
        input {
            -webkit-appearance: none;
            line-height: 24px;
            background: none;
            border: none;
            outline: none;
            display: block;
            width: 100%;
            margin: 0;
            padding: 12px 12px 12px 44px;
            font-family: inherit;
            font-size: 14px;
            font-weight: 500;
            color: var(--text-color);
            &::placeholder {
                color: var(--placeholder-color);
            }
        }
    }
    .clear {
        -webkit-appearance: none;
        position: relative;
        z-index: 1;
        padding: 0;
        margin: 12px 12px 12px 0;
        border: none;
        outline: none;
        background: var(--b, transparent);
        transition: background .2s;
        border-radius: 6px;
        opacity: var(--clear-opacity);
        transform: scale(var(--clear-scale)) translateZ(0);
        &:before {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            right: 12px;
            left: var(--clear-swipe-left);
            background: var(--background);
            transform-origin: 100% 50%;
            transform: translateX(var(--clear-swipe)) scaleX(var(--clear-swipe-x)) translateZ(0);
        }
        svg {
            display: block;
            position: relative;
            z-index: 1;
            width: 24px;
            height: 24px;
            outline: none;
            cursor: pointer;
            fill: none;
            stroke-width: 1.5;
            stroke-linecap: round;
            stroke-linejoin: round;
            stroke: var(--close);
            transform: translateX(var(--clear-x)) rotate(var(--clear-rotate)) translateZ(0);
            path {
                transition: stroke .2s;
                &.arrow {
                    stroke: var(--clear-arrow-stroke, var(--close));
                    stroke-dasharray: 4px;
                    stroke-dashoffset: var(--clear-arrow-offset);
                    opacity: var(--clear-arrow-o);
                    transform: translate(var(--clear-arrow-x), var(--clear-arrow-y)) translateZ(0);
                    &:last-child {
                        stroke-dashoffset: var(--clear-arrow-offset-second);
                    }
                }
                &.line {
                    stroke-dasharray: var(--clear-line-array) 28.5px;
                    stroke-dashoffset: var(--clear-line-offset);
                }
                &.long {
                    stroke: var(--clear-arrow-stroke, var(--close));
                    stroke-dasharray: var(--clear-long-array) 15.5px;
                    stroke-dashoffset: var(--clear-long-offset);
                    opacity: var(--clear-arrow-o);
                    transform: translate(var(--clear-arrow-x), var(--clear-arrow-y)) translateZ(0);
                }
            }
        }
        &:hover {
            --b: var(--close-background);
        }
    }
}

html {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

* {
    box-sizing: inherit;
    &:before,
    &:after {
        box-sizing: inherit;
    }
}

// Center & dribbble
body {
    min-height: 100vh;
    display: flex;
    font-family: 'Inter', Arial;
    justify-content: center;
    align-items: center;
    background: #F6F8FF;
    .dribbble {
        position: fixed;
        display: block;
        right: 20px;
        bottom: 20px;
        img {
            display: block;
            height: 28px;
        }
    }
    .twitter {
        position: fixed;
        display: block;
        right: 64px;
        bottom: 14px;
        svg {
            width: 32px;
            height: 32px;
            fill: #1da1f2;
        }
    }
}

View Compiled

const { to, set, timeline } = gsap

function validURL(str) {
    let pattern = new RegExp('^(https?:\\/\\/)?'+
        '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|'+
        '((\\d{1,3}\\.){3}\\d{1,3}))'+
        '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*'+
        '(\\?[;&a-z\\d%_.~+=-]*)?'+
        '(\\#[-a-z\\d_]*)?$','i')
    return !!pattern.test(str)
}

function delay(fn, ms) {
    let timer = 0
    return function(...args) {
        clearTimeout(timer)
        timer = setTimeout(fn.bind(this, ...args), ms || 0)
    }
}

document.querySelectorAll('.url-input').forEach(elem => {
    let icon = elem.querySelector('.icon'),
        favicon = icon.querySelector('.favicon'),
        clear = elem.querySelector('.clear'),
        input = elem.querySelector('input'),
        { classList } = elem,
        svgLine = clear.querySelector('.line'),
        svgLineProxy = new Proxy({
            x: null
        }, {
            set(target, key, value) {
                target[key] = value
                if(target.x !== null) {
                    svgLine.setAttribute('d', getPath(target.x, .1925))
                }
                return true
            },
            get(target, key) {
                return target[key]
            }
        })

    svgLineProxy.x = 0

    input.addEventListener('input', delay(e => {
        let bool = input.value.length,
            valid = validURL(input.value)
        to(elem, {
            '--clear-scale': bool ? 1 : 0,
            duration: bool ? .5 : .15,
            ease: bool ? 'elastic.out(1, .7)' : 'none'
        })
        to(elem, {
            '--clear-opacity': bool ? 1 : 0,
            duration: .15
        })
        to(elem, {
            '--icon-offset': valid ? '24px' : '0px',
            duration: .15,
            delay: valid ? 0 : .2
        })
        if(valid) {
            if(favicon.querySelector('img')) {
                favicon.querySelector('img').src = 'https://f1.allesedv.com/64/' + input.value
                return
            }
            let img = new Image()
            img.onload = () => {
                favicon.appendChild(img)
                to(elem, {
                    '--favicon-scale': 1,
                    duration: .5,
                    delay: .2,
                    ease: 'elastic.out(1, .7)'
                })
            }
            img.src = 'https://f1.allesedv.com/64/' + input.value
        } else {
            if(favicon.querySelector('img')) {
                to(elem, {
                    '--favicon-scale': 0,
                    duration: .15,
                    onComplete() {
                        favicon.querySelector('img').remove()
                    }
                })
            }
        }
    }, 250))

    clear.addEventListener('click', e => {
        classList.add('clearing')
        set(elem, {
            '--clear-swipe-left': (input.offsetWidth - 44) * -1 + 'px'
        })
        to(elem, {
            keyframes: [{
                '--clear-rotate': '45deg',
                duration: .25
            }, {
                '--clear-arrow-x': '2px',
                '--clear-arrow-y': '-2px',
                duration: .15
            }, {
                '--clear-arrow-x': '-3px',
                '--clear-arrow-y': '3px',
                '--clear-swipe': '-3px',
                duration: .15,
                onStart() {
                    to(svgLineProxy, {
                        x: 3,
                        duration: .1,
                        delay: .05
                    })
                }
            }, {
                '--clear-swipe-x': 1,
                '--clear-x': (input.offsetWidth - 32) * -1 + 'px',
                duration: .45,
                onComplete() {
                    input.value = ''
                    input.focus()
                    if(favicon.querySelector('img')) {
                        to(elem, {
                            '--favicon-scale': 0,
                            duration: .15,
                            onComplete() {
                                favicon.querySelector('img').remove()
                            }
                        })
                        to(elem, {
                            '--icon-offset': '0px',
                            '--icon-offset-line': '0px',
                            duration: .15,
                            delay: .2
                        })
                    }
                    to(elem, {
                        '--clear-arrow-offset': '4px',
                        '--clear-arrow-offset-second': '4px',
                        '--clear-line-array': '8.5px',
                        '--clear-line-offset': '27px',
                        '--clear-long-offset': '24px',
                        '--clear-rotate': '0deg',
                        '--clear-arrow-o': 1,
                        duration: 0,
                        delay: .7,
                        onStart() {
                            classList.remove('clearing')
                        }
                    })
                    to(elem, {
                        '--clear-opacity': 0,
                        duration: .2,
                        delay: .55
                    })
                    to(elem, {
                        '--clear-arrow-o': 0,
                        '--clear-arrow-x': '0px',
                        '--clear-arrow-y': '0px',
                        '--clear-swipe': '0px',
                        duration: .15
                    })
                    to(svgLineProxy, {
                        x: 0,
                        duration: .45,
                        ease: 'elastic.out(1, .75)'
                    })
                }
            }, {
                '--clear-swipe-x': 0,
                '--clear-x': '0px',
                duration: .4,
                delay: .35
            }]
        })
        to(elem, {
            '--clear-arrow-offset': '0px',
            '--clear-arrow-offset-second': '8px',
            '--clear-line-array': '28.5px',
            '--clear-line-offset': '57px',
            '--clear-long-offset': '17px',
            duration: .2
        })
    })
})

function getPoint(point, i, a, smoothing) {
    let cp = (current, previous, next, reverse) => {
            let p = previous || current,
                n = next || current,
                o = {
                    length: Math.sqrt(Math.pow(n[0] - p[0], 2) + Math.pow(n[1] - p[1], 2)),
                    angle: Math.atan2(n[1] - p[1], n[0] - p[0])
                },
                angle = o.angle + (reverse ? Math.PI : 0),
                length = o.length * smoothing;
            return [current[0] + Math.cos(angle) * length, current[1] + Math.sin(angle) * length];
        },
        cps = cp(a[i - 1], a[i - 2], point, false),
        cpe = cp(point, a[i - 1], a[i + 1], true);
    return `C ${cps[0]},${cps[1]} ${cpe[0]},${cpe[1]} ${point[0]},${point[1]}`;
}

function getPath(x, smoothing) {
    return [
        [2, 2],
        [12 - x, 12 + x],
        [22, 22]
    ].reduce((acc, point, i, a) => i === 0 ? `M ${point[0]},${point[1]}` : `${acc} ${getPoint(point, i, a, smoothing)}`, '')
}

This Pen is owned by Aaron Iker on CodePen.

See more by @aaroniker on CodePen

External CSS

https://fonts.googleapis.com/css?family=Inter:400,500,600,700&display=swap

External JavaScript

https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.0/gsap.min.js