Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!-- Logo and animation belong to Cartoon Network (Adult Swim), made by Double Fine game studio -- all I did was replicate it -->
<svg class="starfield" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 400 300" preserveAspectRatio="xMidYMid slice">
  <defs>
    <radialGradient id="starGradient" fx="50%" fy="50%" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="#de393e" stop-opacity="1" />
      <stop offset="30%" stop-color="#de393e" stop-opacity="0.9" />
      <stop offset="50%" stop-color="#de393e" stop-opacity="0.6" />
      <stop offset="100%" stop-color="#000" stop-opacity="0" />
    </radialGradient>
    <circle id="star" cx="200" cy="120" r="4" fill="url(#starGradient)" />
  </defs>
</svg>
<div class="title-container">
  <svg class="effects">
    <defs>
      <filter id="headBlur" x="0" y="0">
        <feGaussianBlur id="headGaussianBlur" in="SourceGraphic" stdDeviation="0" />
      </filter>
      <filter id="headGlow" x="0" y="0">
        <feGaussianBlur in="SourceGraphic" stdDeviation="0" />
      </filter>
      <filter id="stripeBlur" x="-20%" y="5%" width="140%" height="150%">
        <feGaussianBlur in="SourceGraphic" stdDeviation="60,6" />
      </filter>
      <filter id="writerEffect" x="-200%" y="-200%" width="500%" height="500%">
        <feGaussianBlur in="SourceGraphic" stdDeviation="8" />
        <feComponentTransfer result="MainGlow">
          <feFuncA type="linear" slope="2.5" />
        </feComponentTransfer>
        
        <feGaussianBlur in="SourceGraphic" stdDeviation="45,4" />
        <feOffset dx="50" />
        <feComponentTransfer result="SmearRightRed">
          <feFuncR type="linear" slope="1.0" />
          <feFuncG type="linear" slope="0" />
          <feFuncB type="linear" slope="0" />
        </feComponentTransfer>
        
        <feGaussianBlur in="SourceGraphic" stdDeviation="45,4" />
        <feOffset dx="-50" />
        <feComponentTransfer result="SmearLeftGreen">
          <feFuncR type="linear" slope="0" />
          <feFuncG type="linear" slope="1.0" />
          <feFuncB type="linear" slope="0" />
        </feComponentTransfer>
        
        <feGaussianBlur in="SourceGraphic" stdDeviation="8" />
        <feOffset dx="-12" dy="17" />
        <feComponentTransfer result="SmearDownLeftRed">
          <feFuncR type="linear" slope="0.8" />
          <feFuncG type="linear" slope="0" />
          <feFuncB type="linear" slope="0" />
        </feComponentTransfer>
        
        <feGaussianBlur in="SourceGraphic" stdDeviation="6" />
        <feOffset dx="12" dy="-17" />
        <feComponentTransfer result="SmearUpRightGreen">
          <feFuncR type="linear" slope="0" />
          <feFuncG type="linear" slope="0.5" />
          <feFuncB type="linear" slope="0" />
        </feComponentTransfer>
        
        <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
        <feOffset dx="-15" dy="-15" />
        <feComponentTransfer result="SmearUpLeftBlue">
          <feFuncR type="linear" slope="0" />
          <feFuncG type="linear" slope="0" />
          <feFuncB type="linear" slope="0.5" />
        </feComponentTransfer>
        
        <feGaussianBlur in="SourceGraphic" stdDeviation="7" />
        <feOffset dx="15" dy="10" />
        <feComponentTransfer result="SmearDownRightBlue">
          <feFuncR type="linear" slope="0" />
          <feFuncG type="linear" slope="0" />
          <feFuncB type="linear" slope="0.5" />
        </feComponentTransfer>
        
        <feBlend in="SmearUpLeftBlue" in2="SmearDownRightBlue" mode="lighten" color-interpolation-filters="sRGB" />
        <feBlend in2="SmearDownLeftRed" mode="lighten" color-interpolation-filters="sRGB" />
        <feBlend in2="SmearUpRightGreen" mode="lighten" color-interpolation-filters="sRGB" />
        <feBlend in2="SmearRightRed" mode="lighten" color-interpolation-filters="sRGB" />
        <feBlend in2="SmearLeftGreen" mode="lighten" color-interpolation-filters="sRGB" result="Smears" />
        <feComposite in="MainGlow" in2="Smears" operator="over" color-interpolation-filters="sRGB" />
      </filter>
      <path id="shimmerPath" fill="#ffffff" d="m 0,39.7 C 3.2,2.3 3.2,2.3 35,0 3.2,-2.3 3.2,-2.3 0,-39.7 -3.2,-2.3 -3.2,-2.3 -35,0 -3.2,2.3 -3.2,2.3 0 39.7 Z" filter="url(#shimmerGlow)" />
      <filter id="shimmerGlow" x="0" y="0">
        <feGaussianBlur in="SourceGraphic" out="glow" stdDeviation="12" />
        <feComposite in="glow" in2="SourceGraphic" operator="over" />
      </filter>
    </defs>
  </svg>
  <svg class="title-top head" xmlns="http://www.w3.org/2000/svg" version="1.1" width="490" height="153" viewBox="-10 -10 490 153">
    <g filter="url('#headBlur')">
      <path d="m 79.001,3.001 c 2,1.083 3.833,4.667 3.667,10.083 -0.18,5.84 -2.13,38.25 -2.13,38.25 l -21.537,0 c 0,0 1.667,-32.5 2,-36.167 C 61.334,11.5 62.834,5.5 67.168,3 62.668,3 11.501,3 11.501,3 15.084,5.667 16.04,9.476 15.584,14.333 14.912,21.5 6.757,113.567 5.917,120.916 5.412,125.334 3.834,130.833 0,132.999 c 0,0 47.333,0 57.5,0 -1.833,-1.167 -4.396,-3.989 -4,-8.333 0.42,-4.617 2.75,-42.25 2.75,-42.25 l 22.084,0 c 0,0 -1.833,36.5 -2.5,40.667 -0.667,4.167 -2.083,7.583 -5.5,9.917 0,0 52.333,0 57.333,0 -1.5,-1.167 -4.667,-5.667 -4.333,-9.5 0.334,-3.833 4.917,-105.333 5.083,-108.833 0.166,-3.5 1.417,-8.833 5.417,-11.666 0,0 -42.333,0 -54.833,0 z" />
      <path d="m 442.418,18.609 c -17,-14.667 -34.499,-18.146 -48.083,-18.146 -13.584,0 -27.834,4.053 -33.75,4.146 -5.334,0.083 -10.918,-1.917 -13.084,-4.146 0,5.146 4.416,94.396 4.416,94.396 L 310.119,3.098 c 0,0 -52.118,0 -54.368,0 3.5,1.177 4.166,4.761 4.166,5.927 0,1.166 -0.166,3.583 -0.833,5.25 -0.667,1.667 -34.25,82 -34.25,82 l -40.667,0 0,-15.583 c 0,0 13.046,0 16.167,0 3.121,0 9.211,1.792 10.75,2.917 0,-2.667 0,-35.083 0,-35.083 -1.167,2 -8.287,2.417 -10.417,2.417 -2.13,0 -15.583,0 -15.583,0 l 0,-13.251 c 0,0 15.25,0 23.333,0 5.654,0 17.083,1.583 18.167,3.75 0,-2.833 0.083,-38.417 0.083,-38.417 l -89.083,0 c 3.167,1.75 4.833,5.667 4.667,9.25 -0.093,2 -4.083,106.25 -4.417,110.083 -0.334,3.833 -1.916,8.75 -4.833,10.583 7.37,0 161,0 161,0 -2.417,-1.083 -5.083,-7.166 -5.083,-10.917 0,-2.418 -0.084,-25.667 -0.084,-25.667 l -16.666,0 15.166,-53.915 c 0,0 24.75,76.5 25.5,78.917 0.75,2.417 1.583,9.833 -0.333,11.583 3.287,0 87.084,0 94.917,0 7.833,0 24.417,-2.083 38.333,-13.333 13.916,-11.25 23.334,-25.25 23.334,-48.583 0,-20.501 -9.667,-37.751 -26.667,-52.417 z m -25.751,67.25 c -5.369,5.167 -12.583,6.083 -20,6.083 -0.084,-1.833 -3.166,-53.083 -3.166,-53.083 2.667,0 15.25,0.083 21.833,6.667 6.583,6.584 9.333,14.25 9.333,22.167 0,7.917 -2.631,12.999 -8,18.166 z" />
    </g>
  </svg>
  <svg class="title-bottom ander" style="overflow:visible" xmlns="http://www.w3.org/2000/svg" version="1.1" width="935" height="306" viewBox="0 0 935 306">
    <defs>
      <clipPath id="ander-reveal">
        <rect id="ander-reveal-shape" x="147" y="-5" width="700" height="160" />
      </clipPath>
      <mask id="ander-writer-mask">
        <!-- JS will copy path as mask here -->
      </mask>
    </defs>
    <g id="ander-text-shape" clip-path="url(#ander-reveal)">
      <path d="m 779.764,151.005 c 0,0 58.417,0 62.167,0 -3.865,-1.734 -7.438,-10.423 -8.059,-15.391 C 832.19,122.145 826.228,110.609 819.44,102.02 813.315,94.27 799.86,83.553 795.487,82.759 799.815,79.145 805.575,68.645 805.69,55.27 805.815,40.77 800.065,28.895 786.898,16.187 774.475,4.197 754.19,1.354 739.44,1.354 c -21.875,0 -25.124,4.333 -35.708,4.333 -6.917,0 -12.084,-1.917 -14.167,-4.333 0,0.667 11.56,136.083 11.625,138.583 0.125,4.75 -1.833,9.792 -4.438,11.083 0,0 58.6,0 62.042,0 -2.104,-0.834 -5.771,-6.124 -6.229,-9.749 -0.325,-2.574 -3.75,-28.876 -3.917,-34.459 3.5,0.667 9.565,1.346 21.334,9.584 10,7 13.911,18.625 13.911,22.666 10e-4,4.335 -1.796,11.276 -4.129,11.943 z M 757.649,64.688 c -3.916,3.417 -8.959,3.292 -13.125,3.292 l -2.791,-26.375 c 5.259,0.03 11.739,1.007 15.375,4.333 3.916,3.583 4.792,7.667 4.792,10.25 0,2.583 -0.335,5.083 -4.251,8.5 z" />
      <path d="m 664.566,108.855 c -3.5,0 -25.917,0 -25.917,0 l -1,-17.334 c 0,0 10.833,0 15.5,0 4.667,0 12.083,1.583 12.667,3 -0.166,-2.167 -2.583,-37.667 -2.75,-39.167 -1.25,2.042 -9.625,2.667 -13.583,2.667 -2.75,0 -13.834,0 -13.834,0 l -1.166,-15.333 c 0,0 14.082,0 21.416,0 7.334,0 20.834,2.167 22.667,4.333 -0.25,-4.25 -3.333,-43.083 -3.333,-43.083 l -95.479,0 c 3.313,1.458 6.25,6.208 6.562,11.211 0.213,3.412 1.438,30.497 1.438,32.247 -5.5,-10.583 -9.771,-19.292 -25.604,-31.625 -3.996,-3.112 -9.829,-6.982 -18.25,-10.167 -7.13,-2.696 -16.493,-4.992 -24.249,-4.992 -13.896,0 -30.27,5.069 -37.148,5.069 -4.561,0 -10.811,-1.224 -14.061,-4.599 l 0.063,107.563 -15.063,0 c 0,0 -0.125,-86.25 0,-92.188 0.125,-5.938 3.375,-11.5 5.875,-12.375 -4,0 -55.999,0 -57.062,0 2.063,0.75 5.312,7.063 5.25,10.938 -0.062,3.875 -1.5,60.25 -1.5,60.25 l -41.813,-71.188 -49.958,0 c 2.625,1.063 5.542,6.396 5.417,10.396 -0.125,4 -5.771,96.167 -5.771,96.167 L 279.13,4.082 c 0,0 -57.125,0 -57.563,0 2.688,0.938 4.75,5.938 3.063,9.688 -1.687,3.75 -68,137.188 -68,137.188 0,0 89.813,0 90.875,0 -2.5,-1 -4.563,-6.25 -4.375,-10.625 0.188,-4.375 2.188,-30.313 2.313,-31.5 -3.313,0 -16.875,0 -16.875,0 l 21.917,-61.479 c 0,0 16.354,83.229 17.417,88.167 1.063,4.938 0.75,13 -2.646,15.5 3.875,0 100.875,0 100.875,0 -2.813,-2 -5.146,-8 -5,-12.125 0.201,-5.686 2.604,-66.625 2.604,-66.625 l 42.785,78.75 c 0,0 90.796,0.017 114.296,0 21.919,-0.016 36.708,-8.209 45.875,-15.125 9.167,-6.916 17.291,-15.624 23.958,-34.208 0.25,14.166 1.084,32.833 1.334,37 0.25,4.167 -2,10.833 -4.5,12.25 4.952,0 99.708,0.067 99.708,0.067 l -4,-45.984 c -1.5,2.25 -12.75,3.834 -18.625,3.834 z M 547.15,75.688 c -0.416,10.917 -4,16.833 -10.25,22.083 -6.25,5.25 -12.25,6.75 -20.584,6.75 l -1.083,-60.833 c 8.5,0 17.167,3.083 22,7.833 4.833,4.75 10.333,13.25 9.917,24.167 z" />
    </g>
    <g filter="url(#writerEffect)">
      <rect id="ander-writer-rect" fill="#ffffff" x="345" y="0" height="155" width="70" mask="url(#ander-writer-mask)" />
    </g>
  </svg>
  <svg class="title-bottom letter-l" xmlns="http://www.w3.org/2000/svg" version="1.1" width="935" height="306" viewBox="0 0 935 306">
    <defs>
      <clipPath id="letter-l-reveal">
        <polygon id="letter-l-reveal-shape" x="-990" y="-9" points="30,-9 1020,-9 885,221 30,221" />
      </clipPath>
      <mask id="letter-l-writer-mask">
        <!-- JS will copy path as mask here -->
      </mask>
    </defs>
    <g id="letter-l-shape" clip-path="url(#letter-l-reveal)">
      <path d="m 50.406,209.974 834.316,0 C 872.04,185.587 861.925,166.146 861.925,166.146 l -733.026,0 c 0,0 73.917,-146.292 76.083,-150.875 2.166,-4.583 6.166,-9.459 9.812,-11.25 0,0 -65.12,0 -65.729,0 3.844,1.016 5.292,5.793 4,9.418 -0.792,2.227 -58.361,112.098 -102.659,196.535 z" />
    </g>
    <g filter="url(#writerEffect)">
      <path id="letter-l-writer-rect" fill="#ffffff" d="m 161,-45 78,0 -20,47 -71,0 z" mask="url(#letter-l-writer-mask)" />
    </g>
  </svg>
  <svg class="title-stripes stripe-1" style="overflow:visible" xmlns="http://www.w3.org/2000/svg" version="1.1" width="935" height="306" viewBox="0 0 935 306">
    <defs>
      <clipPath id="stripe-1-reveal">
        <rect id="stripe-1-reveal-shape" x="33" y="204" width="869" height="34" />
      </clipPath>
    </defs>
    <path clip-path="url(#stripe-1-reveal)" d="m 896.748,233.099 c -4.104,-7.895 -8.183,-15.736 -12.025,-23.125 l -834.317,0 c -4.182,7.972 -8.247,15.719 -12.134,23.125 l 858.476,0 z" />
  </svg>
  <svg class="title-stripes stripe-2" style="overflow:visible" xmlns="http://www.w3.org/2000/svg" version="1.1" width="935" height="306" viewBox="0 0 935 306">
    <defs>
      <clipPath id="stripe-2-reveal">
        <rect id="stripe-2-reveal-shape" x="21" y="227" width="892" height="34" />
      </clipPath>
    </defs>
    <path clip-path="url(#stripe-2-reveal)" d="m 908.736,256.162 c -3.899,-7.503 -7.972,-15.337 -12.021,-23.125 l -858.41,0 c -4.288,8.172 -8.359,15.928 -12.137,23.125 l 882.568,0 z" />
  </svg>
  <svg class="title-stripes stripe-3" style="overflow:visible" xmlns="http://www.w3.org/2000/svg" version="1.1" width="935" height="306" viewBox="0 0 935 306">
    <defs>
      <clipPath id="stripe-3-reveal">
        <rect id="stripe-3-reveal-shape" x="9" y="250" width="917" height="34" />
      </clipPath>
    </defs>
    <path clip-path="url(#stripe-3-reveal)" d="m 920.751,279.287 c -3.609,-6.95 -7.703,-14.828 -12.015,-23.125 l -882.568,0 c -4.511,8.594 -8.604,16.39 -12.14,23.125 l 906.723,0 z" />
  </svg>
  <svg class="title-stripes stripe-4" style="overflow:visible" xmlns="http://www.w3.org/2000/svg" version="1.1" width="935" height="306" viewBox="0 0 935 306">
    <defs>
      <clipPath id="stripe-4-reveal">
        <rect id="stripe-4-reveal-shape" x="-5" y="274" width="945" height="37" />
      </clipPath>
    </defs>
    <path clip-path="url(#stripe-4-reveal)" d="m 0,306 c 3.771,-1.417 28.223,-3.604 40.223,-3.604 12,0 835.92,0 850.712,0 12.001,0 42.091,1.501 43.653,3.604 -0.38,-0.783 -5.945,-11.519 -13.837,-26.714 l -906.723,0 C 5.341,295.832 0,306 0,306 Z" />
  </svg>
  <svg class="title-shimmers" style="overflow:visible" xmlns="http://www.w3.org/2000/svg" version="1.1" width="935" height="306" viewBox="0 0 935 306">
    <use class="stationary-shimmer-1" x="257" y="22" xlink:href="#shimmerPath" />
    <use class="stationary-shimmer-2" x="696" y="57" xlink:href="#shimmerPath" />
    <use class="stationary-shimmer-3" x="759" y="158" xlink:href="#shimmerPath" />
    <use class="moving-shimmer" x="147" y="183" xlink:href="#shimmerPath" />
    <!-- <use class="moving-shimmer-point-1" x="147" y="183" xlink:href="#shimmerPath" /> -->
    <!-- <use class="moving-shimmer-point-2" x="43" y="363" xlink:href="#shimmerPath" /> -->
    <!-- <use class="moving-shimmer-point-3" x="884" y="363" xlink:href="#shimmerPath" /> -->
  </svg>
  <div class="credits">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/168886/logo-double-fine.png" alt="Double Fine" />
    <p>&</p>
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/168886/logo-adult-swim-games.png" alt="Adult Swim Games" />
  </div>
  <div class="shameless-plug">
    <p>Animation inadequately reproduced by </p>
    <h2>Chris Johnson</h2>
    <h3 class="twitter-contact">
      <svg class="twitter-logo" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 300.00006 244.18703" width="40" height="30">
        <path fill="#1da1f2" d="m 94.7,243.2 c 112.5,0 174,-93.2 174,-174 0,-2.6 -0,-5.3 -0.2,-7.9 11.9,-8.6 22.3,-19.4 30.5,-31.7 -11,4.9 -22.7,8.1 -35.1,9.6 12.6,-7.6 22.3,-19.5 26.9,-33.8 -11.8,7 -24.9,12.1 -38.8,14.8 -11.2,-11.9 -27.0,-19.3 -44.6,-19.3 -33.8,0 -61.1,27.4 -61.1,61.1 0,4.8 0.5,9.5 1.6,13.9 -50.8,-2.6 -95.9,-26.9 -126,-63.9 -5.3,9 -8.3,19.5 -8.3,30.7 0,21.2 10.8,39.9 27.2,50.9 -10,-0.3 -19.5,-3.1 -27.7,-7.6 0,0.3 0,0.5 0,0.8 0,29.6 21.1,54.3 49.1,59.9 -5.1,1.4 -10.5,2.2 -16.1,2.2 -3.9,0 -7.8,-0.4 -11.5,-1.1 7.8,24.3 30.4,42 57.1,42.5 -20.9,16.4 -47.3,26.2 -75.9,26.2 -4.9,0 -9.8,-0.3 -14.6,-0.8 27.1,17.3 59.2,27.5 93.7,27.5" />
      </svg>
      jhnsnc
    </h3>
  </div>
