JSFiddle - React, Tailwind, and code Playground

by karthick6891

HTML

<!-- circle follow -->

<div class="eye"></div>

CSS

body {
  background-color: grey;
  position: relative;
}
.eye {
  border-radius: 50%;
     height: 60px;
    width: 60px;
      background: radial-gradient(ellipse at center,#3fc3ef 0,#2a8ace 76%,#2b3d60 92%,#2b3d60 100%);
      position: absolute;
          top: 95px;
    left: 30px;
}

.eye:after {
      position: absolute;
    bottom: 17px;
    left: 10px;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    content: " ";
    background: #fff;
    background: radial-gradient(ellipse at center,#fff 0,#fff 16%,rgba(255,255,255,0) 77%,rgba(255,255,255,0) 92%);
}

JavaScript

$("html").mousemove(function(e) {
        var t = $(".eye")
          , i = t.offset().left + t.width() / 2
          , n = t.offset().top + t.height() / 2
          , s = -1 * Math.atan2(e.pageX - i, e.pageY - n) + Math.PI;
        t.css({
            "-webkit-transform": "rotate(" + s + "rad)",
            "-moz-transform": "rotate(" + s + "rad)",
            "-ms-transform": "rotate(" + s + "rad)",
            transform: "rotate(" + s + "rad)"
        })
    });