<div id="eqx-logo" class="bounce-2">
  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 322.6 205.3" style="enable-background:new 0 0 322.6 205.3;" xml:space="preserve">
  
  <g>
    <defs>
      <polyline id="SVGID_1_" points="301.1,47.5 301.1,139.2 279.6,146.5 279.6,40.2 215,18.3 215,168.5 193.5,175.8 193.5,11 161.3,0
        129,11 129,175.8 107.5,168.5 107.5,18.3 43,40.2 43,146.5 21.5,139.2 21.5,47.5 0,54.8 0,154.1 64.5,176 64.5,55.1 86,47.8
        86,183.3 150.5,205.3 150.5,25.9 161.3,22.2 172,25.9 172,205.3 236.6,183.3 236.6,47.8 258.1,55.1 258.1,176 322.6,154.1
        322.6,54.8 301.1,47.5     "/>
    </defs>
    <clipPath id="SVGID_2_">
      <use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
    </clipPath>
    <g class="st0">
      <defs>
        <rect id="SVGID_3_" x="100" y="-100" width="200" height="400"></rect>
      </defs>
      <clipPath id="SVGID_4_">
        <use xlink:href="#SVGID_3_"  style="overflow:visible;"/>
      </clipPath>
      <rect class="st1x" width="395.9" height="278.6"/>
      <rect class="st1" width="230" height="278.6"/>
    </g>
  </g>
  </svg>
</div>

body {
  background: black;
}


#eqx-logo {
/* remove this persp prop for perspective */
  
  perspective: 1000px;
  min-width: 20%;
  width: 20%;
  margin: 0 auto;
  display: block;
  top: 50px;
  position: relative;
  /* remove bottom prop for bounce repeat anim*/
  animation-duration: 2s;
  animation-iteration-count: infinite;
/*   this is for perspective */
/*   transform: perspective(500px) rotateX(30deg); */
}

.st0 {
  clip-path:url(#SVGID_2_);
}
.st1x {
  fill:#e6e6e6;
}
/* remove this svg block for perspective */
svg {
  transform: rotateX(4deg) rotateY(320deg) rotateZ(0deg);
  position: absolute;
  left: 8px;
  top: 12px;
}
.st1 {
  perspective: 1000px;
  clip-path:url(#SVGID_4_);
  fill: #cf202b;
  -webkit-animation: scan 1.5s ease infinite;
  animation: scan 1.5s ease infinite;
  
  -moz-animation: scan 1.5s ease infinite;
  -ms-animation: scan 1.5s ease infinite;
  
  -webkit-animation-direction: alternate-reverse;
  animation-direction: alternate-reverse;
  -ms-animation-direction: alternate-reverse;
  -moz-animation-direction: alternate-reverse;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -ms-animation-timing-function: ease-in-out;
  -moz-animation-timing-function: ease-in-out;
}

@-webkit-keyframes scan {
 0% {
   -webkit-transform: translate(230px, 0);
   transform: translate(230px, 0);
   -ms-transform: translate(230px, 0);
 }
 100% {
   -webkit-transform: translate(-236.7px, 0);
   transform: translate(-236.7px, 0);
   -ms-transform: translate(-236.7px, 0);
 }
}

@keyframes scan {
  0% {
    -webkit-transform: translate(230px, 0);
    transform: translate(230px, 0);
    -ms-transform: translate(230px, 0);
  }
  100% {
   -webkit-transform: translate(-236.7px, 0);
   transform: translate(-236.7px, 0);
   -ms-transform: translate(-236.7px, 0);
 }
}

.bounce-2 {
        animation-name: bounce-2;
        animation-timing-function: ease;
    }
    @keyframes bounce-2 {
        0%   { transform: translateY(0); }
        50%  { transform: translateY(-50px); }
        100% { transform: translateY(0); }
    }