</div>
<div class="scrubber">
  <div class="scrubber-progress"></div>
</div>
              
            
!

CSS

              
                @import 'https://fonts.googleapis.com/css?family=Oswald:300,400';

// Colors
$color-bg-black: #070101;
$color-title-main: #f8d7b8;
$colors-title-below: #ffb129 #ff7b00 #fb1c1f #66000b;
$color-credits-text: #ffffff;

// Variables
$title-padding-x: 500px;
$title-padding-y: 350px;
$scrubber-height: 20px;

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: $color-bg-black;
}
.title-container {
  position: absolute;
  left: 50%;
  top: 40%;
  width: 935px + (2 * $title-padding-x);
  height: 450px + (2 * $title-padding-y);
  transform: translate(-50%, -50%);
}
.title-top {
  position: absolute;
  left: 223px + $title-padding-x;
  top: -10px + $title-padding-y;
}
.title-bottom {
  position: absolute;
  left: 0 + $title-padding-x;
  top: 144px + $title-padding-y;
}
.title-stripes {
  position: absolute;
  left: 0px + $title-padding-x;
  top: 144px + $title-padding-y;
}
.title-shimmers {
  position: absolute;
  left: 0 + $title-padding-x;
  top: -10px + $title-padding-y;
}
.head, .ander, .letter-l {
  fill: $color-title-main;
}
@for $i from 1 through length($colors-title-below) {
  .stripe-#{$i} {
    fill: nth($colors-title-below, $i);
  }
}

