Pen Settings

HTML

About HTML Preprocessors

HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.

Learn more · Versions

Adding Classes

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html> tag. If you want to add classes there that can affect the whole document, this is the place to do it.

About the <head>

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. If you need things in the <head> of the document, put that code here.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

CSS

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.

Vendor Prefixing

About Vendor Prefixing

To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit- or -moz-.

We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

Powered by Algolia
About External Resources

You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.

You can also link to another Pen here (use the .css URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

JavaScript

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient.

Learn more · Versions

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.

Powered by Algolia
About External Resources

You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.

If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ 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.

Powered by Algolia
About Packages

Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.

All packages are different, so refer to their docs for how they work.

If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.

Behavior

Auto Save

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