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 is required to process package imports. If you need a different preprocessor remove all packages first.

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

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.

Editor Settings

Code Indentation

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

Visit your global Editor Settings.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

HTML

            
              <html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, viewport-fit=cover" user-scalable="no" />
	<title>Sloss Fest 2017</title>
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
</head>
<body class="loading">
  <div class="mobile-codepen-note">CodePen doesn't seem to support device tilt. Try viewing <a href="http://files.ryankbrown.com/sloss/" target="_blank">here</a></div>
	<main>
		<div class="overlay">
			<div class="icon">
				<div class="loader">
					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128.6 129.8" id="brick-icon">
						<g id="back-face">
							<path class="st0" d="M8 8.1l18.9 18.6M21.7 32.5v.5c0 7.7-6.1 13.9-13.7 14.1v10.4l18.8 18.7M8 47.1L26.9 66M26.9 37.6L8 18.9V8.1h48.1l18.8 18.6"/>
						</g>
						<g id="lines">
							<path id="line1" class="st0" d="M26.9 76.2l45.7 45.5"/>
							<path id="line2" class="st0" d="M26.9 66l45.7 45.5"/>
							<path id="line3" class="st0" d="M26.9 37.6l45.5 45.3"/>
							<path id="line4" class="st0" d="M26.9 26.7L72.4 72"/>
							<path id="line5" class="st0" d="M74.9 26.7l45.7 45.6"/>
						</g>
						<path class="st0" d="M106.6 97.2c0 7.7 6.2 14 14 14.1v10.4h-48v-10.4c7.6-.2 13.7-6.4 13.7-14.1 0-7.7-6.1-13.9-13.7-14.1V72.3h48.1v10.9c-7.8 0-14.1 6.3-14.1 14z" id="move-face"/>
					</svg>
					<span>Loading</span>
				</div>
				<div class="mobile-icon-container">
					<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/172456/mobile-icon.svg" class="mobile-icon" alt="Mobile Icon"/>
					<span>Tilt Device</span>
				</div>
				<div class="mouse-icon-container">
					<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/172456/mouse-icon.svg" class="mouse-icon" alt="Mouse Icon"/>
					<span>Move Cursor</span>
				</div>
			</div>
		</div>
		<div class="vid-container">
			<video id="bg-vid" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/172456/sloss-bg-compressed.mp4" playsinline muted autoplay loop>
				Your browser does not support the video tag.
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/172456/sloss-bg-fallback.jpg" alt="guy jammin'" width="1400" height="1400" title="Your browser does not support the <video> tag"/>
			</video>
		</div>
		<section>
			<p class="debug">debug</p>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 204.7 263.3" id="art">
					<g id="non-animated">
						<path id="fest-F" d="M4.8 261.1h2.3v-4.9h5.3V254H7.1v-2.7h5.4v-2.1H4.8z" class="letter-element fade-in"/>
						<path id="fest-E" d="M34.1 256.2h5V254h-5v-2.7h5.3v-2.1h-7.6v11.9h7.8v-2.2h-5.5z" class="letter-element fade-in"/>
						<path id="fest-S" d="M63.4 254c-.5-.1-.9-.2-1.2-.3-.3-.1-.6-.2-.8-.3-.2-.1-.3-.3-.4-.4-.1-.2-.1-.3-.1-.6 0-.4.2-.7.5-.9.3-.2.8-.3 1.3-.3.7 0 1.2.2 1.6.5.4.4.6.8.6 1.2v.4H67v-.6c0-.5-.1-1-.3-1.4-.2-.4-.5-.8-.8-1.2-.4-.3-.8-.6-1.4-.8-.5-.2-1.2-.3-1.9-.3-.6 0-1.2.1-1.7.3-.5.2-.9.4-1.3.7-.4.3-.6.7-.8 1.1-.2.4-.3.9-.3 1.4v.1c0 .6.1 1.1.3 1.5.2.4.5.7.9 1 .4.3.8.5 1.3.7s1 .3 1.7.4c.5.1.8.2 1.1.3.3.1.5.2.7.4.2.1.3.3.4.5.1.2.1.4.1.6 0 .4-.2.8-.5 1.1-.3.3-.8.4-1.5.4-.9 0-1.5-.2-1.9-.6-.4-.4-.6-1-.6-1.7v-.4h-2.2v.5c0 .6.1 1.2.3 1.7.2.5.5 1 .9 1.4.4.4.9.7 1.5.9.6.2 1.3.3 2.1.3.7 0 1.3-.1 1.8-.3.5-.2 1-.4 1.4-.7s.7-.7.9-1.1c.2-.4.3-1 .3-1.5v-.2c0-1-.3-1.8-1-2.4-.9-.8-1.9-1.2-3.1-1.4z" class="letter-element fade-in"/>
						<path id="fest-T" d="M85.5 251.3h3.2v9.8H91v-9.8h3.1v-2.1h-8.6z" class="letter-element fade-in"/>
						<path id="fest-I" d="M112.9 251.3h2.9v7.6h-2.9v2.2h8v-2.2H118v-7.6h2.9v-2.1h-8z" class="letter-element fade-in"/>
						<path id="fest-V" d="M144.2 260h-.3l-2.4-10.8h-2.3l2.7 11.9h4.2l2.7-11.9h-2.3z" class="letter-element fade-in"/>
						<path id="fest-A" d="M173.2 249.2H169l-2.8 11.9h2.3l.6-2.6h4l.6 2.6h2.3l-2.8-11.9zm-3.6 7.2l1.4-6.1h.3l1.4 6.1h-3.1z" class="letter-element fade-in"/>
						<path id="fest-L" d="M196.6 258.9v-9.8h-2.2V261h7.7v-2.1h-5.5z" class="letter-element fade-in"/>
						<path id="two-A" d="M64.2 190.7c-.2-.4-.5-.6-.8-.6h-4.3c-.2 0-.5.1-.8.6L48 233.6c0 .3.1.5.2.7.1.1.2.3.5.3h4.5c.2 0 .3 0 .5-.1s.3-.3.3-.4l4.5-18.2h5.6l4.4 18.2c.1.4.4.6.8.6h4.8c.1 0 .2-.1.3-.2.1-.2.2-.4.2-.7l-10.4-43.1zm-4.4 19.1l1.4-5.8 1.4 5.8h-2.8z" class="letter-element fade-in"/>
						<path id="four-S" d="M141.2 10.3c.6-.5 1.4-.9 2.2-1.2.9-.3 1.8-.5 2.8-.5 1 0 1.9.2 2.8.5.8.3 1.6.7 2.2 1.2.6.5 1.1 1.1 1.5 1.7.4.6.6 1.3.6 2.1 0 .5.3.8.8.8h4.4c.6 0 .9-.3.9-.8 0-1.6-.4-3.1-1-4.5-.7-1.4-1.6-2.6-2.8-3.6-1.2-1-2.6-1.8-4.2-2.4-1.6-.6-3.3-.9-5.1-.9-1.8 0-3.5.3-5 .9-1.6.6-3 1.4-4.2 2.4-1.2 1-2.1 2.3-2.8 3.6-.7 1.4-1 2.9-1 4.5 0 1.5.3 3 1 4.3.6 1.4 1.5 2.6 2.7 3.7l.5.5c.2.1.3.3.5.4l13.1 9.2c.8.6 1.4 1.2 1.8 1.9.4.7.6 1.5.6 2.2 0 .7-.2 1.4-.6 2.1-.4.7-.9 1.2-1.5 1.7s-1.4.9-2.2 1.2c-.8.3-1.8.5-2.8.5-1 0-1.9-.2-2.8-.5-.9-.3-1.6-.7-2.2-1.2-.6-.5-1.1-1.1-1.5-1.7-.4-.6-.6-1.3-.6-2.1s-.5-.9-.8-.9h-4.4c-.2 0-.4.1-.5.2-.2.2-.2.4-.2.6 0 1.5.4 3 1 4.4.7 1.4 1.6 2.6 2.8 3.7 1.2 1 2.6 1.9 4.1 2.5 1.6.6 3.3.9 5 .9 1.8 0 3.5-.3 5.1-.9 1.6-.6 3-1.4 4.2-2.5 1.2-1 2.1-2.3 2.8-3.7.7-1.4 1-2.9 1-4.4 0-1.8-.4-3.5-1.3-5s-2.1-2.9-3.6-4c-3.8-2.7-6.3-4.4-7.7-5.4-1.9-1.3-3.2-2.2-4-2.8-.9-.6-1.4-.9-1.6-1.1-.1-.1-.3-.2-.3-.2-.5-.5-1-1.1-1.3-1.7-.3-.6-.5-1.3-.5-1.9 0-.7.2-1.4.6-2.1.3-.6.8-1.2 1.5-1.7z" class="letter-element fade-in"/>
					</g>
					<g id="one-S-M">
						<g id="S-M-bargroup">
							<path id="S-M-bar-1" d="M4.6 234.5h25.9v-5.6H4.6v5.6z" class="letter-element"/>
							<path id="S-M-bar-2" d="M4.6 215.1h25.9v5.6H4.6z" class="letter-element"/>
							<path id="S-M-bar-3" d="M4.6 206.5h25.9v-5.6H4.6v5.6z" class="letter-element"/>
							<path id="S-M-bar-4" d="M4.6 187h25.9v5.6H4.6z" class="letter-element"/>
						</g>
						<path id="one-and-end" d="M31.8 160.2l-3-4.1c.8-1.7 1.1-3.6 1.1-5.5 0-.6-.3-.9-.9-.9h-4.1c-.3 0-.6.1-.7.3l-5.2-7.1c1-.2 2-.5 2.9-1 1.1-.6 2-1.4 2.9-2.3.8-.9 1.5-2 1.9-3.2.5-1.2.7-2.5.7-3.8 0-1.4-.3-2.8-.8-4-.5-1.3-1.3-2.4-2.2-3.3s-2.1-1.7-3.3-2.2c-2.6-1.1-5.6-1.1-8.1 0-1.3.6-2.4 1.3-3.3 2.2-.9.9-1.7 2.1-2.2 3.3-.5 1.3-.8 2.6-.8 4s.2 2.7.8 3.9c.5 1.1 1.1 2.1 1.9 3-1.7 1.2-3.1 2.7-4.1 4.5-1.1 2-1.7 4.2-1.7 6.5 0 1.8.4 3.6 1.1 5.2.7 1.6 1.7 3 2.9 4.2 1.2 1.2 2.6 2.2 4.2 2.8 1.6.7 3.3 1 5.2 1 1.6 0 3.2-.3 4.6-.8 1.4-.5 2.6-1.2 3.7-2.1l2.1 2.7c.1.3.4.4.7.4.2 0 .4 0 .6-.1l3.2-2.5c.2-.1.4-.3.5-.5-.3-.1-.4-.3-.6-.6zm-18.1-30.8c.9-.8 1.9-1.3 3.2-1.3 1.3 0 2.3.4 3.2 1.3.9.9 1.3 1.9 1.3 3.1 0 1.3-.4 2.4-1.3 3.2s-1.9 1.3-3.2 1.3c-1.3 0-2.3-.4-3.2-1.3s-1.3-1.9-1.3-3.2c0-1.2.5-2.3 1.3-3.1zm5.6 28c-1.8.7-3.8.7-5.6 0-.9-.4-1.7-.9-2.3-1.6-.7-.7-1.2-1.5-1.6-2.4-.4-.9-.6-1.9-.6-2.9 0-1.3.3-2.6 1-3.7.6-1 1.4-1.9 2.4-2.5l8.8 11.8c-.6.5-1.3 1-2.1 1.3z" class="letter-element fade-in"/>
						<path id="one-M-end" d="M7.9 106c.5 0 .8-.3.8-.8V76.9L15 89c.1.3.3.4.6.4s.6-.1.7-.4l6.2-12.1v28.4c0 .5.3.8.8.8h4.5c.4 0 .7-.3.7-.8V62.4c0-.2 0-.4-.1-.5v-.1h-.1c-.2-.1-.4-.1-.5-.1h-3.6c-.3 0-.5.1-.7.4l-7.9 15.4L7.8 62c-.2-.3-.4-.4-.7-.4H3.5c-.5 0-.8.3-.8.8l.1 42.9c0 .5.3.8.7.8h4.4z" class="letter-element fade-in"/>
						<path id="one-S-end" d="M20.6 40.1c-.6.5-1.4.9-2.2 1.2-.8.3-1.8.5-2.8.5-1 0-1.9-.2-2.8-.5-.9-.3-1.6-.7-2.2-1.2-.6-.5-1.2-1.1-1.5-1.7-.4-.6-.6-1.3-.6-2.1s-.5-.9-.8-.9H3.3c-.2 0-.4.1-.5.2-.2.2-.2.4-.2.6 0 1.5.4 3 1 4.4.7 1.4 1.6 2.6 2.8 3.7 1.2 1 2.6 1.9 4.1 2.5 1.6.6 3.3.9 5 .9 1.8 0 3.5-.3 5.1-.9 1.6-.6 3-1.4 4.2-2.5 1.2-1 2.1-2.3 2.8-3.7.7-1.4 1-2.9 1-4.4 0-1.8-.4-3.5-1.3-5s-2.1-2.9-3.6-4c-3.1-2.2-5.8-4.1-7.7-5.4-1.9-1.3-3.2-2.2-4-2.8-.9-.6-1.4-.9-1.6-1.1-.1-.1-.3-.2-.3-.2-.5-.5-1-1.1-1.3-1.7-.3-.6-.5-1.3-.5-1.9 0-.7.2-1.4.6-2.1.4-.7.9-1.2 1.5-1.7s1.4-.9 2.2-1.2c.9-.3 1.8-.5 2.8-.5 1 0 1.9.2 2.8.5.8.3 1.6.7 2.2 1.2.6.5 1.1 1.1 1.5 1.7.4.6.6 1.3.6 2.1 0 .5.3.8.8.8h4.4c.6 0 .9-.3.9-.8 0-1.6-.4-3.1-1-4.5C27 8.3 26.1 7 24.9 6c-1.2-1-2.6-1.8-4.2-2.4-1.6-.6-3.3-.9-5.1-.9-1.8 0-3.5.3-5 .9C9 4.2 7.6 5 6.4 6 5.2 7 4.3 8.3 3.6 9.7c-.7 1.4-1 2.9-1 4.5 0 1.5.3 3 1 4.3.6 1.4 1.5 2.6 2.7 3.7l.5.5c.2.1.3.3.5.4l13.1 9.2c.8.6 1.4 1.2 1.8 1.9.4.7.6 1.5.6 2.2 0 .7-.2 1.4-.6 2.1-.4.5-1 1.1-1.6 1.6z" class="letter-element fade-in"/>
						<path id="one-S-start" d="M20.6 40.1c-.6.5-1.4.9-2.2 1.2-.8.3-1.8.5-2.8.5-1 0-1.9-.2-2.8-.5-.9-.3-1.6-.7-2.2-1.2-.6-.5-1.2-1.1-1.5-1.7-.4-.6-.6-1.3-.6-2.1s-.5-.9-.8-.9H3.3c-.2 0-.4.1-.5.2-.2.2-.2.4-.2.6 0 1.5.4 3 1 4.4.7 1.4 1.6 2.6 2.8 3.7 1.2 1 2.6 1.9 4.1 2.5 1.6.6 3.3.9 5 .9 1.8 0 3.5-.3 5.1-.9 1.6-.6 3-1.4 4.2-2.5 1.2-1 2.1-2.3 2.8-3.7.7-1.4 1-2.9 1-4.4 0-1.8-.4-3.5-1.3-5s-2.1-2.9-3.6-4c-3.1-2.2-5.8-4.1-7.7-5.4-1.9-1.3-3.2-2.2-4-2.8-.9-.6-1.4-.9-1.6-1.1-.1-.1-.3-.2-.3-.2-.5-.5-1-1.1-1.3-1.7-.3-.6-.5-1.3-.5-1.9 0-.7.2-1.4.6-2.1.4-.7.9-1.2 1.5-1.7s1.4-.9 2.2-1.2c.9-.3 1.8-.5 2.8-.5 1 0 1.9.2 2.8.5.8.3 1.6.7 2.2 1.2.6.5 1.1 1.1 1.5 1.7.4.6.6 1.3.6 2.1 0 .5.3.8.8.8h4.4c.6 0 .9-.3.9-.8 0-1.6-.4-3.1-1-4.5C27 8.3 26.1 7 24.9 6c-1.2-1-2.6-1.8-4.2-2.4-1.6-.6-3.3-.9-5.1-.9-1.8 0-3.5.3-5 .9C9 4.2 7.6 5 6.4 6 5.2 7 4.3 8.3 3.6 9.7c-.7 1.4-1 2.9-1 4.5 0 1.5.3 3 1 4.3.6 1.4 1.5 2.6 2.7 3.7l.5.5c.2.1.3.3.5.4l13.1 9.2c.8.6 1.4 1.2 1.8 1.9.4.7.6 1.5.6 2.2 0 .7-.2 1.4-.6 2.1-.4.5-1 1.1-1.6 1.6z" class="letter-element fade-in"/>
						<path id="one-M-start" d="M7.9 177c.5 0 .8-.3.8-.8V76.9L15 89c.1.3.3.4.6.4s.6-.1.7-.4l6.2-12.1v99.4c0 .5.3.8.8.8h4.5c.4 0 .7-.3.7-.8V62.4c0-.2 0-.4-.1-.5v-.1h-.1c-.2-.1-.4-.1-.5-.1h-3.6c-.3 0-.5.1-.7.4l-7.9 15.4L7.8 62c-.2-.3-.4-.4-.7-.4H3.5c-.5 0-.8.3-.8.8l.1 113.9c0 .5.3.8.7.8h4.4z" class="letter-element fade-in"/>
						<path id="one-and-start" d="M31.8 231.2l-3-4.1c.8-1.7 1.1-3.6 1.1-5.5 0-.6-.3-.9-.9-.9h-4.1c-.3 0-.6.1-.7.4L19 214c1-.2 2-.5 2.9-1 1.1-.6 2-1.4 2.9-2.3.8-.9 1.5-2 1.9-3.2.5-1.2.7-2.5.7-3.8 0-1.4-.3-2.8-.8-4-.5-1.3-1.3-2.4-2.2-3.3s-2.1-1.7-3.3-2.2c-2.6-1.1-5.6-1.1-8.1 0-1.3.5-2.4 1.3-3.3 2.2-.9 1-1.7 2.1-2.2 3.3-.5 1.3-.8 2.6-.8 4s.2 2.7.8 3.9c.5 1.1 1.1 2.1 1.9 3-1.7 1.2-3.1 2.7-4.1 4.5-1.1 2-1.7 4.2-1.7 6.5 0 1.8.4 3.6 1.1 5.2.7 1.6 1.7 3 2.9 4.2 1.2 1.2 2.6 2.1 4.2 2.8 1.6.7 3.3 1 5.2 1 1.6 0 3.2-.3 4.6-.8 1.4-.5 2.6-1.2 3.7-2.1l2.1 2.7c.1.3.4.4.7.4.2 0 .4 0 .6-.1l3.2-2.5c.2-.1.4-.3.5-.5-.3-.1-.4-.4-.6-.7zm-18.1-30.8c.9-.8 1.9-1.3 3.2-1.3 1.3 0 2.3.4 3.2 1.3.9.8 1.3 1.9 1.3 3.1 0 1.3-.4 2.3-1.3 3.2s-1.9 1.3-3.2 1.3c-1.3 0-2.3-.4-3.2-1.3s-1.3-1.9-1.3-3.2c0-1.2.5-2.2 1.3-3.1zm5.6 28c-1.8.7-3.8.7-5.6 0-.9-.4-1.7-.9-2.3-1.6-.7-.7-1.2-1.5-1.6-2.4-.4-.9-.6-1.9-.6-2.9 0-1.3.3-2.6 1-3.7.6-1 1.4-1.9 2.4-2.5l8.8 11.8c-.6.5-1.3 1-2.1 1.3z" class="letter-element fade-in"/>
					</g>
					<g id="two-L-U">
						<path id="two-L-start" d="M49.2 118.3h24.1c.5 0 .8-.3.8-.8v-4.4c0-.2-.1-.3-.2-.5s-.3-.3-.6-.3H54.4V3.7c0-.2-.1-.4-.3-.6-.2-.1-.3-.2-.5-.2h-4.4c-.2 0-.7.1-.7.8l.1 113.9c-.1.7.4.7.6.7z" class="letter-element fade-in"/>
						<path id="two-L-end" d="M49.2 48.1h24.1c.5 0 .8-.3.8-.8v-4.4c0-.2-.1-.3-.2-.5s-.3-.3-.6-.3H54.4V3.7c0-.2-.1-.4-.3-.6-.2-.1-.3-.2-.5-.2h-4.4c-.2 0-.7.1-.7.8l.1 43.6c-.1.7.4.8.6.8z" class="letter-element fade-in"/>
						<path id="two-U-start" d="M52.2 172c1.1 1.2 2.5 2.1 4.1 2.8 1.6.7 3.2 1 5 1 1.8 0 3.5-.3 5-1s2.9-1.6 4-2.8c1.1-1.2 2.1-2.5 2.7-4.1.7-1.5 1-3.2 1-5V132c0-.2-.1-.7-.8-.7H69c-.2 0-.4 0-.6.1-.2.1-.3.3-.3.5v30.9c0 .9-.2 1.8-.5 2.7-.4.8-.9 1.6-1.5 2.2-.6.6-1.4 1.1-2.2 1.5-.8.4-1.7.5-2.6.5-.9 0-1.8-.2-2.6-.5-.8-.4-1.6-.9-2.2-1.5-.6-.6-1.1-1.4-1.5-2.2-.4-.8-.6-1.7-.6-2.7V132c0-.2-.1-.7-.8-.7h-4.4c-.7 0-.8.5-.8.7v30.9c0 1.8.3 3.5 1 5 .8 1.6 1.7 2.9 2.8 4.1z" class="letter-element fade-in"/>
						<path id="two-U-end" d="M52.2 172c1.1 1.2 2.5 2.1 4.1 2.8 1.6.7 3.2 1 5 1 1.8 0 3.5-.3 5-1s2.9-1.6 4-2.8c1.1-1.2 2.1-2.5 2.7-4.1.7-1.5 1-3.2 1-5V61.7c0-.2-.1-.7-.8-.7H69c-.2 0-.4 0-.6.1-.2.1-.3.3-.3.5v101.2c0 .9-.2 1.8-.5 2.7-.4.8-.9 1.6-1.5 2.2-.6.6-1.4 1.1-2.2 1.5-.8.4-1.7.5-2.6.5-.9 0-1.8-.2-2.6-.5-.8-.4-1.6-.9-2.2-1.5-.6-.6-1.1-1.4-1.5-2.2-.4-.8-.6-1.7-.6-2.7V61.7c0-.2-.1-.7-.8-.7h-4.4c-.7 0-.8.5-.8.7v101.2c0 1.8.3 3.5 1 5 .8 1.6 1.7 2.9 2.8 4.1z" class="letter-element fade-in"/>
					</g>
					<g id="three-O-S-R">
						<path id="three-O-start" d="M115.7 9.8c-.6-1.5-1.6-2.9-2.7-4s-2.5-2.1-4-2.7-3.2-1-4.9-1-3.4.4-4.9 1c-1.5.7-2.9 1.6-4 2.7-1.1 1.2-2.1 2.5-2.7 4-.7 1.5-1 3.2-1 4.9v21.8c0 1.7.3 3.4 1 4.9.6 1.6 1.6 2.9 2.7 4.1 1.1 1.1 2.5 2.1 4 2.7 1.5.7 3.2 1 4.9 1 1.8 0 3.4-.3 4.9-1 1.5-.7 2.9-1.6 4-2.7s2-2.5 2.7-4.1c.7-1.5 1-3.2 1-4.9V14.8c0-1.8-.3-3.4-1-5zm-4.8 26.7c0 .9-.2 1.8-.5 2.7-.4.8-.9 1.6-1.5 2.2-.6.6-1.3 1.1-2.2 1.5-.8.4-1.7.5-2.6.5s-1.8-.2-2.7-.5c-.8-.4-1.6-.8-2.2-1.5s-1.1-1.4-1.5-2.2c-.4-.8-.5-1.7-.5-2.7V14.7c0-.9.2-1.8.5-2.6.4-.8.8-1.5 1.5-2.2.6-.6 1.4-1.1 2.2-1.4.8-.4 1.7-.5 2.7-.5.9 0 1.8.2 2.6.5.8.4 1.5.8 2.2 1.4.6.6 1.1 1.3 1.5 2.2.3.8.5 1.7.5 2.6v21.8z" class="letter-element fade-in"/>
						<path id="three-S-start" d="M94.7 103.2c1.2 1 2.6 1.9 4.1 2.5 1.6.6 3.3.9 5 .9 1.8 0 3.5-.3 5.1-.9 1.6-.6 3-1.4 4.2-2.5 1.2-1 2.1-2.3 2.8-3.7.7-1.4 1-2.9 1-4.4 0-1.8-.4-3.5-1.3-5s-2.1-2.9-3.6-4c-3.7-2.6-6.2-4.4-7.7-5.4-2-1.4-3.2-2.2-4-2.8-.9-.6-1.4-.9-1.6-1.1-.1-.1-.3-.2-.3-.2-.5-.5-1-1.1-1.3-1.7-.3-.6-.5-1.2-.5-1.9s.2-1.4.6-2.1c.4-.7.9-1.2 1.5-1.7s1.4-.9 2.2-1.2c.9-.3 1.8-.5 2.8-.5 1 0 1.9.2 2.8.5.8.3 1.6.7 2.2 1.2.6.5 1.1 1.1 1.5 1.7.4.6.6 1.3.6 2.1 0 .5.3.8.8.8h4.4c.6 0 .9-.3.9-.8 0-1.6-.4-3.1-1-4.5-.7-1.4-1.6-2.6-2.8-3.6-1.2-1-2.6-1.8-4.2-2.4-1.6-.6-3.3-.9-5.1-.9-1.8 0-3.5.3-5 .9-1.6.6-3 1.4-4.2 2.4-1.2 1-2.1 2.3-2.8 3.6-.7 1.4-1 2.9-1 4.5 0 1.5.3 3 1 4.3.6 1.4 1.5 2.6 2.7 3.7l.5.5c.2.1.3.3.5.4l13.1 9.2c.8.6 1.4 1.2 1.8 1.9.4.7.6 1.5.6 2.2 0 .7-.2 1.4-.6 2.1-.4.7-.9 1.2-1.5 1.7s-1.4.9-2.2 1.2c-.8.3-1.8.5-2.8.5-1 0-1.9-.2-2.8-.5-.9-.3-1.6-.7-2.2-1.2-.6-.5-1.1-1.1-1.5-1.7-.4-.6-.6-1.3-.6-2.1s-.5-.9-.8-.9h-4.4c-.2 0-.4.1-.5.2-.2.2-.2.4-.2.6 0 1.5.4 3 1 4.4.7 1.4 1.6 2.6 2.8 3.7z" class="letter-element fade-in"/>
						<path id="three-R-start" d="M110.8 214.6c1.3-.7 2.5-1.5 3.6-2.5 1.1-1.1 2-2.5 2.7-4 .6-1.5 1-3.2 1-4.9v-71.3c0-.9-.1-1.8-.3-2.6-.1-.4-.2-.8-.3-1.1-.1-.4-.3-.9-.5-1.3-.7-1.5-1.6-2.9-2.7-4.1-1.1-1.2-2.5-2.1-4-2.8-1.5-.7-3.2-1-5-1H93.7c-.3 0-.5.1-.7.3-.2.2-.3.4-.3.6v83.3c0 .5.1 1.5.1 1.5v29.2c0 .2.1.3.2.5s.3.2.5.2H98c.3 0 .5-.1.6-.2.1-.2.2-.3.2-.5v-18.6h5.6l.2.5 8.4 18.4c.1.4.4.6.8.6h4.9c.2 0 .5-.1.7-.4.1-.2.2-.4.2-.7l-8.8-19.1zm-2.3-6.1l-.6.3c-.2.1-.5.2-.8.3-.9.1-1.6.1-2.6.1l-5.5.1v-84.1h6.3c.9 0 1.7.2 2.5.5.2.1.3.2.5.2l1.5 1.5c.6.5 1 1.2 1.3 2 .3.8.5 1.6.5 2.4v71.8c0 .2 0 .4-.1.6v.1c0 .2-.1.4-.2.6-.1.2-.1.4-.2.5-.3.8-.8 1.4-1.3 2-.4.5-.8.8-1.3 1.1z" class="letter-element fade-in"/>
						<path id="three-O-end" d="M115.7 9.8c-.6-1.5-1.6-2.9-2.7-4s-2.5-2.1-4-2.7-3.2-1-4.9-1-3.4.4-4.9 1c-1.5.7-2.9 1.6-4 2.7-1.1 1.2-2.1 2.5-2.7 4-.7 1.5-1 3.2-1 4.9v91.4c0 1.7.3 3.4 1 4.9.6 1.5 1.6 2.9 2.7 4 1.1 1.2 2.5 2.1 4 2.7 1.5.7 3.2 1 4.9 1 1.8 0 3.4-.3 4.9-1s2.9-1.6 4-2.7 2-2.5 2.7-4c.7-1.5 1-3.2 1-4.9V14.8c0-1.8-.3-3.4-1-5zm-4.8 96.3c0 .9-.2 1.8-.5 2.7-.4.8-.9 1.6-1.5 2.2-.6.6-1.3 1.1-2.2 1.5-.8.3-1.7.5-2.6.5s-1.8-.2-2.7-.5c-.8-.4-1.6-.9-2.2-1.5s-1.1-1.3-1.5-2.2c-.4-.8-.5-1.7-.5-2.7V14.7c0-.9.2-1.8.5-2.6.4-.8.8-1.5 1.5-2.2.6-.6 1.4-1.1 2.2-1.4.8-.4 1.7-.5 2.7-.5.9 0 1.8.2 2.6.5.8.4 1.5.8 2.2 1.4.6.6 1.1 1.3 1.5 2.2.3.8.5 1.7.5 2.6v91.4z" class="letter-element fade-in"/>
						<path id="three-S-end" d="M94.7 172.8c1.2 1 2.6 1.9 4.1 2.5 1.6.6 3.3.9 5 .9 1.8 0 3.5-.3 5.1-.9 1.6-.6 3-1.4 4.2-2.5 1.2-1 2.1-2.3 2.8-3.7.7-1.4 1-2.9 1-4.4 0-1.8-.4-3.5-1.3-5s-2.1-2.9-3.6-4c-3.7-2.6-6.2-4.4-7.7-5.4-2-1.4-3.2-2.2-4-2.8-.9-.6-1.4-.9-1.6-1.1-.1-.1-.3-.2-.3-.2-.5-.5-1-1.1-1.3-1.7-.3-.6-.5-1.2-.5-1.9s.2-1.4.6-2.1c.4-.7.9-1.2 1.5-1.7s1.4-.9 2.2-1.2c.9-.3 1.8-.5 2.8-.5 1 0 1.9.2 2.8.5.8.3 1.6.7 2.2 1.2.6.5 1.1 1.1 1.5 1.7.4.6.6 1.3.6 2.1 0 .5.3.8.8.8h4.4c.6 0 .9-.3.9-.8 0-1.6-.4-3.1-1-4.5-.7-1.4-1.6-2.6-2.8-3.6-1.2-1-2.6-1.8-4.2-2.4-1.6-.6-3.3-.9-5.1-.9-1.8 0-3.5.3-5 .9-1.6.6-3 1.4-4.2 2.4-1.2 1-2.1 2.3-2.8 3.6-.7 1.4-1 2.9-1 4.5 0 1.5.3 3 1 4.3.6 1.4 1.5 2.6 2.7 3.7l.5.5c.2.1.3.3.5.4l13.1 9.2c.8.6 1.4 1.2 1.8 1.9.4.7.6 1.5.6 2.2 0 .7-.2 1.4-.6 2.1-.4.7-.9 1.2-1.5 1.7s-1.4.9-2.2 1.2c-.8.3-1.8.5-2.8.5-1 0-1.9-.2-2.8-.5-.9-.3-1.6-.7-2.2-1.2-.6-.5-1.1-1.1-1.5-1.7-.4-.6-.6-1.3-.6-2.1s-.5-.9-.8-.9h-4.4c-.2 0-.4.1-.5.2-.2.2-.2.4-.2.6 0 1.5.4 3 1 4.4.7 1.4 1.6 2.6 2.8 3.7z" class="letter-element fade-in"/>
						<path id="three-R-end" d="M110.8 214.6c1.3-.7 2.5-1.5 3.6-2.5 1.1-1.1 2-2.5 2.7-4 .6-1.5 1-3.2 1-4.9v-1.7c0-.9-.1-1.8-.3-2.6-.1-.4-.2-.8-.3-1.1-.1-.4-.3-.9-.5-1.3-.7-1.5-1.6-2.9-2.7-4.1-1.1-1.2-2.5-2.1-4-2.8-1.5-.7-3.2-1-5-1H93.7c-.3 0-.5.1-.7.3-.2.2-.3.4-.3.6v13.7c0 .5.1 1.5.1 1.5v29.2c0 .2.1.3.2.5s.3.2.5.2H98c.3 0 .5-.1.6-.2.1-.2.2-.3.2-.5v-18.6h5.6l.2.5 8.4 18.4c.1.4.4.6.8.6h4.9c.2 0 .5-.1.7-.4.1-.2.2-.4.2-.7l-8.8-19.1zm-2.3-6.1l-.6.3c-.2.1-.5.2-.8.3-.9.1-1.6.1-2.6.1l-5.5.1v-14.5h6.3c.9 0 1.7.2 2.5.5.2.1.3.2.5.2l1.5 1.5c.6.5 1 1.2 1.3 2 .3.8.5 1.6.5 2.4v2.3c0 .2 0 .4-.1.6v.1c0 .2-.1.4-.2.6-.1.2-.1.4-.2.5-.3.8-.8 1.4-1.3 2-.4.4-.8.7-1.3 1z" class="letter-element fade-in"/>
					</g>
					<g id="four-I-T">
						<path id="four-T-start" d="M160.2 190.1h-27.9c-.5 0-.8.3-.8.8v4.4c0 .5.3.8.8.8h11v37.6c0 .5.3.8.8.8h4.4c.2 0 .3-.1.5-.2s.3-.4.3-.6v-37.6h11c.5 0 .8-.3.8-.8v-4.4c-.1-.5-.4-.8-.9-.8z" class="letter-element fade-in"/>
						<path id="four-T-end" d="M160.2 121.8h-27.9c-.5 0-.8.3-.8.8v4.4c0 .5.3.8.8.8h11v105.9c0 .5.3.8.8.8h4.4c.2 0 .3-.1.5-.2s.3-.4.3-.6V127.8h11c.5 0 .8-.3.8-.8v-4.4c-.1-.5-.4-.8-.9-.8z" class="letter-element fade-in"/>
						<path id="four-I-start" d="M143.5 173.9c.1.2.3.3.5.3h4.5c.2 0 .4-.1.5-.3.1-.2.2-.3.2-.5V62.5c0-.4-.3-.7-.7-.7H144c-.5 0-.7.3-.7.7l.1 110.9c-.1.2 0 .3.1.5z" class="letter-element fade-in"/>
						<path id="four-I-end" d="M143.5 105.6c.1.2.3.3.5.3h4.5c.2 0 .4-.1.5-.3.1-.2.2-.3.2-.5V62.5c0-.4-.3-.7-.7-.7H144c-.5 0-.7.3-.7.7l.1 42.6c-.1.2 0 .4.1.5z" class="letter-element fade-in"/>
					</g>
					<g id="five-S-C-S">
						<g id="S-C-S-bargroup">
							<path id="S-C-S-bar-1" d="M176 48h25.9v-5.6H176V48z" class="letter-element fade-in"/>
							<path id="S-C-S-bar-2" d="M176 29.2h25.9v5.6H176z" class="letter-element fade-in"/>
							<path id="S-C-S-bar-3" d="M176 21.5h25.9v-5.6H176v5.6z" class="letter-element fade-in"/>
							<path id="S-C-S-bar-4" d="M176 2.7h25.9v5.6H176z" class="letter-element fade-in"/>
						</g>
						<path id="five-S-start" d="M193.9 99.2c-.6.5-1.4.9-2.2 1.2-.8.3-1.8.5-2.8.5-1 0-1.9-.2-2.8-.5-.9-.3-1.6-.7-2.2-1.2-.6-.5-1.1-1.1-1.5-1.7-.4-.6-.6-1.3-.6-2.1s-.5-.9-.8-.9h-4.4c-.2 0-.4.1-.5.2-.2.2-.2.4-.2.6 0 1.5.4 3 1 4.4.7 1.4 1.6 2.6 2.8 3.7 1.2 1 2.6 1.9 4.1 2.5 1.6.6 3.3.9 5.1.9 1.8 0 3.5-.3 5.1-.9 1.6-.6 3-1.4 4.2-2.5 1.2-1 2.1-2.3 2.8-3.7.7-1.4 1-2.9 1-4.4 0-1.8-.4-3.5-1.3-5s-2.1-2.9-3.6-4c-3-2.1-5.7-4-7.7-5.4-1.9-1.3-3.2-2.2-4-2.8-.9-.6-1.4-.9-1.6-1.1-.1-.1-.3-.2-.3-.2-.5-.5-1-1.1-1.3-1.7-.3-.6-.5-1.3-.5-1.9 0-.7.2-1.4.6-2.1.4-.7.9-1.2 1.5-1.7s1.4-.9 2.2-1.2c.9-.3 1.8-.5 2.8-.5 1 0 1.9.2 2.8.5.8.3 1.6.7 2.2 1.2.6.5 1.1 1.1 1.5 1.7.4.6.6 1.3.6 2.1 0 .5.3.8.8.8h4.4c.6 0 .9-.3.9-.8 0-1.6-.4-3.1-1-4.5-.7-1.4-1.6-2.6-2.8-3.6-1.2-1-2.6-1.8-4.2-2.4-1.6-.6-3.3-.9-5.1-.9-1.8 0-3.5.3-5.1.9-1.6.6-3 1.4-4.2 2.4-1.2 1-2.1 2.3-2.8 3.6-.7 1.4-1 2.9-1 4.5 0 1.5.3 3 1 4.3.6 1.4 1.5 2.6 2.7 3.7l.5.5c.2.1.3.3.5.4l13.1 9.2c.8.6 1.4 1.2 1.8 1.9.4.7.6 1.5.6 2.2 0 .7-.2 1.4-.6 2.1-.3.6-.8 1.2-1.5 1.7z" class="letter-element fade-in"/>
						<path id="five-C-start" d="M196.8 137.6h4.4c.5 0 .7-.3.7-.8v-2.5c0-1.8-.3-3.5-1-5-.7-1.6-1.6-2.9-2.8-4.1-1.2-1.2-2.6-2.1-4.1-2.8-1.6-.7-3.2-1-5-1-1.8 0-3.5.3-5 1-1.6.7-2.9 1.6-4.1 2.8-1.2 1.2-2.1 2.6-2.8 4.1-.7 1.6-1 3.3-1 5v29c0 1.8.3 3.5 1 5.1.7 1.6 1.6 3 2.8 4.1 1.2 1.2 2.5 2.1 4.1 2.8 1.6.7 3.2 1 5 1 1.8 0 3.5-.3 5-1 1.6-.7 2.9-1.6 4.1-2.7 1.2-1.2 2.1-2.5 2.8-4.1.7-1.6 1-3.3 1-5.1v-2.9c0-.5-.3-.8-.7-.8h-4.4c-.5 0-.8.3-.8.8v2.9c0 1-.2 1.9-.5 2.7-.4.9-.9 1.6-1.5 2.2-.6.6-1.4 1.1-2.2 1.5-.8.4-1.8.5-2.8.5-1 0-1.9-.2-2.7-.5-.8-.4-1.6-.9-2.2-1.5-.6-.6-1.1-1.4-1.5-2.2-.4-.8-.5-1.8-.5-2.8v-29c0-1 .2-1.9.5-2.8.4-.8.9-1.6 1.5-2.2.6-.6 1.4-1.1 2.2-1.5.8-.4 1.7-.5 2.7-.5 1 0 1.9.2 2.8.5.9.4 1.6.9 2.2 1.5.6.6 1.1 1.4 1.5 2.2.4.8.5 1.8.5 2.7v2.5c0 .6.3.9.8.9z" class="letter-element fade-in"/>
						<path id="five-ES-start" d="M197.2 214.4c-3-2.2-5.7-4-7.7-5.4-1.8-1.3-3.2-2.2-4-2.8-.9-.6-1.4-.9-1.6-1.1-.1-.1-.3-.2-.3-.2-.5-.5-1-1.1-1.3-1.7-.3-.6-.5-1.3-.5-1.9 0-.7.2-1.4.6-2.1.4-.7.9-1.2 1.5-1.8.6-.5 1.4-.9 2.2-1.2.9-.3 1.8-.5 2.8-.5 1 0 1.9.2 2.8.5.9.3 1.6.7 2.3 1.2.6.5 1.1 1.1 1.5 1.8.4.6.6 1.3.6 2.1 0 .5.3.8.8.8h4.4c.6 0 .9-.3.9-.8 0-1.6-.4-3.1-1-4.5-.7-1.4-1.6-2.6-2.8-3.6-1.2-1-2.6-1.9-4.2-2.4-1.6-.6-3.3-.9-5.1-.9-1.8 0-3.5.3-5.1.9-1.6.6-3 1.4-4.2 2.4-1.2 1-2.1 2.3-2.8 3.6-.7 1.4-1 2.9-1 4.5 0 1.5.3 3 1 4.3.6 1.4 1.5 2.6 2.7 3.7l.5.5c.2.1.3.3.5.4l13.1 9.2c.8.6 1.4 1.2 1.8 1.9.4.7.6 1.5.6 2.2 0 .7-.2 1.4-.6 2.1-.4.7-.9 1.2-1.5 1.8-.6.5-1.4.9-2.2 1.2-.8.3-1.8.5-2.8.5-1 0-1.9-.2-2.8-.5-.9-.3-1.6-.7-2.3-1.2-.6-.5-1.2-1.1-1.5-1.8-.4-.6-.6-1.3-.6-2.1s-.5-.9-.8-.9h-4.5c-.2 0-.3.1-.5.2-.2.2-.2.4-.2.6 0 1.6.4 3 1 4.4.7 1.4 1.6 2.6 2.8 3.7 1.2 1 2.6 1.9 4.1 2.5 1.6.6 3.3.9 5.1.9 1.8 0 3.5-.3 5.1-.9 1.6-.6 3-1.4 4.2-2.5 1.2-1.1 2.1-2.3 2.8-3.7.7-1.4 1-2.9 1-4.4 0-1.8-.4-3.5-1.3-5-.8-1.6-2-2.9-3.5-4z" class="letter-element fade-in"/>
						<path id="five-S-end" d="M193.9 40c-.6.5-1.4.9-2.2 1.2-.8.3-1.8.5-2.8.5-1 0-1.9-.2-2.8-.5-.9-.3-1.6-.7-2.2-1.2-.6-.5-1.1-1.1-1.5-1.7-.4-.6-.6-1.3-.6-2.1s-.5-.9-.8-.9h-4.4c-.2 0-.4.1-.5.2-.2.2-.2.4-.2.6 0 1.5.4 3 1 4.4.7 1.4 1.6 2.6 2.8 3.7 1.2 1 2.6 1.9 4.1 2.5 1.6.6 3.3.9 5.1.9 1.8 0 3.5-.3 5.1-.9 1.6-.6 3-1.4 4.2-2.5 1.2-1 2.1-2.3 2.8-3.7.7-1.4 1-2.9 1-4.4 0-1.8-.4-3.5-1.3-5s-2.1-2.9-3.6-4c-3-2.1-5.7-4-7.7-5.4-1.9-1.3-3.2-2.2-4-2.8-.9-.6-1.4-.9-1.6-1.1-.1-.1-.3-.2-.3-.2-.5-.5-1-1.1-1.3-1.7-.3-.6-.5-1.3-.5-1.9 0-.7.2-1.4.6-2.1.4-.7.9-1.2 1.5-1.7s1.4-.9 2.2-1.2c.9-.3 1.8-.5 2.8-.5 1 0 1.9.2 2.8.5.8.3 1.6.7 2.2 1.2.6.5 1.1 1.1 1.5 1.7.4.6.6 1.3.6 2.1 0 .5.3.8.8.8h4.4c.6 0 .9-.3.9-.8 0-1.6-.4-3.1-1-4.5-.7-1.4-1.6-2.6-2.8-3.6-1.2-1-2.6-1.8-4.2-2.4-1.6-.6-3.3-.9-5.1-.9-1.8 0-3.5.3-5.1.9-1.6.6-3 1.4-4.2 2.4-1.2 1-2.1 2.3-2.8 3.6-.7 1.4-1 2.9-1 4.5 0 1.5.3 3 1 4.3.6 1.4 1.5 2.6 2.7 3.7l.5.5c.2.1.3.3.5.4l13.1 9.2c.8.6 1.4 1.2 1.8 1.9.4.7.6 1.5.6 2.2 0 .7-.2 1.4-.6 2.1-.3.6-.8 1.2-1.5 1.7z" class="letter-element fade-in"/>
						<path id="five-C-end" d="M196.8 78.3h4.4c.5 0 .7-.3.7-.8V75c0-1.8-.3-3.5-1-5-.7-1.6-1.6-2.9-2.8-4.1-1.2-1.2-2.6-2.1-4.1-2.8-1.6-.7-3.2-1-5-1-1.8 0-3.5.3-5 1-1.6.7-2.9 1.6-4.1 2.8-1.2 1.2-2.1 2.6-2.8 4.1-.7 1.6-1 3.3-1 5v88.2c0 1.8.3 3.5 1 5.1.7 1.6 1.6 3 2.8 4.1 1.2 1.2 2.5 2.1 4.1 2.8 1.6.7 3.2 1 5 1 1.8 0 3.5-.3 5-1 1.6-.7 2.9-1.6 4.1-2.7 1.2-1.2 2.1-2.5 2.8-4.1.7-1.6 1-3.3 1-5.1v-2.9c0-.5-.3-.8-.7-.8h-4.4c-.5 0-.8.3-.8.8v2.9c0 1-.2 1.9-.5 2.7-.4.9-.9 1.6-1.5 2.2-.6.6-1.4 1.1-2.2 1.5-.8.4-1.8.5-2.8.5-1 0-1.9-.2-2.7-.5-.8-.4-1.6-.9-2.2-1.5-.6-.6-1.1-1.4-1.5-2.2-.4-.8-.5-1.8-.5-2.8V75c0-1 .2-1.9.5-2.8.4-.8.9-1.6 1.5-2.2.6-.6 1.4-1.1 2.2-1.5.8-.4 1.7-.5 2.7-.5 1 0 1.9.2 2.8.5.9.4 1.6.9 2.2 1.5.6.6 1.1 1.4 1.5 2.2.4.8.5 1.8.5 2.7v2.5c0 .6.3.9.8.9z" class="letter-element fade-in"/>
					</g>
				</svg>
		</section>
	</main>