.starfield {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.credits {
  position: absolute;
  left: 150px;
  bottom: 30px;
  
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
 
  color: $color-credits-text;
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
  opacity: 0.0;
  
  img {
    margin: 0 20px;
  }
  p {
    margin: 0 20px;
    font-size: 30px;
  }
}

.shameless-plug {
  position: absolute;
  right: 150px;
  bottom: 30px;
  opacity: 0.10;
  
  text-align: right;
  color: $color-credits-text;
  font-family: 'Oswald', sans-serif;
  letter-spacing: 1px;
  opacity: 0.0;
  
  p {
    margin: 0 0 10px;
    font-size: 26px;
    font-weight: 300;
  }
  h2 {
    margin: 0;
    font-size: 32px;
    font-weight: 400;
    line-height: 1.2;
  }
  .twitter-contact {
    margin: 0;
    font-size: 32px;
    font-weight: 300;
    line-height: 1.2;
  }
  .twitter-logo {
    display: inline-block;
    vertical-align: middle;
  }
}

.scrubber {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: $scrubber-height;
  background: $color-title-main;
}
.scrubber-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: nth($colors-title-below, 3);
  transform-origin: 0% 50%;
}
              
            
!

JS

              
                var titleContainer, titleContainerDimensions;
var scrubber, scrubberProgress;
var fullAnimation;

