<div class="container animate">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 556 214">

    <defs>
      <filter id="softGlow" height="300%" width="300%" x="-75%" y="-75%">
        <!-- Thicken out the original shape -->
        <feMorphology operator="dilate" radius="4" in="SourceAlpha" result="thicken" />
        <!-- Use a gaussian blur to create the soft blurriness of the glow -->
        <feGaussianBlur in="thicken" stdDeviation="10" result="blurred" />
        <!-- Change the colour -->
        <feFlood flood-color="rgb(82, 43, 173)" result="glowColor" />
        <!-- Color in the glows -->
        <feComposite in="glowColor" in2="blurred" operator="in" result="softGlow_colored" />
        <!--	Layer the effects together -->
        <feMerge>
          <feMergeNode in="softGlow_colored"/>
          <feMergeNode in="SourceGraphic"/>
        </feMerge>
      </filter>

    </defs>

    <path filter="url(#softGlow)" d="M516 59v91c0 6.6-5.4 12-12 12l-70 1.4V185l-22-21.1L63 171c-6.6 0-12-5.4-12-12V51c0-6.6 5.4-12 12-12l441 8c6.6 0 12 5.4 12 12z"/>
    <text transform="matrix(1 0 0 1 106.9291 102.6455)"><tspan x="0" y="0" class="text">“LOVE AND TACO IS JUST AMAZING!!”</tspan><tspan x="130.6" y="31.4" class="text grey">BuzzFeed</tspan></text>
  </svg>

  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 556 214">

    <defs>
      <filter id="softGlow" height="300%" width="300%" x="-75%" y="-75%">
        <feMorphology operator="dilate" radius="4" in="SourceAlpha" result="thicken" />
        <feGaussianBlur in="thicken" stdDeviation="10" result="blurred" />
        <feFlood flood-color="rgb(82, 43, 173)" result="glowColor" />
        <feComposite in="glowColor" in2="blurred" operator="in" result="softGlow_colored" />
        <feMerge>
          <feMergeNode in="softGlow_colored"/>
          <feMergeNode in="SourceGraphic"/>
        </feMerge>
      </filter>

    </defs>

    <path filter="url(#softGlow)" d="M516 59v91c0 6.6-5.4 12-12 12l-70 1.4V185l-22-21.1L63 171c-6.6 0-12-5.4-12-12V51c0-6.6 5.4-12 12-12l441 8c6.6 0 12 5.4 12 12z"/>
    <text transform="matrix(1 0 0 1 106.9291 102.6455)"><tspan x="10" y="0" class="text purple">“PROBABLY THE BEST WORK YET!!”</tspan><tspan x="130.6" y="31.4" class="text grey">BuzzFeed</tspan></text>
  </svg>

  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 556 214">

    <defs>
      <filter id="softGlow" height="300%" width="300%" x="-75%" y="-75%">
        <feMorphology operator="dilate" radius="4" in="SourceAlpha" result="thicken" />
        <feGaussianBlur in="thicken" stdDeviation="10" result="blurred" />
        <feFlood flood-color="rgb(82, 43, 173)" result="glowColor" />
        <feComposite in="glowColor" in2="blurred" operator="in" result="softGlow_colored" />
        <feMerge>
          <feMergeNode in="softGlow_colored"/>
          <feMergeNode in="SourceGraphic"/>
        </feMerge>
      </filter>

    </defs>

    <path filter="url(#softGlow)" d="M516 59v91c0 6.6-5.4 12-12 12l-70 1.4V185l-22-21.1L63 171c-6.6 0-12-5.4-12-12V51c0-6.6 5.4-12 12-12l441 8c6.6 0 12 5.4 12 12z"/>
    <text transform="matrix(1 0 0 1 106.9291 102.6455)"><tspan x="40" y="0" class="text red">“UNBELIEVABLY AMAZING!!”</tspan><tspan x="130.6" y="31.4" class="text grey">BuzzFeed</tspan></text>
  </svg>
</div>

$bg: #322459;

body {
  background: $bg;
  overflow: hidden;
}

.container {
  position: absolute;
  width: 60vmin;
  top: 50%;
  left: 50%;
  
  &.animate {
    
    svg {
      animation: rotateIn .15s cubic-bezier(0.485, 0.165, 0.855, 0.560) forwards;
      
      @for $i from 1 to 4 {
        &:nth-child(#{$i}) {
          animation-delay: $i/4 + s;
        }
      }
    }
  } 
}

svg {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 40vmin;
  transform-origin: 100% 100%;
  transform-style: preserve-3d;
  transform: rotateX(-20deg) rotateY(-90deg);
  
  &:first-of-type {
    margin: -20vmin 0 0 -60vmin;
  }
  
   &:nth-of-type(3) {
       margin: 20vmin 0 0 -60vmin;
  }
 
  path {
    fill: #fff;
  }
  
	.text { 
    fill: #F9BE19;
    font-family: 'Impact';
    font-size: 26px;
  }

	.grey {
    fill: #C6C6C6;
  }
  
  .purple {
    fill: #322459;
  }
  
  .red {
    fill: #e0633d;
  }
}

@keyframes rotateIn {
  to {
    transform: rotateX(0deg) rotateY(0deg) translate(-50%, -50%);
  }
}

var $container = $('.container'),
    $lastSVG = $('svg:last-of-type'),
    time = 2000;

$lastSVG.on('animationend', function(e) { 
  console.log('Animation ' + e.originalEvent.animationName + ' has ended');
  
  setTimeout(function() {
    $container.removeClass('animate');
  }, 1000);
 
  setTimeout(function() {
    $container.addClass('animate');
  }, 1500);

});