JSFiddle - React, Tailwind, and code Playground

by fergmux

HTML

<svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 854.56 300">
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <defs>
        <style>
            .cls-1,
            .cls-3,
            .cls-5,
            .cls-9{fill:none;}
            .cls-2{fill:#d88f0e;}
            .cls-3{stroke:#d88f0e;}
            .cls-11,
            .cls-3,
            .cls-5,
            .cls-9{stroke-miterlimit:10;}
            .cls-3,
            .cls-5{stroke-width:2px;}
            .cls-4{fill:#00a48a;}
            .cls-5{stroke:#004164;stroke-linecap:round;}
            .cls-6{fill:#f5933b;}
            .cls-7{fill:#00ceae;}
            .cls-8{clip-path:url(#clip-path);}
            .cls-11,
            .cls-9{stroke:#a3f0e0;}
            .cls-9{stroke-width:5.63px;}
            .cls-10{clip-path:url(#clip-path-2);}
            .cls-11{fill:#fff;stroke-width:8.45px;}
            .cls-12{fill:url(#Unbenannter_Verlauf_2);}
            .cls-13{clip-path:url(#clip-path-3);}
            .cls-14{fill:url(#Unbenannter_Verlauf_2-2);}
            .cls-15{fill:url(#Unbenannter_Verlauf_2-3);}
            .cls-16{fill:#004164;}
        </style>
        <clipPath id="clip-path">
            <path class="cls-1" d="M161.41,155.5,137.24,95.17,72.77,127.73c-.6.27-1.19.57-1.76.89l-.08,0h0c-9.41,5.44-13.52,18.3-8.44,31,5.31,13.27,18.24,20.16,29.36,17.06h0Z"/>
        </clipPath>
        <clipPath id="clip-path-2">
            <path class="cls-1" d="M250.61,134.41,216.34,48.86,124.92,95a27.83,27.83,0,0,0-2.5,1.26l-.11,0h0c-13.34,7.72-19.16,26-12,43.92,7.54,18.82,25.87,28.58,41.64,24.19h0Z"/>
        </clipPath>
        <linearGradient id="Unbenannter_Verlauf_2" x1="249.66" y1="738.1" x2="215.08" y2="678.95" gradientTransform="translate(-239.02 -480.27) rotate(-21.83)" gradientUnits="userSpaceOnUse">
            <stop offset="0.07" stop-color="#006796"/>
            <stop offset="1"...

CSS

body{
    padding:0;
    margin:0;
    background:#333;
}
.eye {
    width: 115px;
    width:13%;
    height: 13%;
    max-width: 100%;
    max-height: auto;
    background: rgb(255, 255, 255);
    position: absolute;
    top: 15.5%;
    left: 28.2%;
    transform: translate(-50%, -50%) rotate(45deg);
    border-radius: 60% 75%;
    overflow: hidden;
}
.fakeeye {
    width:50%;
    height: 50%;
    max-width: 100%;
    max-height: auto;
    background: rgb(255, 255, 255);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    border-radius: 60% 75%;
    overflow: hidden;
}
.ball{
    width:50%;
    height: 50%;
    background:#222f3e;
    border-radius:50%;
    border:18px solid #576574;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%) rotate(-45deg);          
}
.shut{
    width:125px;
    height:118px;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%) rotate(-45deg);
    z-index:999;
}
.shut span{
    display:block;
    width:100%;
    height:0%;
    background:#0072e2;
    border-radius: 0 0 60% 60%;
    transition:0.4s all;
}
.eye:hover > .shut span{
    height:100%;
}

JavaScript

var balls = document.getElementsByClassName("ball");
  document.onmousemove = function(){
    var x = event.clientX * 100 / window.innerWidth + "%";
    var y = event.clientY * 100 / window.innerHeight + "%";

    for(var i=0;i<2;i++){
      balls[i].style.left = x;
      balls[i].style.top = y;
      
      balls[i].style.transform = "translate(-"+x+",-"+y+")"
    }
  }