var fitContainer = _.debounce(function(e, setImmediately) {
  var bodyDimensions = document.body.getBoundingClientRect();
  var ratioW = bodyDimensions.width / titleContainerDimensions.width;
  var ratioH = bodyDimensions.height / titleContainerDimensions.height;
  var scale = Math.min(ratioW, ratioH);
  if (setImmediately) {
    TweenMax.set(titleContainer, {scale: scale});
  } else {
    TweenMax.to(titleContainer, 0.4, {scale: scale});
  }
}, 50);

var setupStarfield = function() {
  var i, star;

  var starfield = document.querySelector('.starfield');

  var originalStar = document.createElementNS('http://www.w3.org/2000/svg', 'use');
  originalStar.setAttributeNS('http://www.w3.org/1999/xlink', 'href', '#star');

  var stars = [];
  for (i = 0; i < 350; i += 1) {
    star = originalStar.cloneNode(true);
    TweenMax.set(star, {transformOrigin: '200 120'});
    starfield.appendChild(star);
    stars.push(star);
  }
  
  var tweenStar = function(star, startingProgress) {
    var t = startingProgress ? startingProgress * 9.0 : 0.0;
    //randomize scale, starting radius, and angle
    var s = (Math.random() * 0.5) + 0.25; // 0.25 - 0.75
    var r = (Math.random() * 200) + 10; // 10 - 110
    var a = Math.random();
    a = (Math.cos(a * 4 * Math.PI) + 1) * (a >= 0.25 && a < 0.75 ? -0.5 : 0.5) * Math.PI; // -pi to pi (weighted towards -pi,0,pi)
    if (startingProgress) {
      r += startingProgress * (100 + (25 * (1 / s))); //calc partial progress radius
    }
    TweenMax.set(star, {scale: s, x: Math.cos(a) * r, y: Math.sin(a) * r, opacity: (t >= 1.5) ? 1.0 : 0.0});
    r += 100 + (25 * (1 / s)); //calc ending radius
    TweenMax.to(star, (9.0 - t), {x: Math.cos(a) * r, y: Math.sin(a) * r, ease: Sine.easeIn, onComplete: tweenStar, onCompleteParams: [star], overwrite: 'none'});
    if (t < 1.5) {
      TweenMax.to(star, (1.5 - t), {opacity: Math.random() * 0.4 + 0.4, ease: Sine.easeOut, overwrite: 'none'});
    }
    TweenMax.to(star, (t >= 7.5) ? 1.5 - (t - 7.5) : 1.5, {opacity: 0.0, delay: (t < 7.5) ? 7.5 - t : 0.0, ease: Sine.easeIn, overwrite: 'none'});
  };

  //start animating each star
  stars.forEach(function(star) {
    tweenStar(star, Math.random());
  });
};

