JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
            <div class="circle"></div>
        </div>

CSS

#container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url(http://40.media.tumblr.com/b96c494a053a6f20a7cb7af1ca9b6f98/tumblr_inline_nn85tpbQkq1rewzq7_500.png);
    background-position: center center;
    transition: all 0.6s;

    background-size: 200px;

}

.circle {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -50px 0 0 -50px;
    width: 100px;
    height: 100px;
    border: #000000 solid 2px;
    border-radius: 100px/100px;
    transition: all 0.6s;

    /*zoom: 2.00;
    -moz-transform: scale(2.00);
    -webkit-transform: scale(2.00);*/

}

.horizontal-ellipse {
    margin: -40px 0 0 -50px;
    width: 100px;
    height: 80px;
    border-radius: 100px/80px;
}

.vertical-ellipse {
    margin: -50px 0 0 -40px;
    width: 80px;
    height: 100px;
    border-radius: 80px/100px;
}

JavaScript

var
        container = document.querySelector('#container'),
        item = document.querySelector('#container .circle'),
        gridPositionX = 0,
        gridPositionY = 0;

    if (item) {
        function xxx()
        {
            setTimeout(function() {
                item.className = 'circle vertical-ellipse';
                setTimeout(function() {
                    item.className = 'circle horizontal-ellipse';
                    xxx();
                }, 400);
            }, 400);
        }
        xxx();
        document.onmousemove = function(e) {
            gridPositionX = -e.clientX;
            gridPositionY = -e.clientY;
            container.style.backgroundPosition = gridPositionX + 'px ' + gridPositionY + 'px';
            //console.log(e.clientY, window.innerHeight, e.clientX, window.innerWidth);
        }
    }

    setTimeout(function() {
        container.style.backgroundSize = '100px';
    }, 4000);