<div class="container">
        <div class="search-wrapper">
            <div id="searchBox">
                <!-- <form action=""><input class="bubble" type="text" name="search" id="searcInput"></form> -->
                <div class="bubble"><p class="S" style="color: #4C83F0;">S</p></div>
                <div class="bubble" style="left: 50px;"><p style="color: #D1333B;">E</p></div>
                <div class="bubble" style="left: 100px;"><p style="color: #EEB80B;">A</p></div>
                <div class="bubble" style="left: 150px;"><p style="color: #4C83F0;">R</p></div>
                <div class="bubble" style="left: 200px;"><p style="color: #1CAF60;">C</p></div>
                <div class="bubble" style="left: 250px;"><p style="color: #D1333B;">H</p></div>
                <div class="bubble" style="left: 300px;"><p>🔎</p></div>
            </div>

        </div>
    </div>


    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <defs>
            <filter id="goo">
                <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
                <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
                <feComposite in="SourceGraphic" in2="goo" operator="atop" />
            </filter>
        </defs>
    </svg>

@import url('https://fonts.googleapis.com/css?family=Nunito:400,700,800,900');

* {
    /* border: 2px solid grey; */
}

body {
    margin: 0;
    height: 100vh;
    background: #ddeaff;
}

p {
    font-family: 'Nunito';
    font-weight: 800;
    color: #f9f9f9;
}

#searchBox {
    position: absolute;
    text-align: center;
    top: 20%;
}

#searchInput {
    /* display: none; */
    z-index: 999;
}

.container {
    position: relative;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
}

.search-wrapper {
    width: 350px;
    height: 100px;
    position: relative;
    top: 30%;

    -webkit-filter: url("#goo");
    filter: url("#goo");
}

.inputSearch {
    font-family: 'Nunito';
    font-weight: 800;
    width: 300px;
    height: 20px;
    border-radius: 10px;
    top: 0;
    margin-top: -10px;
    border: none;
    background: #333;
    outline: none;
    z-index: 2;
    color: #f9f9f9;
    cursor: auto;
}

.bubble {
    position: absolute;
    display: inline-block;
    margin: 0 -3px 0 -3px;
    text-align: center;
    width: 50px;
    height: 50px;
    background: #333;
    border-radius: 100%;
    transition: left 1s, width 1s, border-radius 1.5s, height 1s;
    z-index: -1;
}

.animate {
    animation-name: bubbling;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}

.S {
    transition: color 1s;
}

@keyframes bubbling {
    0% {
        transform: translateY(0px);
    }
    25% {
        transform: translateY(-10px);
    }
    50% {
        transform: translateY(10px);
    }
    100% {
        transform: translateY(0px);
    }
}

const bubbles = document.querySelectorAll('.bubble');
const bubblePosition = [0, 50]
const search = document.querySelector('.search-wrapper');
const S = document.querySelector('.S');
const input = document.createElement('input');
input.type = 'text';
input.className = 'inputSearch';
input.placeholder = '_ type something';
let counter = 0;
let distanceAll = [];

function bubbling() {
    if(counter < bubbles.length) {
        setTimeout(function() {
            bubbles[counter].classList.add('animate');
            let distance = ([counter] * 50) + 'px';
            distanceAll[counter] = distance;
            counter++;
            bubbling(counter);
        }, 80);
    }
}

bubbling();


search.addEventListener('mouseover', function() {
    console.log('ciao');
    bubbles[0].style = 'width: 350px; border-radius: 10px;  z-index: 1;';
    bubbles[0].classList.remove('animate');
    input.placeholder = '>';
    S.style.color = '#333333';
    setTimeout(() => {
        S.innerHTML = '';
        bubbles[0].appendChild(input);
        let inputAppended = document.querySelector('.inputSearch');
        inputAppended.focus();
        inputAppended.style = 'caret-color: transparent';
        inputAppended.addEventListener('keypress', (e) => {
            if(e.keyCode == 13) {
                console.log('Now I am removing text but you can do whatever you want with text value 😊');
                inputAppended.value = '';              
            }            
        });
    }, 1000);
});

search.addEventListener('mouseout', function() {
    console.log('ciao');
    let inputAppended = document.querySelector('.inputSearch');
    bubbles[0].style = '';
    bubbles[0].classList.add('animate');
    S.style.color = '#4C83F0';
    inputAppended.value = '';
    inputAppended.style = 'caret-color: transparent; z-index: -1;';
    input.placeholder = '';

    setTimeout(() => {
        bubbles[0].removeChild(input);
        S.innerHTML = 'S';
    }, 1000);
});