var makeAnimation = function() {
  var i, t;
  
  // CONTAINER
  ////////////////////////////////////////
  var containerAnim = new TimelineMax();
  containerAnim.fromTo(titleContainer, 3.0, {y: '+=30'}, {ease: Sine.easeInOut, y: '-=30'}, 0.0);
  
  // HEAD
  ////////////////////////////////////////
  //cache elements / make copies
  var headOriginal = document.querySelector('.head');
  var headCopies = [headOriginal];
  for (i = 1; i < 7; i += 1) { //intentionally starting at 1
    t = headOriginal.cloneNode(true);
    headCopies.push(t);
    headOriginal.parentNode.insertBefore(t, headCopies[i-1]);
    //TODO: clone blur filter and adjust per instance (need to change IDs and filter refs too)
  }
  //settings
  var colorStops = [
    '#cc2154', //red
    '#e0e322', //yellow
    '#22e322', //green
    '#16e6e6', //cyan
    '#ffffff', //white
    getComputedStyle(headCopies[0]).fill //original head color
  ];
  var headAnimDuration = 1.0;
  //setup anim
  var headAnim = new TimelineMax();
  for (i = 0; i < headCopies.length; i += 1) {
    headAnim.set(headCopies[i], {fill: colorStops[0], opacity: 0.0, y: '+=600'}, 0.0);
    var stagger = 0.14 * headAnimDuration * Math.pow(i, 0.85);
    var duration = (1.0 - (0.02 * Math.pow(i,1.05))) * headAnimDuration;
    //move
    headAnim.to(headCopies[i], duration, {ease: Power2.easeOut, opacity: 1.0, y: '-=600'}, stagger);
    //color shifts
    headAnim.to(headCopies[i], 0.30 * duration, {fill: colorStops[1]}, 0.15 * headAnimDuration + stagger)
      .to(headCopies[i], 0.30 * duration, {fill: colorStops[2]}, 0.45 * headAnimDuration + stagger)
      .to(headCopies[i], 0.20 * duration, {fill: colorStops[3]}, 0.75 * headAnimDuration + stagger)
      .to(headCopies[i], 0.25 * duration, {fill: colorStops[4]}, 0.95 * headAnimDuration + stagger)
      .to(headCopies[i], 0.80 * duration, {fill: colorStops[5]}, 1.80 * headAnimDuration + stagger);
    if (i > 0) {
      //fade out copies
      headAnim.to(headCopies[i], 0.2 * duration, {opacity: 0.0}, stagger + duration)
    }
  }
  //shifting blur // TODO: per instance
  headAnim.fromTo(
    document.getElementById('headGaussianBlur'), 3.0, {
      attr: {
        'stdDeviation': 6
      }
    }, {
      attr: {
        'stdDeviation': 0
      }
    }, 0.0);
  
  // MAIN L SHAPE
  ////////////////////////////////////////
  //cache elements
  var lShape = document.getElementById('letter-l-shape')
  var lReveal = document.getElementById('letter-l-reveal-shape');
  var lWriterMask = document.getElementById('letter-l-writer-mask');
  var lWriterReveal = document.getElementById('letter-l-writer-rect')
  
  //copy shape for mask
  var lWriterMaskShape = lShape.cloneNode(true);
  lWriterMaskShape.id = '';
  lWriterMaskShape.style.clipPath = 'none';
  lWriterMask.appendChild(lWriterMaskShape);
  
  //animation
  var lAnim = new TimelineMax();
  lAnim.fromTo(lReveal, 0.45, {x: '-=657', y: '-=223'}, {x: '-=132', y: '+=223', ease: Sine.easeIn}, 0.0)
    .to(lReveal, 0.50, {x: '+=789', ease: Power0.easeNone}, 0.45);
  lAnim.to(lWriterMaskShape, 0.45, {x: '+=110', y: '-=211', ease: Sine.easeIn}, 0.0)
    .to(lWriterMaskShape, 0.537, {x: '-=848', y: '+=2', ease: Power0.easeNone}, 0.45);
  lAnim.to(lWriterReveal, 0.45, {x: '-=110', y: '+=211', ease: Sine.easeIn}, 0.0)
    .to(lWriterReveal, 0.537, {x: '+=848', y: '-=2', ease: Power0.easeNone}, 0.45);
  
  // ANDER
  ////////////////////////////////////////
  //cache elements
  var anderShape = document.getElementById('ander-text-shape');
  var anderReveal = document.getElementById('ander-reveal-shape');
  var anderWriterMask = document.getElementById('ander-writer-mask');
  var anderWriterReveal = document.getElementById('ander-writer-rect');
  
  //copy shape for mask
  t = anderShape.cloneNode(true);
  t.id = '';
  t.style.clipPath = 'none';
  anderWriterMask.appendChild(t);
  
  //animation
  var anderAnim = new TimelineMax();
  anderAnim.fromTo(anderReveal, 0.50, {x: '+=695', width: 5}, {x: '-=695', width: 700, ease: Power0.easeNone}, 0.45);
  anderAnim.fromTo(anderWriterReveal, 0.558, {attr: {x: 845}}, {attr: {x: 70}, ease: Power0.easeNone}, 0.45);
  
  // STRIPES
  ////////////////////////////////////////
  //cache elements / make copies
  var stripePaths = [
    document.querySelector('.stripe-1 path'),
    document.querySelector('.stripe-2 path'),
    document.querySelector('.stripe-3 path'),
    document.querySelector('.stripe-4 path')
  ];
  var stripeMasks = [
    document.querySelector('#stripe-1-reveal-shape'),
    document.querySelector('#stripe-2-reveal-shape'),
    document.querySelector('#stripe-3-reveal-shape'),
    document.querySelector('#stripe-4-reveal-shape')
  ];
  var stripeCopies = [];
  for (i = 0; i < stripeMasks.length; i += 1) {
    //copy path (without mask, with blur/glow added)
    t = stripePaths[i].cloneNode(true);
    t.style.clipPath = 'none';
    t.style.filter = 'url(#stripeBlur)';
    stripeCopies.push(t);
    stripePaths[i].parentNode.insertBefore(t, stripePaths[i]);
  }
  
  //animation
  var stripesAnim = new TimelineMax();
  //mask reveal
  stripesAnim.fromTo(stripeMasks[0], 0.25, {x: '-=869'}, {x: '+=869', ease: Power0.easeNone}, 0.0);
  stripesAnim.fromTo(stripeMasks[1], 0.25, {x: '+=892'}, {x: '-=892', ease: Power0.easeNone}, 0.2);
  stripesAnim.fromTo(stripeMasks[2], 0.25, {x: '-=917'}, {x: '+=917', ease: Power0.easeNone}, 0.4);
  stripesAnim.fromTo(stripeMasks[3], 0.25, {x: '+=945'}, {x: '-=945', ease: Power0.easeNone}, 0.6);
  //glow fade in/out
  stripesAnim.fromTo(stripeCopies[0], 0.1, {opacity: 0}, {opacity: 1}, 0.0)
    .to(stripeCopies[0], 0.1, {opacity: 0}, 0.4);
  stripesAnim.fromTo(stripeCopies[1], 0.1, {opacity: 0}, {opacity: 1}, 0.2)
    .to(stripeCopies[1], 0.1, {opacity: 0}, 0.6);
  stripesAnim.fromTo(stripeCopies[2], 0.1, {opacity: 0}, {opacity: 1}, 0.4)
    .to(stripeCopies[2], 0.1, {opacity: 0}, 0.8);
  stripesAnim.fromTo(stripeCopies[3], 0.1, {opacity: 0}, {opacity: 1}, 0.6)
    .to(stripeCopies[3], 0.1, {opacity: 0}, 1.0);
  //glow positioning
  stripesAnim.fromTo(stripeCopies[0], 0.5, {x: '-=869', opacity: 0}, {x: '+=2607', ease: Power0.easeNone}, 0.0);
  stripesAnim.fromTo(stripeCopies[1], 0.5, {x: '+=892', opacity: 0}, {x: '-=2676', ease: Power0.easeNone}, 0.2);
  stripesAnim.fromTo(stripeCopies[2], 0.5, {x: '-=917', opacity: 0}, {x: '+=2751', ease: Power0.easeNone}, 0.4);
  stripesAnim.fromTo(stripeCopies[3], 0.5, {x: '+=945', opacity: 0}, {x: '-=2835', ease: Power0.easeNone}, 0.6);
  
  // SHIMMER EFFECTS
  ////////////////////////////////////////
  //cache elements
  var stationaryShimmers = [
    document.querySelector('.stationary-shimmer-1'),
    document.querySelector('.stationary-shimmer-2'),
    document.querySelector('.stationary-shimmer-3')
  ];
  var movingShimmer = document.querySelector('.moving-shimmer');
  //animation
  var shimmerAnim = new TimelineMax();
  for (i = 0; i < stationaryShimmers.length; i += 1) {
    shimmerAnim.set(stationaryShimmers[i], {transformOrigin: '50% 50%'}, 0.0);
  }
  shimmerAnim.set(movingShimmer, {transformOrigin: '50% 50%'}, 0.0);
  shimmerAnim.fromTo(stationaryShimmers[0], 0.5, {rotation:-100}, {rotation:80, ease: Power0.easeNone}, 0.35)
    .fromTo(stationaryShimmers[0], 0.25, {scale:0.0}, {scale:1.0}, 0.35)
    .to(stationaryShimmers[0], 0.25, {scale:0.0}, 0.35 + 0.25);
  shimmerAnim.fromTo(stationaryShimmers[1], 0.5, {rotation:-100}, {rotation:80, ease: Power0.easeNone}, 0.00)
    .fromTo(stationaryShimmers[1], 0.25, {scale:0.0}, {scale:1.0}, 0.00)
    .to(stationaryShimmers[1], 0.25, {scale:0.0}, 0.00 + 0.25);
  shimmerAnim.fromTo(stationaryShimmers[2], 0.7, {rotation:-100}, {rotation:80, ease: Power0.easeNone}, 0.95)
    .fromTo(stationaryShimmers[2], 0.3, {scale:0.0}, {scale:1.2}, 0.95)
    .to(stationaryShimmers[2], 0.3, {scale:0.0}, 0.95 + 0.3);
  shimmerAnim.fromTo(movingShimmer, 1.05, {rotation:-180}, {rotation:360, ease: Sine.easeOut}, 1.40)
    .fromTo(movingShimmer, 0.2, {scale: 0.0}, {scale: 1.0}, 1.40)
    .fromTo(movingShimmer, 0.25, {x:0, y:0}, {x:-104, y:180}, 1.40 + 0.1)
    .to(movingShimmer, 0.4, {x:737, y:180}, 1.40 + 0.35)
    .to(movingShimmer, 0.38, {scale: 2.0, ease: Sine.easeIn}, 1.40 + 0.42)
    .to(movingShimmer, 0.25, {scale: 0.0, ease: Sine.easeIn}, 1.40 + 0.8);
  
  // CREDITS
  ////////////////////////////////////////
  //cache elements
  var credits = document.querySelector('.credits');
  var shamelessPlug = document.querySelector('.shameless-plug');
  //animation
  var creditsAnim = new TimelineMax();
  creditsAnim.fromTo(credits, 2.5, {opacity:0.0}, {opacity:1.0}, 0.0);
  creditsAnim.fromTo(shamelessPlug, 2.5, {opacity:0.0}, {opacity:1.0}, 0.0);
  
  // TIMELINE COMPOSITION
  ////////////////////////////////////////
  fullAnimation = new TimelineMax({
    paused: true,
    onStart: updateScrubber,
    onUpdate: _.throttle(updateScrubber, 100)
  });
  fullAnimation.add(containerAnim, 0.0);
  fullAnimation.add(headAnim, 0.0);
  fullAnimation.add(lAnim, 1.0);
  fullAnimation.add(anderAnim, 1.0);
  fullAnimation.add(stripesAnim, 2.0);
  fullAnimation.add(shimmerAnim, 1.5);
  fullAnimation.add(creditsAnim, 5.0);
  
  // // JITTER EFFECT
  // ////////////////////////////////////////
  // jitterAnimation = new TimelineMax({
  //   paused: true,
  //   delay: 1.5,
  //   yoyo: true,
  //   repeat: -1
  // });
  // jitterAnimation.set(titleContainer, {x:'-=1.05', y:'-=1.05'})
  //   .to(titleContainer, 0.20, {x:'+=2.1', y:'+=2.1', ease:Sine.easeInOut})
  //   .to(titleContainer, 0.20, {x:'+=0.25', y:'-=2.15', ease:Sine.easeInOut})
  //   .to(titleContainer, 0.20, {x:'-=2.45', y:'+=2.0', ease:Sine.easeInOut})
  //   .to(titleContainer, 0.20, {x:'+=2.15', y:'+=0.6', ease:Sine.easeInOut})
  //   .to(titleContainer, 0.20, {x:'+=0.1', y:'-=2.95', ease:Sine.easeInOut})
  //   .to(titleContainer, 0.20, {x:'+=0.15', y:'+=0.35', ease:Sine.easeInOut})
  //   .to(titleContainer, 0.20, {x:'-=1.65', y:'+=0.85', ease:Sine.easeInOut})
  //   .to(titleContainer, 0.20, {x:'+=2.15', y:'+=1.45', ease:Sine.easeInOut})
  //   .to(titleContainer, 0.20, {x:'-=1.8', y:'-=2.25', ease:Sine.easeInOut});
};

