<div class="wrapper">
  <div class="logo">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
  <style>
    .st0 {
      fill: #fff
    }

    .st1 {
      fill: #3fa9f5
    }
  </style>
  <g>
    <path
      d="M832.68 264.2L566.55 110.54c-16.49-9.52-35.27-14.55-54.32-14.55s-37.83 5.03-54.32 14.55L191.78 264.2c-33.5 19.34-54.32 55.39-54.32 94.08v307.3c0 38.69 20.81 74.74 54.32 94.08l266.13 153.65c16.49 9.52 35.27 14.55 54.32 14.55s37.83-5.03 54.32-14.55l266.13-153.65c33.5-19.34 54.32-55.39 54.32-94.08v-307.3c0-38.69-20.81-74.74-54.32-94.08zm32.1 421.08c-.1.44-.21.89-.31 1.33.1-.44.21-.88.31-1.33zm-9.65-371.32c.96 1.66 1.86 3.34 2.71 5.06-.86-1.72-1.76-3.4-2.71-5.06zm-4.66-7.24a89.162 89.162 0 0 0-5.35-6.76c1.89 2.17 3.67 4.43 5.35 6.76zm-11.37-13zm-16.42-12.2L556.55 127.87c-.38-.22-.77-.43-1.15-.64.38.21.77.42 1.15.64l266.13 153.65zm-272.75-157.1zm-82.02 3.45c.86-.49 1.72-.97 2.59-1.44 1.74-.93 3.5-1.79 5.28-2.6-1.78.8-3.54 1.67-5.28 2.6-.86.46-1.73.94-2.59 1.44L201.78 281.52l266.13-153.65zm-276.92 161c-1.25 1-2.48 2.02-3.68 3.07 1.2-1.05 2.43-2.08 3.68-3.07zm-13.87 13.76zm-3.63 413.77c-.73-1.05-1.44-2.11-2.13-3.19.69 1.09 1.4 2.15 2.13 3.19zm-4.77-7.61zm-1.22-391.46zm10.28 404.71a88.735 88.735 0 0 0 24 20.3l133.07 76.83-133.07-76.83a88.557 88.557 0 0 1-24-20.3zm-3.34-4.3a75.09 75.09 0 0 0 2.68 3.49c-.92-1.14-1.81-2.31-2.68-3.49zm648.24 24.6l-103.26 59.62 103.26-59.62a88.643 88.643 0 0 0 39.85-49c-6.72 20.37-20.72 37.96-39.85 49z"
      class="st0" />
  </g>
  <g id="background">
    <path
      d="M157.46 358.28v307.3c0 31.67 16.89 60.93 44.32 76.76l266.13 153.65a88.64 88.64 0 0 0 88.63 0l266.13-153.65a88.637 88.637 0 0 0 44.32-76.76v-307.3c0-31.67-16.89-60.93-44.32-76.76L556.55 127.87a88.64 88.64 0 0 0-88.63 0L201.78 281.52a88.637 88.637 0 0 0-44.32 76.76z" />
  </g>
  <g id="L">
    <path
      d="M647 664.56c-6.67 3.85-15-.96-15-8.66V276.5c0-3.57-1.91-6.87-5-8.66l-60-34.64c-6.67-3.85-15 .96-15 8.66v540.13c0 7.7 8.33 12.51 15 8.66l65-37.53 115.43-66.64A67.147 67.147 0 0 0 781 628.33v-23.82c0-7.7-8.33-12.51-15-8.66l-119 68.71z"
      class="st1" />
  </g>
  <g id="J">
    <path
      d="M397 268.11c-3.09 1.79-5 5.09-5 8.66v378.86c0 7.7-8.33 12.51-15 8.66l-118.54-68.44c-6.67-3.85-15 .96-15 8.66v23.82c0 23.99 12.8 46.16 33.57 58.15L392 752.86l65 37.53c6.67 3.85 15-.96 15-8.66v-539.6c0-7.7-8.33-12.51-15-8.66l-60 34.64z"
      class="st1" />
  </g>
</svg>
</div>
</div>
html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  background-color: #1a202c;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wrapper {
  border-bottom: 1px solid #3fa9f5;
}

.logo {
  animation-name: logoAnimation;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-delay: 1;
  animation-direction: normal;
    
  width: 200px;
}

@keyframes logoAnimation {
  0% {
    opacity: 0.25;
    transform: translateX(-100px);
  }
  20%,80% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0.25;
    transform: translateX(100px);}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.