</body>
</html>
            
          
!

CSS

            
              
$green: #5EC3B6; 
$red: #E14832;
$yellow: #FAB036;
$blue: #214184;

$swatches: $green, $red, $yellow, $blue;

$size: 100%;

* {
  // cursor: none;
  box-sizing: border-box;
}
html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
main {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  background: $green;
}
section {
  font-family: 'Helvetica' 'Arial' san-serif;
  width: 100%;
  height: 100%;
  background: $yellow;
  display: flex; 
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  mix-blend-mode: screen;
//  background: transparent !important;
  padding: 3% 7%;
  
//  @media (min-width: 800px){
//    padding: 7% 7%;
//  }
}


[id *="-end"] {
  display: none;
}

.vid-container {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-content: center;
  
  *::-webkit-media-controls-panel {
    display: none!important;
    -webkit-appearance: none;
  }

  *::--webkit-media-controls-play-button {
    display: none!important;
    -webkit-appearance: none;
  }


  *::-webkit-media-controls-start-playback-button {
    display: none !important;
    -webkit-appearance: none;
  }
  video {
    width: 100%;
    object-fit: cover;
    *::-webkit-media-controls-panel {
      display: none !important;
      -webkit-appearance: none;
    }

    *::--webkit-media-controls-play-button {
      display: none !important;
      -webkit-appearance: none;
    }


    *::-webkit-media-controls-start-playback-button {
      display: none !important;
      -webkit-appearance: none;
    }
    img {
      width: 100%;
      height: auto;
    }
  }
}
.letter-element {
  fill: white;
}

