Animated Logo + Raindrops SVG

by Nicholas Berlette

HTML

<div class="min-w-screen min-h-screen w-full h-full absolute inset !opacity-100" style="opacity:0;transition:0.666s opacity 0.5s ease-in;">
  <div class="relative w-full h-full m-0 p-0 block -z-1">
    <div class="min-h-screen min-w-screen transform scale-150 mt-25 opacity-75 h-full absolute inset">
      <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1000 1000" role="img" id="raindrops-animated">
        <line stroke-width="6px" stroke-linecap="round" stroke-dasharray="20px 200px" stroke-dashoffset="220px" stroke="rgba(210,210,210,0.1)" x1="950" y1="-31" x2="450" y2="969">
          <animate attributeName="stroke-dashoffset" to="0px" begin="0s" dur="6s" calcMode="linear" repeatCount="indefinite" />
        </line>
        <line stroke-width="6px" stroke-linecap="round" stroke-dasharray="20px 200px" stroke-dashoffset="220px" stroke="rgba(210,210,210,0.1)" x1="16" y1="-192" x2="-484" y2="808">
          <animate attributeName="stroke-dashoffset" to="0px" begin="0s" dur="6s" calcMode="linear" repeatCount="indefinite" />
        </line>
        <line stroke-width="6px" stroke-linecap="round" stroke-dasharray="20px 200px" stroke-dashoffset="220px" stroke="rgba(210,210,210,0.1)" x1="1121" y1="-121" x2="621" y2="879">
          <animate attributeName="stroke-dashoffset" to="0px" begin="0s" dur="6s" calcMode="linear" repeatCount="indefinite" />
        </line>
        <line stroke-width="6px" stroke-linecap="round" stroke-dasharray="20px 200px" stroke-dashoffset="220px" stroke="rgba(210,210,210,0.1)" x1="358" y1="-35" x2="-142" y2="965">
          <animate attributeName="stroke-dashoffset" to="0px" begin="0s" dur="6s" calcMode="linear" repeatCount="indefinite" />
        </line>
        <line stroke-width="6px" stroke-linecap="round" stroke-dasharray="20px 200px" stroke-dashoffset="220px" stroke="rgba(210,210,210,0.1)" x1="741" y1="-102" x2="241" y2="898">
          <animate attributeName="stroke-dashoffset" to="0px" begin="0s" dur="6s"...

CSS

svg#logo {
  min-width: 256px;
  min-height: 256px;
  max-width: 312px;
  max-height: 312px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.heart-beat-gradient {
  position: absolute;
  content: " ";
  right: 0;
  top: 0;
  bottom: 0;
  display: block;
  background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
  background-image: -moz-linear-gradient(right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
  background-image: -o-linear-gradient(right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
  background-image: linear-gradient(to left, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
  width: 100%;
  height: 100%;
  z-index: 3
}

.feature-item {
  -webkit-animation-name: sliding;
  -moz-animation-name: sliding;
  -o-animation-name: sliding;
  animation-name: sliding;
  -webkit-animation-duration: 80s;
  -moz-animation-duration: 80s;
  -o-animation-duration: 80s;
  animation-duration: 80s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
  -o-animation-timing-function: linear;
  animation-timing-function: linear
}

.feature-item-2 {
  top: 70px
}

@-webkit-keyframes sliding {
  0% {
    -webkit-transform: translateX(1750px);
    transform: translateX(1750px)
  }

  to {
    -webkit-transform: translateX(-1750px);
    transform: translateX(-1750px)
  }
}

@-moz-keyframes sliding {
  0% {
    -moz-transform: translateX(1750px);
    transform: translateX(1750px)
  }

  to {
    -moz-transform: translateX(-1750px);
    transform: translateX(-1750px)
  }
}

@-o-keyframes sliding {
  0% {
    -o-transform: translateX(1750px);
    transform: translateX(1750px)
  }

  to {
   ...