<div class="container">
  <svg class='logo' width="1375px" height="1377px" viewBox="0 0 1375 1377" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 55.1 (78136) - https://sketchapp.com -->
    <title>loceye</title>
    <desc>Created with Sketch.</desc>
    <defs>
        <linearGradient x1="16.0430224%" y1="33.6662103%" x2="74.352187%" y2="65.2606008%" id="linearGradient-1">
            <stop stop-color="#9ED090" offset="0%"></stop>
            <stop stop-color="#4D9487" offset="49.74%"></stop>
            <stop stop-color="#005B7F" offset="100%"></stop>
        </linearGradient>
        <linearGradient x1="20.7143576%" y1="83.3468641%" x2="68.7905542%" y2="-2.43421508%" id="linearGradient-2">
            <stop stop-color="#005B7F" offset="0%"></stop>
            <stop stop-color="#4D9487" offset="50.26%"></stop>
            <stop stop-color="#9ED090" offset="100%"></stop>
        </linearGradient>
        <linearGradient x1="102.348222%" y1="47.5546335%" x2="3.23767873%" y2="56.5753346%" id="linearGradient-3">
            <stop stop-color="#9ED090" offset="0%"></stop>
            <stop stop-color="#4D9487" offset="49.74%"></stop>
            <stop stop-color="#005B7F" offset="100%"></stop>
        </linearGradient>
        <linearGradient x1="14.0245593%" y1="82.8621759%" x2="85.9835837%" y2="17.1369229%" id="linearGradient-4">
            <stop stop-color="#838587" offset="0%"></stop>
            <stop stop-color="#00B58D" offset="0%"></stop>
            <stop stop-color="#05B68F" stop-opacity="0.8878" offset="11.22%"></stop>
            <stop stop-color="#12BA95" stop-opacity="0.7638" offset="23.62%"></stop>
            <stop stop-color="#28C19F" stop-opacity="0.634" offset="36.6%"></stop>
            <stop stop-color="#47CAAD" stop-opacity="0.5003" offset="49.97%"></stop>
            <stop stop-color="#6FD5BF" stop-opacity="0.3636" offset="63.64%"></stop>
            <stop stop-color="#A0E3D4" stop-opacity="0.2243" offset="77.57%"></stop>
            <stop stop-color="#D8F4EE" stop-opacity="0.08548766" offset="91.45%"></stop>
            <stop stop-color="#FFFFFF" stop-opacity="0" offset="100%"></stop>
        </linearGradient>
        <radialGradient cx="65.9313699%" cy="31.5106896%" fx="65.9313699%" fy="31.5106896%" r="64.8259498%" gradientTransform="translate(0.659314,0.315107),scale(1.000000,0.925282),rotate(-45.783266),translate(-0.659314,-0.315107)" id="radialGradient-5">
            <stop stop-color="#838587" offset="0%"></stop>
            <stop stop-color="#898B8D" offset="0%"></stop>
            <stop stop-color="#737476" offset="4.661924%"></stop>
            <stop stop-color="#5B5A5B" offset="11.5%"></stop>
            <stop stop-color="#464445" offset="19.35%"></stop>
            <stop stop-color="#363334" offset="28.53%"></stop>
            <stop stop-color="#2B2829" offset="39.88%"></stop>
            <stop stop-color="#252122" offset="55.8%"></stop>
            <stop stop-color="#231F20" offset="100%"></stop>
        </radialGradient>
    </defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Logo" transform="translate(-50.000000, -50.000000)" fill-rule="nonzero">
            <g id="loceye" transform="translate(50.000000, 50.000000)">
                <g id="Outline">
                    <path d="M1168.1,534.3 C1274.1,866.3 1114.3,1219.4 807.5,1364 C837,1358.7 866.5,1351.4 895.9,1342.1 C1257.2,1226.8 1456.6,840.3 1341.2,479 C1225.9,117.7 839.4,-81.7 478.2,33.7 C448.8,43.1 420.6,54.3 393.4,67 C727.3,7.1 1062.1,202.3 1168.1,534.3 Z" id="Top-Right" fill="url(#linearGradient-1)"></path>
                    <path d="M245.5,442.4 C415,137.9 781.8,12.6 1097.3,137.3 C1073.2,119.4 1047.7,102.9 1020.8,87.9 C689.4,-96.6 271.2,22.6 86.8,354 C-97.6,685.4 21.5,1103.6 352.9,1288 C379.8,1303 407.3,1315.9 435.2,1326.9 C163,1124.6 76.1,746.9 245.5,442.4 Z" id="Top-Left" fill="url(#linearGradient-2)"></path>
                    <path d="M780.2,1186.6 C437.6,1250.5 107.1,1048.1 1.7,725.6 C3.3,755.5 6.8,785.7 12.4,816 C82,1188.8 440.6,1434.7 813.5,1365.1 C1186.3,1295.6 1432.2,936.9 1362.6,564.1 C1357,533.8 1349.4,504.4 1340,475.9 C1358.1,814.7 1122.8,1122.7 780.2,1186.6 Z" id="Bottom" fill="url(#linearGradient-3)"></path>
                </g>
                <g id="Bolb" transform="translate(519.000000, 269.000000)">
                    <path d="M286.8,631.6 C117.1,620.1 -11,469.8 0.8,295.8 C12.5,121.8 159.6,-9.9 329.4,1.6 C499.1,13.1 627.1,163.4 615.4,337.4 C603.6,511.3 456.5,643.1 286.8,631.6 Z" id="Ciliy-Background" fill="#FFFFFF"></path>
                    <path d="M286.8,631.6 C117.1,620.1 -11,469.8 0.8,295.8 C12.5,121.8 159.6,-9.9 329.4,1.6 C499.1,13.1 627.1,163.4 615.4,337.4 C603.6,511.3 456.5,643.1 286.8,631.6 Z" id="Ciliy" fill="url(#linearGradient-4)"></path>
                    <path d="M558.5,184.1 C598.7,276.1 564.8,379.7 482.8,415.6 C400.8,451.5 301.7,406 261.4,314 C221.2,222 255.1,118.4 337.1,82.5 C419.2,46.6 518.3,92.1 558.5,184.1 Z" id="Iris" fill="url(#radialGradient-5)"></path>
                    <g id="Cornea" transform="translate(371.000000, 129.000000)" fill="#FFFFFF">
                        <path d="M132.2,22.3 C144.6,42.9 139.3,68.8 120.4,80.1 C101.5,91.5 76.2,84 63.8,63.5 C51.4,42.9 56.7,17 75.6,5.7 C94.4,-5.7 119.8,1.7 132.2,22.3 Z" id="Cornea-3"></path>
                        <path d="M47.9,56.6 C55.6,69.5 52.4,85.7 40.5,92.8 C28.7,99.9 12.8,95.3 5,82.4 C-2.7,69.5 0.6,53.3 12.4,46.2 C24.3,39.1 40.2,43.8 47.9,56.6 Z" id="Cornea-2"></path>
                        <path d="M110.7,105.8 C115.1,113.1 113.2,122.2 106.5,126.3 C99.8,130.3 90.9,127.7 86.5,120.4 C82.1,113.1 84,104 90.7,99.9 C97.3,95.9 106.3,98.5 110.7,105.8 Z" id="Cornea-1"></path>
                    </g>
                </g>
            </g>
        </g>
    </g>
  </svg>
  <div class="shadow"/></div>