svg#art {
  height: 95%;
  @media (orientation: landscape){
    height: 100%;
  }
  @media (min-height: 600px){
    height: 100%;
  }
}

.debug {
  position: fixed;
  display: none;
  top: 0;
  color: white; 
  padding: 10px;
}

.swatches {
  position: absolute;
  background: none;
  top: 0;
  right: 0;
  display: none;
  div {
    width: 30px;
    height: 30px;
    background: red;
    @for $i from 1 through 4 {
      &:nth-child(#{$i}) {
        background: nth($swatches, $i)
      }
    }
  }  
}  


.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 9;
  display: flex;
  background: $yellow;
  opacity: 0;
  justify-content: center;
  align-items: center;
  transition: opacity .5s ease-in-out;
//  transition-delay: .25s;
//  animation: bgColorShift 3.1s steps(1) infinite;
  
  .icon {
    $size: 140px; 
    width: $size;
    height: $size;
    perspective: 200px;
    span {
      text-align: center;
      position:absolute;
      display: block;
      width: 200%;
      left: -50%;
      top: 140%;
      color: white;
      font-family: 'Monaco', monospace;
      font-size: 14px;
      letter-spacing: 3px;
      text-transform: uppercase;
      font-weight: bold;
    }
    .loader, .mouse-icon-container, .mobile-icon-container {
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .loader {
    width: 100%;
    height: 100%;
  }
  .mouse-icon-container {
    top: -10%;
    opacity: 0;
    transition: all .5s ease-in-out;   
    .mouse-icon {
      width: 60%;
    }
    body.mobile & {
      display: none;
    }
    body.instructions.desktop & {
      opacity: 1;
    }
    .mouse-icon {    
      animation: arrowMove 2s ease-in-out infinite;  
    }
  }
  .mobile-icon-container {
    left: 10%;
    opacity: 0;
    transition: all .5s ease-in-out;
    .mobile-icon {
      width: 50%;
    }
    
    body.mouse & {
      display: none;
    }
    body.instructions.mobile & {
      opacity: 1;
    }
    .mobile-icon {
      animation: mobileMove 2s ease-in-out infinite;
    }
  }
}


.loading main .overlay {
   opacity: 1;
  }
.instructions main .overlay {
  opacity: 1;
  background: rgba($yellow, .9);
}


@keyframes rotateLoader {
  0%   {transform: rotate(0deg)}
  100% {transform: rotate(360deg)}
}
@keyframes arrowMove {
  0%   {transform: translateY(0)}
  50%  {transform: translateY(30%)}
  100% {transform: translateY(0)}
}
@keyframes mobileMove {
  0%   {transform: rotateX(-20deg)}
  50%  {transform: rotateX(20deg)}
  100% {transform: rotateX(-20deg)}
}

svg#brick-icon {
  width: 100%;
  height: 100%;
  $globalTime: 1.5s;
  $globalEase: cubic-bezier(.7, 0, .29, .99);
//  width: 100%;
//  margin-left: -40%;
//  margin-top: -40%;
  animation: rotateIcon 6s linear infinite;	
  #move-face {
    animation: moveFace $globalTime $globalEase infinite;	
  }
  path {
    fill:none;
    stroke:white;
    stroke-width:4;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-miterlimit:10;
  }
  $length: 65;
  [id *="line"] {
    stroke: white;
    stroke-dasharray: $length 1000; 
    animation: line-move $globalTime $globalEase infinite;	
  }

  #back-face {
    animation: backFace $globalTime $globalEase infinite;	
  }

  @keyframes line-move {
    0%     {stroke-dashoffset: 0}
    50%    {stroke-dashoffset: $length - 30}
    100%   {stroke-dashoffset: 0}
  }
  @keyframes moveFace {
    0%   {transform: translateX(0%) translateY(0%)}
    50%  {transform: translateX(-18%) translateY(-17.8%); }
    100% {transform: translateX(0%) translateY(0%)}
  }

  @keyframes backFace {
    0%   {transform: translateX(0%) translateY(0%)}
    50%  {transform: translateX(10%) translateY(10%)}
    100% {transform: translateX(0%) translateY(0%)}
  }
  @keyframes rotateIcon {
    0%   {transform: rotate(0deg)}
    100% {transform: rotate(360deg)}
  }
}

