JSFiddle - React, Tailwind, and code Playground

by Сергей Тарасевич

HTML

<div class="bgav">
    <!-- circular ellipse rectangular rounded_rectangular -->
    <div id="circular" class="eyes">
        <div class="left_eye">
            <div class="pupil"></div>
        </div>
        <div class="right_eye">
            <div class="pupil"></div>
        </div>
    </div>
</div>

CSS

body {
    padding-top: 50px;
    text-align: center;
}
div.bgav {
    background: #f6f6f6 url('https://scontent-frx5-1.cdninstagram.com/vp/8a3e58b56565dd9d35afed642d242427/5CA17E95/t51.2885-15/sh0.08/e35/s640x640/44487674_1429559050509019_2069583763854462187_n.jpg') 0 0 no-repeat;
    background-size: 100%;
    margin: 0 auto;
    position: relative;
    height: 800px;
    width: 800px;
}
div.eyes {
left: 175px;
    position: absolute;
    top: 140px;
    height: 70px;
    width: 215px;
}
div.left_eye, div.right_eye {
    width: 50px;
    height: 50px;
    top: 0;
    position: absolute;
    background-repeat: no-repeat;
    background-position: center center;
}
div.left_eye {
    left: 7px;
    top: 9px;
}
div.right_eye {
right: 16px;
    top: 25px;
}
div.eyes div.pupil {
    left: 13px;
    top: 13px;
    width: 9px;
    height: 9px;
    position: relative;
    background: #883213;
    border: 8px solid #FF4400;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
}
#circular div.left_eye, #circular div.right_eye {
    background: #95828D;
    border: 5px solid #282933;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
}
#ellipse div.left_eye, #ellipse div.right_eye {
    background-image: url("http://i.imgur.com/HLTwbEI.png");
}
#rectangular div.left_eye, #rectangular div.right_eye {
    background-image: url("http://i.imgur.com/lWwTCok.png");
}
#rounded_rectangular div.left_eye, #rounded_rectangular div.right_eye {
    background-image: url("http://i.imgur.com/bCmoBfN.png");
}

JavaScript

// Invoke jqEye method when the page is loaded.
jQuery(document).ready(function () {
    jQuery("#circular div.pupil").jqEye({
        shape: "circle",
        radius: 12
    });
    jQuery("#ellipse div.pupil").jqEye({
        shape: "ellipse",
        width: 34,
        height: 14
    });
    jQuery("#rectangular div.pupil").jqEye({
        shape: "rectangle",
        width: 25,
        height: 25
    });
    jQuery("#rounded_rectangular div.pupil").jqEye({
        shape: "rounded rectangle",
        width: 25,
        height: 25,
        radius: 5
    });
});

// jqEye plugin's definition
(function (e) {
    e.fn.jqEye = function (t) {
        function r(e, t, n, r) {
            var i = {
                x: e,
                y: t
            };
            if (e > n / 2) i.x = n / 2;
            if (e < -n / 2) i.x = -n / 2;
            if (t > r / 2) i.y = r / 2;
            if (t < -r / 2) i.y = -r / 2;
            return i
        }

        function i(e, t, n) {
            var r = {
                x: e,
                y: t
            };
            if (e * e + t * t > n * n) {
                if (e !== 0) {
                    var i = t / e;
                    r.x = Math.sqrt(n * n / (i * i + 1));
                    r.x = e > 0 ? r.x : -r.x;
                    r.y = Math.abs(i * r.x);
                    r.y = t > 0 ? r.y : -r.y
                } else {
                    r.y = t > 0 ? n : -n
                }
            }
            return r
        }

        function s(e, t, n, r) {
            var i = {
                x: e,
                y: t
            };
            if (e * e / (n * n) + t * t / (r * r) > 1) {
                if (e !== 0) {
                    var s = t / e;
                    i.x = Math.sqrt(1 / (1 / (n * n) + s * s / (r * r)));
                    i.x = e > 0 ? i.x : -i.x;
                    i.y = Math.abs(s * i.x);
                    i.y = t > 0 ? i.y : -i.y
                } else {
                    i.y = t >...