A Pen by Lee Kiernan.

index.html

<div class="container">
  
<div class="text">
  <h1 class="shimmer">taste</h1>
  <div class="progress-bar"></div>
  <p>For everything</p>	
</div>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Normal_Logo" x="0px" y="0px" width="83.847px" height="91.571px" viewBox="0 0 83.847 91.571" enable-background="new 0 0 83.847 91.571" xml:space="preserve">
  <g class="piece purple back">
    <radialGradient id="SVGID_3_" cx="22.3" cy="35.1" r="29.4" gradientUnits="userSpaceOnUse">
      <stop offset="0" style="stop-color:#A56BA9"/>
      <stop offset="1" style="stop-color:#75509A"/>
    </radialGradient>
    <path fill="url(#SVGID_3_)" d="M21.212 70.106L0 2.998c0 0 25.568-7.853 44.5 1.859L21.212 70.106z"/>
  </g>
  <g class="piece orange back">
    <radialGradient id="SVGID_1_" cx="45.4" cy="76.6" r="20.1" gradientUnits="userSpaceOnUse">
      <stop offset="0" style="stop-color:#47C0F0"/>
      <stop offset="1" style="stop-color:#008BD2"/>
    </radialGradient>
    <path fill="url(#SVGID_1_)" d="M21.212 70.106l47.807-8.533c0 0 2.9 18.076-5.51 29.998L21.212 70.106z"/>
  </g>
  <g class="piece blue back">
    <radialGradient id="SVGID_2_" cx="52.5" cy="38.4" r="31.5" gradientUnits="userSpaceOnUse">
      <stop offset="0" style="stop-color:#F18C1F"/>
      <stop offset="1" style="stop-color:#E53B11"/>
    </radialGradient>
    <path fill="url(#SVGID_2_)" d="M21.212 70.106L53.665 6.733c0 0 23.6 12.5 30.2 32.804L21.212 70.106z"/>
  </g>
  <g class="piece green front top" opacity="0.92">
    <radialGradient id="SVGID_4_" cx="39.6" cy="38.8" r="25.7" gradientUnits="userSpaceOnUse">
      <stop offset="0" style="stop-color:#E1DD00"/>
      <stop offset="1" style="stop-color:#A6C722"/>
    </radialGradient>
    <path fill="url(#SVGID_4_)" d="M21.212 70.106V7.458c0 0 23.5 0.3 36.8 13.588L21.212 70.106z"/>
  </g>
  <g class="piece green front bottom" opacity="0.92">
    <radialGradient id="SVGID_5_" cx="47.1" cy="54.3" r="21.5" gradientUnits="userSpaceOnUse">
      <stop offset="0" style="stop-color:#E1DD00"/>
      <stop offset="1" style="stop-color:#A6C722"/>
    </radialGradient>
    <path fill="url(#SVGID_5_)" d="M21.212 70.106L63.26 38.442c0 0 11.7 16 9.5 31.561L21.212 70.106z"/>
  </g>
</svg>
</div>

style.scss

@import "compass/css3";
@import url(http://fonts.googleapis.com/css?family=Merriweather+Sans:400,700);
$delay: 0.3s;
$bar:3px;

body { background:#AAA; }
.container {
  position: relative;
  width: 500px;
  margin:2em auto;
}


div.text, svg { display:inline-block; }
h1,p { 
  font-family: 'Merriweather Sans', sans-serif;
  margin:0; 
}

h1 {
  font-size:4em;
  margin-bottom:-#{$bar};
  text-transform:lowercase;
  line-height:0.95;

  color:rgba(black,0.5);

  @include background-image( linear-gradient(left, rgba(black,0.5), #fff 45%, #fff 55%, rgba(black,0.5)) );
  -webkit-background-size: 25px 100%;
  -webkit-background-clip: text;

  animation: fadeIn 1s both, shimmer 2s $delay*6 both;

  background-repeat: no-repeat;
  background-position: -50% top;
}

p {
  font-size:0.9em;
  letter-spacing:0.25em;
  text-transform:uppercase;

  animation: fadeIn 1s both;
  animation-delay:$delay*7;
  margin-top: $bar;
}

.progress-bar {
  height: $bar;
  background-color: white;
  animation: scaleX 3.1s both;
}

.piece { animation: fadeIn 1s both; }
.piece.purple {
  animation-delay: $delay*2; 
  transform: translate(0, -20%);
}
.piece.orange {
  animation-delay: $delay*2; 
  transform: translate(15%, -15%);
}
.piece.blue {
  animation-delay: $delay*2; 
  transform: translate(30%, 10%);
}
.piece.green.top {
  animation-delay: $delay*5; 
  transform: translate(40%, -40%);
}
.piece.green.bottom {
  animation-delay: $delay*4; 
  transform: translate(40%, 40%);
}

@-webkit-keyframes scaleX {
  0%   { transform: scale3d(0, 1, 1); }
  100% { transform: scale3d(1, 1, 1); }
}

@keyframes scaleX {
  0%   { transform: scale3d(0, 1, 1); }
  100% { transform: scale3d(1, 1, 1); }
}

@-webkit-keyframes fadeIn {
  0%   { fill-opacity: 0; opacity:0; }
  100% { fill-opacity: 1; opacity:1; transform: translate(0, 0); }
}
@keyframes fadeIn {
  0%   { fill-opacity: 0; opacity:0; }
  100% { fill-opacity: 1; opacity:1; transform: translate(0, 0); }
}

@-webkit-keyframes shimmer {
  0% { background-position: -50% top; }
  100% { background-position: 150% top; }
}
@keyframes shimmer {
  0% { background-position: -50% top; }
  100% { background-position: 150% top; }
}

vJAnk.markdown

vJAnk

Forked from Secret Sam's Pen Ewjym.

A Pen by Lee Kiernan on CodePen.

License.