@keyframes bgColorShift {
  0%   {background: $green}
  25%  {background: $red}
  50%  {background: $yellow}
  75%  {background: $blue}
  100% {background: $green}
}

.mobile-codepen-note {
	display: none;
	background: $yellow;
	padding: 16px;
	color: white;
	font-size: 15px;
  font-family: 'Monaco', monospace;
	line-height: 120%;
	a {
    pointer-events: auto;
		color: white;
	}
}
            
          
!

JS

            
              /*

IF YOU'RE ON A MOBILE PHONE, TRY VIEWING THIS PEN AT http://portraits.ryankbrown.com/self/ AND TILTING YOU'RE DEVICE! UNFORTUNATELY CODEPEN DOESN'T SEEM TO SUPPORT DEVICE TILT.

*/



$(document).ready(function(){	
	var svg = $('svg'),
			height,
			vertPos,
			stretchTime = 1,
			orientation,
			red = '#E14832',
			green = '#5EC3B6',
			yellow = '#FAB036',
			blue = '#214184',
			bgVid = $('#bg-vid'),
			bgVid = document.getElementById('bg-vid'),
			bg = $('section'),
			overlay = $('.overlay'),
			mobileIcon = $('.mobile-icon'),
			mouseIcon = $('.mouse-icon'),
			introComplete = false,
			deviceX,
			deviceY,
			vidTime,
			device,
			initPos,
			eventDetected = false,

			oneAnd = {
				start : $('#one-and-start'), 
				end   : $('#one-and-end')
			},
			oneM = {
				start : $('#one-M-start'), 
				end   : $('#one-M-end')
			},
			twoL = {
				start : $('#two-L-start'), 
				end   : $('#two-L-end')
			},
			twoU = {
				start : $('#two-U-start'), 
				end   : $('#two-U-end')
			},
			threeR = {
				start : $('#three-R-start'), 
				end   : $('#three-R-end')
			},
			threeO = {
				start : $('#three-O-start'), 
				end   : $('#three-O-end')
			},
			threeS = {
				start : $('#three-S-start'), 
				end   : $('#three-S-end')
			},
			fiveS = {
				start : $('#five-S-start'), 
				end   : $('#five-S-end')
			},
			fiveC = {
				start : $('#five-C-start'), 
				end   : $('#five-C-end')
			},
			fourI = {
				start : $('#four-I-start'), 
				end   : $('#four-I-end')
			},
			fourT = {
				start : $('#four-T-start'), 
				end   : $('#four-T-end')
			},
			oneBar1  = {
				el    : $('#S-M-bar-1'),
				state : false
			},
			oneBar2  = {
				el    : $('#S-M-bar-2'),
				state : false
			},
			oneBar3  = {
				el    : $('#S-M-bar-3'),
				state : false
			},
			oneBar4  = {
				el    : $('#S-M-bar-4'),
				state : false
			},
			fiveBar1 = {
				el    : $('#S-C-S-bar-1'),
				state : true
			},
			fiveBar2 = {
				el    : $('#S-C-S-bar-2'),
				state : true
			},
			fiveBar3 = {
				el    : $('#S-C-S-bar-3'),
				state : true
			},
			fiveBar4 = {
				el    : $('#S-C-S-bar-4'),
				state : true
			},
			festLetters = [
				$('#fest-F'),
				$('#fest-E'),
				$('#fest-S'),
				$('#fest-T'),
				$('#fest-I'),
				$('#fest-V'),
				$('#fest-A'),
				$('#fest-L')
			]
	;

	var stretchTL = new TimelineMax({paused:true});
	var bgTL = new TimelineMax({paused:true});

	var isMobile = {
		Android: function() {
			return navigator.userAgent.match(/Android/i);
		},
		BlackBerry: function() {
			return navigator.userAgent.match(/BlackBerry/i);
		},
		iOS: function() {
			return navigator.userAgent.match(/iPhone|iPad|iPod/i);
		},
		Opera: function() {
			return navigator.userAgent.match(/Opera Mini/i);
		},
		Windows: function() {
			return navigator.userAgent.match(/IEMobile/i);
		},
		any: function() {
			return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
		}
	};
	
	function readDeviceOrientation() {
		switch (window.orientation) {  
			case 0:
				orientation = 'portrait';
				// Portrait 
				break; 

			case 180:
				orientation = 'portrait-upside-down';
				// Portrait (Upside-down)
				break; 

			case -90:  
				orientation = 'landscape-clockwise';
				// Landscape (landscape-clockwise)
				break;  

			case 90:
				orientation = 'landscape-counter-clockwise';
				// Landscape  (Counterlandscape-clockwise)
				break;
		}
	}
	var getSizes = function(){
		bgVid.pause();
		readDeviceOrientation();
		height = $(window).height();
		stretchTL.progress(vertPos);
		bgTL.progress(vertPos);
	};
  
	var handleBars = function(element){
		if (!element.state) {
			TweenMax.to(element.el, .2, {scale:1, transformOrigin: "center center", ease: Back.easeOut});
			element.state = true;
		} else {
			TweenMax.to(element.el, .2, {scale:0, transformOrigin: "center center", ease: Back.easeIn});
			element.state = false;
		}
	}
	var handleLetters = function() {
		TweenMax.staggerTo(festLetters, .25, {scale: 1.5, transformOrigin: "center center", ease: Quad.easeInOut},.05);
		TweenMax.staggerTo(festLetters, .25, {scale: 1, transformOrigin: "center center", ease: Quad.easeInOut, delay: .25},.05);
	};
	

	stretchTL
		.to(fourI.start,  stretchTime, {morphSVG: fourI.end,  ease: Quad.easeOut})
		.to(fourT.start,  stretchTime, {morphSVG: fourT.end,  ease: Quad.easeOut}, '-=' + stretchTime)
		.to(fiveC.start,  stretchTime, {morphSVG: fiveC.end,  ease: Quad.easeOut}, '-=' + stretchTime)
		.to(fiveS.start,  stretchTime, {morphSVG: fiveS.end,  ease: Quad.easeOut}, '-=' + stretchTime)
		.to(threeR.start, stretchTime, {morphSVG: threeR.end, ease: Quad.easeOut}, '-=' + stretchTime)
		.to(threeS.start, stretchTime, {morphSVG: threeS.end, ease: Quad.easeOut}, '-=' + stretchTime)
		.to(threeO.start, stretchTime, {morphSVG: threeO.end, ease: Quad.easeOut}, '-=' + stretchTime)
		.to(twoL.start,   stretchTime, {morphSVG: twoL.end,   ease: Quad.easeOut}, '-=' + stretchTime)
		.to(twoU.start,   stretchTime, {morphSVG: twoU.end,   ease: Quad.easeOut}, '-=' + stretchTime)
		.to(oneAnd.start, stretchTime, {morphSVG: oneAnd.end, ease: Quad.easeOut}, '-=' + stretchTime)
		.to(oneM.start,   stretchTime, {morphSVG: oneM.end,   ease: Quad.easeOut}, '-=' + stretchTime)
		.call(handleBars, [oneBar4],  null, '.55')
		.from(oneBar4.el, .025, {opacity: 0, transformOrigin: "center center", ease: Quad.easeOut}, ".425")
		.call(handleBars, [oneBar3],  null, '.37')
		.from(oneBar3.el, .025, {opacity: 0, transformOrigin: "center center", ease: Quad.easeOut}, ".275")
		.call(handleBars, [oneBar2],  null, '.25')
		.from(oneBar2.el, .025, {opacity: 0, transformOrigin: "center center", ease: Quad.easeOut}, ".15")
		.call(handleBars, [oneBar1],  null, '.1')
		.from(oneBar1.el, .025, {opacity: 0, transformOrigin: "center center", ease: Quad.easeOut}, ".04")
		.call(handleBars, [fiveBar4],  null, '.5')
		.to(fiveBar4.el, .025, {opacity: 0, transformOrigin:  "center center", ease: Quad.easeOut}, ".66")
		.call(handleBars, [fiveBar3],  null, '.3')
		.to(fiveBar3.el, .025, {opacity: 0, transformOrigin:  "center center", ease: Quad.easeOut}, ".4")
		.call(handleBars, [fiveBar2],  null, '.18')
		.to(fiveBar2.el, .025, {opacity: 0, transformOrigin:  "center center", ease: Quad.easeOut}, ".25")
		.call(handleBars, [fiveBar1],  null, '.03')
		.to(fiveBar1.el, .025, {opacity: 0, transformOrigin:  "center center", ease: Quad.easeOut}, ".12")
		.call(handleLetters, [],  null, '.09')
	;
  
	bgTL.fromTo(bg, 0.2, {backgroundColor: green},  {backgroundColor: blue,  ease: Power2.easeInOut}, '+=.2')
			.fromTo(bg, 0.2, {backgroundColor: blue},   {backgroundColor: red,    ease: Power2.easeInOut}, '+=.2')
			.fromTo(bg, 0.2, {backgroundColor: red},    {backgroundColor: yellow,   ease: Power2.easeInOut}, '+=.2')
			.fromTo(bg, 0.2, {backgroundColor: yellow}, {backgroundColor: yellow, ease: Power2.easeInOut}, '+=.2')
			.fromTo(bg, 0.2, {backgroundColor: yellow}, {backgroundColor: yellow, ease: Power2.easeInOut}, '+=.2')
	;
	var instructs = function(){
		setInterval(function(){
			if (!eventDetected && introComplete){
				$('body').addClass('instructions');
			} else {
				$('body').removeClass('instructions');
				eventDetected = true;
				setTimeout(function(){
					$('.overlay').remove();
				}, 1000);
			}	 
		}, 200);
	}
	
	var setIntroComplete = function(){
		console.log('triggered');
		introComplete = true;	
		$('.loader').remove();
		instructs();
	}

	
	var intro = function() {
		TweenMax.staggerFrom($('.letter-element.fade-in'), 1, {scale: '0', transformOrigin: "center center", ease: Back.easeOut},.025);
		setTimeout(function(){
			stretchTL.tweenTo(vertPos, {onComplete: setIntroComplete, ease: Strong.easeOut});
//			setIntroComplete();
		}, 1025);
	}
  
	var handleMove = function(){
		if(introComplete){
			if (Math.sign(vertPos) === 1){
				stretchTL.progress(vertPos);
				bgTL.progress(vertPos);
				$('p').html('Position: ' + Math.round(vertPos*1000)/1000);	
			}
			if ( vertPos > .2 || vertPos < -.2){
				eventDetected = true;
			}
		}
	};

	$(window).resize(function(){
		getSizes(); 
	}); 	
  
	getSizes();

	$(window).on('load', function(){
		setTimeout(function(){
			$('body').removeClass('loading');
			intro();
		}, 2000);	
	});
	
	if (isMobile.any()) {
    $('.mobile-codepen-note').css({'display':'block'});
		$('body').addClass('mobile');
		device = 'mobile';
		window.addEventListener("deviceorientation", function(e) {
//			if(introComplete){
				var rate = 8;
				switch (orientation) {  
					case 'portrait':
						// Y = Front to back value - will return a value between -90 and 90
						deviceY = Math.round(e.beta)*rate;
						break; 
					case 'portrait-upside-down':
						deviceY = Math.round(e.beta)*-1*rate;
						// Y = Front to back value - will return a value between -90 and 90
						break; 
					case 'landscape-clockwise':  
						deviceY = Math.round(e.gamma)*rate;
						break;  
					case 'landscape-counter-clockwise':
						deviceY = Math.round(e.gamma)*-1*rate;
						break;
				}
				vertPos = deviceY/height;
				requestAnimationFrame(handleMove);
//			}
		});
	}
	else {
		$('body').addClass('desktop');
		device = 'desktop';
		$(window).mousemove(function(e){
			if(introComplete){
				vertPos = (e.pageY/height);
				requestAnimationFrame(handleMove); 
			}
		});
	}
	setInterval(function(){
		if (introComplete){
			var vidTime = vertPos*5;
			bgVid.currentTime = vertPos*5;			
		}
	}, 100);
});


            
          
!
999px

Console