Sarah's Badge by enjalot

index.html

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body {

  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #455772; /* Old browsers */
  background: -moz-linear-gradient(-45deg, #455772 0%, #6b8395 18%, #a0d0cc 35%, #a0d0cc 45%, #a0d0cc 60%, #56737c 81%, #293e56 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#455772), color-stop(18%,#6b8395), color-stop(35%,#a0d0cc), color-stop(45%,#a0d0cc), color-stop(60%,#a0d0cc), color-stop(81%,#56737c), color-stop(100%,#293e56)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(-45deg, #455772 0%,#6b8395 18%,#a0d0cc 35%,#a0d0cc 45%,#a0d0cc 60%,#56737c 81%,#293e56 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(-45deg, #455772 0%,#6b8395 18%,#a0d0cc 35%,#a0d0cc 45%,#a0d0cc 60%,#56737c 81%,#293e56 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(-45deg, #455772 0%,#6b8395 18%,#a0d0cc 35%,#a0d0cc 45%,#a0d0cc 60%,#56737c 81%,#293e56 100%); /* IE10+ */
  background: linear-gradient(135deg, #455772 0%,#6b8395 18%,#a0d0cc 35%,#a0d0cc 45%,#a0d0cc 60%,#56737c 81%,#293e56 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#455772', endColorstr='#293e56',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.accelerate {
  transform: translateZ(0);
  perspective: 1000;
  backface-visibility: hidden;
}

.particle1 {
  width: 200vw;
  height: 100vh;
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/particles2.png");
  @extend .accelerate;
  position: absolute;
  z-index: 1000;
  opacity: 0.45;
  overflow: hidden;
  animation: particleOne 200s linear infinite;
  filter: blur(4px) brightness(0.9);
  -webkit-filter: blur(4px) brightness(0.9);
}

.particle2 {
  width: 200vw;
  height: 100vh;
  filter: blur(1px) hue-rotate(-8deg);
  -webkit-filter: blur(1px) hue-rotate(-8deg);
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/particles3.png");
  @extend .accelerate;
  position: absolute;
  z-index: 1000;
  opacity: 0.45;
  overflow: hidden;
  animation: particleOne 260s linear infinite;
}

.orb {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/orb.png");
  width: 500px;
  height: 356px;
  position: absolute;
  @extend .accelerate;
  top: 20%;
  left: 50%;
  opacity: 0.8;
  z-index: 50;
  animation: orb 2s ease infinite;
}

.orb1 {
  @extend .accelerate;
  position: absolute;
}

.orb2 {
  top: 50%;
  left: 10%;
  opacity: 0.85;
  z-index: 50;
  filter: blur(1px) hue-rotate(-8deg);
  -webkit-filter: blur(1px) hue-rotate(-8deg);
  animation: orb2 70s ease-out infinite;
  img {
    width: 40%;
    height: auto;
  }
}

.orb3 {
  top: 34%;
  left: 80%;
  opacity: 0.6;
  z-index: 20;
  filter: blur(2px) hue-rotate(15deg);
  -webkit-filter: blur(2px) hue-rotate(15deg);
  animation: orb2 70s ease-out infinite;
  img {
    width: 30%;
    height: auto;
  }
}

@keyframes particleOne {
  50% { transform: translateX(200%); }
}

@keyframes orb {
  50%   { transform: translateY(-5px); }
}

@keyframes orb2 {
  50%   { transform: translateX(300px); }
}

.blue {
  position: absolute;
  z-index: 70;
  opacity: 0.2;
  top: 45%;
  width: 100%;
  height: 10%;
  box-shadow:0px 0px 50px 50px #8EB7BA;
  background: #8EB7BA;
}

.land {
  width: 100%;
  height: auto;
  bottom: 0;
  position: absolute;
  img {
    width: 100%;
    height: auto;
  }
}

@media screen and ( max-height: 400px) {
    .land { bottom: -55%; }
}

@media screen and ( max-width: 620px ){
    .orb { left: 10% !important; }
    .orb3 { left: -2% !important; }
}
  </style>
</head>

<body>
  <div class="particle1"></div>
<div class="particle2"></div>
<div class="particle2 next"></div>
<div class="blue"></div>
<div class="orb"></div>
<div class="orb1 orb2">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/orb.png">
</div>
<div class="orb1 orb3">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/orb.png">
</div>
<div class="land">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/land.png">
</div>
  <script>
    

  </script>
</body>