Dolphin's Trigonometry :: WordPress Login Form :: adapted by brasofilo, original code by https://codepen.io/bleepbloop/pen/dyybMq

inject.html

<div class='container'>
  <div class='subcontainer'>
    <div class='half'>
      <div class='droplet'></div>
      <div class='splash'>
        <div class='splash-container'>
          <div class='circle'></div>
        </div>
      </div>
    </div>
    <div class='half'>
      <div class='droplet'></div>
      <div class='splash'>
        <div class='splash-container'>
          <div class='circle'></div>
        </div>
      </div>
    </div>
  </div>
</div>
<div id='credit'>art by <a href='https://codepen.io/bleepbloop/pen/dyybMq' target='_blank'>Max Gruson</a></div>

login.css

#login h1 { 
    display:none; 
}
#loginform {
    background: transparent;
}
#credit {
    position: fixed;
    right: 10px;
    bottom: 10px;
}

@keyframes up {
  0% {
    top: -135px;
  }
  100% {
    top: 135px;
  }
}
@keyframes down {
  0% {
    bottom: 135px;
  }
  100% {
    bottom: -135px;
  }
}
@keyframes rotate {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes jump {
  0% {
    bottom: -30px;
  }
  50% {
    bottom: -30px;
  }
  100% {
    bottom: 135px;
  }
}
@keyframes fade {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  51% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes spin1 {
  0% {
    transform: rotate(0);
  }
  75% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes spin2 {
  0% {
    transform: rotate(0);
  }
  75% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(-360deg);
  }
}
@keyframes dolphin {
  0% {
    transform: rotate(45deg);
  }
  75% {
    transform: rotate(45deg);
  }
  100% {
    transform: rotate(-70deg);
  }
}
@keyframes splash {
  0% {
    transform: scale(1, 0);
  }
  75% {
    transform: scale(1, 0);
  }
  100% {
    transform: scale(1, 1);
  }
}
@keyframes slide1 {
  0% {
    transform: translate(0);
  }
  52% {
    transform: translate(0);
  }
  100% {
    transform: translate(-75px);
  }
}
@keyframes slide2 {
  0% {
    transform: translate(0);
  }
  52% {
    transform: translate(0);
  }
  100% {
    transform: translate(75px);
  }
}
body, html {
  width: 100%;
  height: 100%;
}

body {
  margin: 0;
}

.container {
  overflow: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -999999;
}
.container .subcontainer {
  position: absolute;
  width: 100%;
  height: 100%;
  animation: rotate 4s linear infinite;
}
.container .subcontainer *, .container .subcontainer *:before, .container .subcontainer *:after {
  position: absolute;
  content: "";
  display: block;
}
.container .subcontainer .half {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.container .subcontainer .half .splash {
  height: 60px;
  width: 150px;
  bottom: 0;
  margin-bottom: -3px;
  left: 50%;
  margin-left: -75px;
  overflow: hidden;
}
.container .subcontainer .half .splash .splash-container {
  height: 100%;
  width: 100%;
  transform-origin: bottom center;
}
.container .subcontainer .half .splash .splash-container .circle {
  left: 50%;
  top: 30%;
  width: 27.27273px;
  height: 27.27273px;
  margin-top: -13.63636px;
  margin-left: -13.63636px;
  border-radius: 50%;
}
.container .subcontainer .half .splash .splash-container:before, .container .subcontainer .half .splash .splash-container:after {
  height: 70%;
  width: 50%;
}
.container .subcontainer .half .splash .splash-container:before {
  left: 0;
  bottom: 0;
  border-bottom-right-radius: 100%;
  margin-left: -13.63636px;
}
.container .subcontainer .half .splash .splash-container:after {
  right: 0;
  bottom: 0;
  border-bottom-left-radius: 100%;
  margin-right: -13.63636px;
}
.container .subcontainer .half .droplet {
  width: 30px;
  height: 30px;
  left: 50%;
  margin-left: -15px;
}
.container .subcontainer .half .droplet:before, .container .subcontainer .half .droplet:after {
  background-size: 100% 100%;
}
.container .subcontainer .half:nth-child(1) {
  box-shadow: 0 -150px 0 150px #141414;
  background-color: #141414;
  margin-top: -25%;
  animation: up 1s infinite alternate ease-in-out;
}
.container .subcontainer .half:nth-child(1) .splash {
  animation: slide1 1s infinite linear;
}
.container .subcontainer .half:nth-child(1) .splash .splash-container {
  animation: splash 1s infinite -.25s alternate;
}
.container .subcontainer .half:nth-child(1) .splash .splash-container .circle {
  background-color: #5db0c9;
}
.container .subcontainer .half:nth-child(1) .splash .splash-container:before, .container .subcontainer .half:nth-child(1) .splash .splash-container:after {
  box-shadow: 0 29.27273px 0 27.27273px #5db0c9;
}
.container .subcontainer .half:nth-child(1) .droplet {
  animation: jump 1s infinite alternate;
}
.container .subcontainer .half:nth-child(1) .droplet:before, .container .subcontainer .half:nth-child(1) .droplet:after {
  height: 100%;
  width: 100%;
}
.container .subcontainer .half:nth-child(1) .droplet:before {
  border-radius: 50%;
  background-color: #5db0c9;
  animation: fade 4s infinite;
}
.container .subcontainer .half:nth-child(1) .droplet:after {
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 10 10' xmlns='http://www.w3.org/2000/svg'><path fill='%235db0c9' d='M0,10L5,0L10,10Z'/></svg>");
  animation: fade 4s infinite -2s, spin1 4s infinite -2.5s linear;
}
.container .subcontainer .half:nth-child(2) {
  box-shadow: 0 -150px 0 150px #5db0c9;
  bottom: 0;
  margin-bottom: -25%;
  background-color: #5db0c9;
  transform: rotate(180deg);
  animation: down 1s infinite alternate ease-in-out;
}
.container .subcontainer .half:nth-child(2) .splash {
  animation: slide2 1s infinite -1s linear;
}
.container .subcontainer .half:nth-child(2) .splash .splash-container {
  animation: splash 1s infinite -1.25s alternate;
}
.container .subcontainer .half:nth-child(2) .splash .splash-container .circle {
  background-color: #141414;
}
.container .subcontainer .half:nth-child(2) .splash .splash-container:before, .container .subcontainer .half:nth-child(2) .splash .splash-container:after {
  box-shadow: 0 29.27273px 0 27.27273px #141414;
}
.container .subcontainer .half:nth-child(2) .droplet {
  animation: jump 1s infinite -1s alternate;
}
.container .subcontainer .half:nth-child(2) .droplet:before {
  height: 200%;
  width: 200%;
  left: -50%;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 419 281' xmlns='http://www.w3.org/2000/svg'><path fill='%23141414' d='m212.0052,5.32781c-7.8024,2.96131 -14.9229,6.90809 -22.0992,10.425c-2.4471,1.19639 -5.22542,3.1008 -7.49191,3.68309c-5.77739,1.47781 -14.81609,-1.10729 -22.179,-1.37699c-18.40649,-0.66899 -30.32219,0.7197 -45.45239,3.05969c-7.08029,1.09351 -14.4105,2.1165 -20.62619,3.9858c-5.3085,1.5984 -11.3964,5.1678 -17.33671,8.16899c-9.3879,4.74719 -15.7815,9.21451 -23.1009,14.93549c-12.2334,9.55801 -19.9362,21.58951 -28.88922,34.80841c-3.90819,5.7702 -9.54024,14.36819 -9.81912,21.1968c-5.175,8.04479 -13.03829,12.9561 -15.01056,24.7347c2.75742,6.88829 9.90351,0.76289 14.20899,-1.5303c3.56133,-1.902 7.39218,-4.1754 10.5492,-5.08739c16.40151,-4.74239 39.25791,2.03699 55.22571,-2.3085c5.6613,-1.5399 10.5633,-4.64761 16.1871,-5.96371c5.3403,-1.25369 9.4242,0.96451 13.2318,2.65201c2.02261,0.89999 4.1541,2.1153 5.9907,3.08309c11.898,6.30601 23.7888,12.9927 39.76289,15.51c12.82021,2.019 23.95889,-1.8318 34.38031,-3.9117c2.646,-0.52859 6.06209,-0.33751 8.06848,-2.6532c-8.31808,-1.9278 -15.22049,-5.2149 -23.90639,-8.7222c-11.4093,-4.6044 -20.2722,-7.7193 -24.5847,-16.96291c5.1069,-1.37251 11.02139,-0.35519 16.3383,0.6c5.80531,1.04041 11.5665,2.01541 17.13629,2.95651c23.5218,3.9714 41.23351,10.63949 59.1387,19.29149c8.69879,4.1988 16.71451,10.0452 24.08551,14.9553c15.0972,10.0665 27.98669,22.56691 40.14209,36.183c5.505,6.16621 10.41599,13.8855 16.38599,21.246c2.60703,3.21811 5.22903,6.8064 8.01901,10.77661c2.66098,3.77579 6.72601,8.4012 7.29001,11.7036c0.633,3.64319 -1.25403,7.64159 -2.202,11.62379c-1.64401,6.9234 -2.853,14.34599 -2.30402,21.45111c0.71701,9.19218 2.72104,18.14415 6.92102,25.1086c1.82098,-1.6629 2.56497,-4.58673 3.50098,-7.26801c4.60199,-6.03394 10.72501,-12.05856 10.87802,-22.10036c12.57001,6.66328 36.98401,6.10312 51.64499,5.9332c4.40698,-0.05275 8.89801,0.4254 12.54898,-1.33243c-7.69797,-4.57968 -13.34998,-10.37592 -20.04297,-16.28682c-10.125,-8.9355 -18.49802,-16.4637 -33.42603,-21.24359c-4.83899,-1.54921 -10.37698,-2.38831 -13.02896,-5.25931c-2.03702,-2.19749 -2.65805,-7.06529 -3.69003,-11.75159c-2.78101,-12.675 -6.39899,-26.1201 -9.621,-36.78511c-9.68097,-32.06039 -24.45297,-60.5544 -44.1084,-82.6842c-9.9585,-11.2218 -21.85529,-20.35889 -34.67789,-30.5202c-2.1915,-3.52379 -6.2955,-8.27941 -7.1451,-13.6548c-0.86821,-5.5335 0.69719,-10.39079 4.03139,-14.10809c7.29239,-5.4585 18.74762,-6.06211 23.7045,-14.23471c-6.47791,-4.78261 -14.51581,-6.1842   -22.4025,-6.96691c-17.04269,-1.6899 -33.0072,-0.37859 -46.2258,4.64072'/></svg>");
  animation: fade 4s infinite -1s, dolphin 4s infinite -1.5s ease-in-out;
}
.container .subcontainer .half:nth-child(2) .droplet:after {
  height: 100%;
  width: 100%;
  background-color: #141414;
  animation: fade 4s infinite -3s, spin2 4s infinite -3.5s linear;
}