var playAnimation = function() {
  if (fullAnimation) {
    if (fullAnimation.paused()) {
      if (scrubber.classList.contains('dragging')) {
        scrubber.classList.remove('dragging');
      } else {
        fullAnimation.play();
      }
    } else {
      fullAnimation.restart();
    }
  }
};

var updateScrubber = function() {
  var percentProgress = fullAnimation.progress();
  if (percentProgress < 0.01) {
    TweenMax.set(scrubberProgress, {scaleX: fullAnimation.progress(), ease: Power0.easeNone});
  } else {
    TweenMax.to(scrubberProgress, 0.1, {scaleX: fullAnimation.progress(), ease: Power0.easeNone});
  }
};

var handleScrubberClick = function(evt) {
  evt.stopImmediatePropagation();
  var percentProgress = evt.x / scrubber.clientWidth;
  TweenMax.set(scrubberProgress, {scaleX: percentProgress});
  fullAnimation.progress(percentProgress);
  fullAnimation.pause();
  scrubber.classList.add('dragging');
  
  //listen for drag move/end
  document.body.addEventListener('mouseup', handleScrubberUnclick);
  document.body.addEventListener('mousemove', handleScrubberScrub);
};

var handleScrubberUnclick = function(evt) {
  //remove listeners
  document.body.removeEventListener('mouseup', handleScrubberUnclick);
  document.body.removeEventListener('mousemove', handleScrubberScrub);
};

var handleScrubberScrub = function(evt) {
  var percentProgress = evt.x / scrubber.clientWidth;
  TweenMax.set(scrubberProgress, {scaleX: percentProgress});
  fullAnimation.progress(percentProgress);
  fullAnimation.pause();
};

(function init() {
  //stats
  var stats = new Stats();
  document.body.appendChild(stats.domElement);
  requestAnimationFrame(function updateStats(){
    stats.update();
    requestAnimationFrame(updateStats);
  });

  //cache container for resizing and scrubber for timeline control
  titleContainer = document.querySelector('.title-container');
  titleContainerDimensions = titleContainer.getBoundingClientRect();
  scrubber = document.querySelector('.scrubber');
  scrubberProgress = document.querySelector('.scrubber-progress');
  
  //generate animation
  setTimeout(makeAnimation, 100);
  setTimeout(setupStarfield, 100);
  
  //events
  window.addEventListener('resize', fitContainer);
  document.addEventListener('click', playAnimation);
  scrubber.addEventListener('mousedown', handleScrubberClick);
  
  //start it
  fitContainer(undefined, true);
  setTimeout(playAnimation, 200);
})();
              
            
!
999px

Console