</div>
:root {
  --drop-height: 200px;
  --logo-size: 48px;
  --offset: 100px;
  --shadow-height: 8px;
}

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
}

.container {
  width: 100%;
  height: 100%;
  background-color: white;
  position: relative;
}

.logo {
  width: var(--logo-size);
  height: var(--logo-size);
  
  position: absolute;
  top: var(--offset);
  left: calc(50% - var(--logo-size)/2);
  
  animation-name: bounce; 
  animation-duration: 0.5s;
  animation-direction: alternate;
  animation-timing-function: cubic-bezier(0.95, 0.05, 0.795, 0.035);
  animation-iteration-count: infinite;
}

.shadow {
  width: var(--logo-size);
  height: var(--shadow-height);
  background: radial-gradient(50% 50%, rgba(150,150,150,1), rgba(150,150,150,0.05));
  position: absolute;
  top: calc(var(--offset) + var(--drop-height) + var(--logo-size) - 1.5 * var(--shadow-height));
  left: calc(50% - var(--logo-size)/2);
  
  animation-name: grow; 
  animation-duration: 0.5s;
  animation-direction: alternate;
  animation-timing-function: cubic-bezier(0.95, 0.05, 0.795, 0.035);
  animation-iteration-count: infinite;
}

@keyframes bounce {
  from { 
    transform: translateY(0) scale(1);
  }
  to { 
    transform: translateY(var(--drop-height)) scale(1, 0.7);
  }
}

@keyframes grow {
  from {
    transform: scale(.2, 0.5);
  }

  to {
    transform: scale(1.5, 0.8);   
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.