body, html {

    width: 100%;

    height: 100%;

    display: flex;

    background: #000;

}

​

div {

    width: 80vh;

    height: 80vh;

    border-radius: 50%;

    margin: auto;

    background: linear-gradient(#fff, #999, #ddd, #888);

    background-clip: text;

    color: transparent;

    font-size: 30vmin;

    text-align: center;

    line-height: 80vh;

    // transition: 3s all;

}

​

body:hover {

    filter: url('#filter');

    cursor: pointer;

    div {

        animation: blurChange 2s ease-out forwards;

    }

}

​

@keyframes blurChange {

    100% {

        filter: blur(15px) contrast(200%);

    }

}

var filter = document.querySelector("#turbulence");

var frames = 1;

var rad = Math.PI / 180;

var bfx, bfy;

​

function freqAnimation() {

    frames += .2

​

    bfx = 0.03;

    bfy = 0.03;

​

    bfx += 0.005 * Math.cos(frames * rad);

    bfy += 0.005 * Math.sin(frames * rad);

​

    bf = bfx.toString() + " " + bfy.toString();

    // displacement.setAttributeNS(null, 'scale', frames);

    filter.setAttributeNS(null, "baseFrequency", bf);

​

    window.requestAnimationFrame(freqAnimation);

}

​

window.requestAnimationFrame(freqAnimation);

​