Repository: codrops/FancyLetterAnimation
Branch: master
Commit: b30550d99313
Files: 8
Total size: 45.8 KB

Directory structure:
gitextract_hi0y6p12/

├── .gitignore
├── README.md
├── css/
│   ├── component.css
│   ├── demo.css
│   ├── normalize.css
│   └── sponsor.css
├── index.html
└── js/
    └── main.js

================================================
FILE CONTENTS
================================================

================================================
FILE: .gitignore
================================================
*.DS_Store


================================================
FILE: README.md
================================================
# Fancy SVG Letter Animation

![Fancy SVG Letter Animation](http://tympanus.net/codrops/wp-content/uploads/2016/09/FancySVGLetterAnimation_800x600.jpg)

An experimental SVG letter animation inspired by the Dribbble shot ["Shading Letters in Illustrator"](https://dribbble.com/shots/2943049-Shading-Letters-in-Illustrator) by Jake Bartlett's. Powered by Julian Garnier's [anime.js](http://anime-js.com/).

[Article on Codrops](http://tympanus.net/codrops/?p=27976)

[Demo](https://tympanus.net/Development/FancyLetterAnimation/)

This demo is sponsored by [Mighty Deals: Amazing Font Deals](https://goo.gl/9YANfs).

## License

Integrate or build upon it for free in your personal or commercial projects. Don't republish, redistribute or sell "as-is". 

Read more here: [License](http://tympanus.net/codrops/licensing/)

## Credits

- Animations powered by [anime.js](http://anime-js.com/) by Julian Garnier

## Misc

Follow Codrops: [Twitter](http://www.twitter.com/codrops), [Facebook](http://www.facebook.com/pages/Codrops/159107397912), [Google+](https://plus.google.com/101095823814290637419), [GitHub](https://github.com/codrops), [Pinterest](http://www.pinterest.com/codrops/)

[© Codrops 2016](http://www.codrops.com)







================================================
FILE: css/component.css
================================================
/* Main SVG */

.letters {
	position: relative;
	display: block;
	min-height: 400px;
	max-height: 70vh;
	margin: 0 auto;
}


/* Letter path */

.letter__layer {
	fill: none;
	stroke-miterlimit: 3;
	stroke-linecap: butt;
	stroke-linejoin: bevel;
}


/* Individual effects/styles */


/* Effect 1 */

.letters--effect-1 .letter__layer:first-child {
	stroke-width: 9px;
}

.letters--effect-1 .letter__layer:nth-child(2) {
	stroke-width: 9.5px;
}

.letters--effect-1 .letter__layer:nth-child(3) {
	stroke-width: 10px;
}


/* Effect 1 colors */

.color-1 { stroke: #dea521; }
.color-2 { stroke: #f84242; }
.color-3 { stroke: #3758a7; }
.color-4 { stroke: #f79c8c; }
.color-5 { stroke: #84b5bd; }
.color-6 { stroke: #feefde; }


/* Effect 2 */

.letters--effect-2 .letter__layer:first-child {
	stroke: #4caf50;
	stroke-width: 1px;
}

.letters--effect-2 .letter__layer:nth-child(2) {
	stroke: #ffeb3b;
	stroke-width: 4px;
}

.letters--effect-2 .letter__layer:nth-child(3) {
	stroke: #e6437b;
	stroke-width: 10px;
}


/* Effect 3 */

.letters--effect-3 .letter__layer:first-child {
	-webkit-transform: translate3d(-2px, -2px, 0);
	transform: translate3d(-2px, -2px, 0);
	stroke: #dddde6;
	stroke-width: 10px;
}

.letters--effect-3 .letter__layer:nth-child(2) {
	stroke: #eca80e;
	stroke-width: 6px;
}

.letters--effect-3 .letter__layer:nth-child(3) {
	stroke: #607d8b;
	stroke-width: 8px;
}


/* Effect 4 */

.letters--effect-4 .letter__layer:first-child {
	stroke: #00966c;
	stroke-width: 10px;
}

.letters--effect-4 .letter__layer:nth-child(2) {
	stroke: #27272d;
	stroke-width: 4px;
}

.letters--effect-4 .letter__layer:nth-child(3) {
	stroke: #fcec9b;
	stroke-width: 1px;
}


================================================
FILE: css/demo.css
================================================
*, *::after, *::before { -webkit-box-sizing: border-box; box-sizing: border-box; }

body {
	font-family: 'Avenir Next', Avenir, 'Helvetica Neue', Helvetica, Arial, sans-serif;
	color: #fff;
	background: #27272d;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a {
	outline: none;
	color: #fdf7b5;
	text-decoration: none;
}

a:hover, a:focus {
	color: #fff;
}

.hidden {
	position: absolute;
	overflow: hidden;
	width: 0;
	height: 0;
	pointer-events: none;
}

/* Icons */
.icon {
	display: block;
	width: 1.5em;
	height: 1.5em;
	margin: 0 auto;
	fill: currentColor;
}

/* Buttons */

.btn {
	display: block;
	margin: 0;
	padding: 0;
	cursor: pointer;
	pointer-events: auto;
	color: #fdf7b5;
	border: none;
	background: none;
}

.btn:focus {
	outline: none;
}

.btn:hover {
	color: #fff;
}

.btn--start {
	border: 2px solid;
	border-radius: 1.85em;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 0.95em;
	padding: 1em 2em;
	margin: 0 auto;
	-webkit-transition: color 0.2s;
	transition: color 0.2s;
}

.btn--github {
	position: absolute;
	right: 1em;
	top: 0.75em;
	font-size: 1.5em;
	margin: 0.15em 0 0 0;
}

.btn--github .icon {
	stroke: #fdf7b5;
	fill: none;
}

.btn--github:hover .icon,
.btn--github:focus .icon {
	stroke: #fff;
}

/* Codrops header */

.codrops-header {
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	padding: 1.25em 2em 3em 1.25em;
	position: relative;
}

.codrops-header__title {
	font-size: 1.15em;
	font-weight: 500;
	margin: 0;
	padding: 0 0.75em;
}

.codrops-header__tagline {
	font-size: 0.85em;
	margin: 0 0 0 1em;
	max-width: 505px;
	text-align: left;
	font-weight: 600;
	padding: 0 4.75em 0 2em;
	position: relative;
 	border-left: 1px solid rgba(255,255,255,0.3);
}

/* Top Navigation Style */

.codrops-links {
	position: relative;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	text-align: center;
	white-space: nowrap;
}

.codrops-links::after {
	content: '';
	position: absolute;
	top: 10%;
	left: 50%;
	width: 1px;
	height: 80%;
	opacity: 0.2;
	background: currentColor;
	-webkit-transform: rotate3d(0, 0, 1, 22.5deg);
	transform: rotate3d(0, 0, 1, 22.5deg);
}

.codrops-icon {
	display: inline-block;
	margin: 0.25em;
	padding: 0.25em;
}

/* Content */
.content {
	position: relative;
	max-height: 85vh;
	min-height: 300px;
	margin: 0 auto 5em;
}

.content__meta {
	position: relative;
	text-align: center;
}

/* Related demos */
.content--related {
	text-align: center;
	font-weight: bold;
	padding: 7em 0 12em;
	margin: 10em 0 0 0;
	background: #1c1c21;
	position: relative;
	z-index: 1000;
	max-height: none;
}

.media-item {
	display: inline-block;
	padding: 1em;
	vertical-align: top;
	-webkit-transition: color 0.3s;
	transition: color 0.3s;
}

.media-item__img {
	max-width: 100%;
	opacity: 0.5;
	-webkit-transition: opacity 0.3s;
	transition: opacity 0.3s;
}

.media-item:hover .media-item__img,
.media-item:focus .media-item__img {
	opacity: 1;
}

.media-item__title {
	margin: 0;
	padding: 0.5em;
	font-size: 1em;
}

@media screen and (max-width: 50em) {
	.codrops-header {
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
		padding: 1em 3em 0 1em;
	}
	.codrops-header__title {
		-webkit-flex: none;
		flex: none;
		width: 100%;
		padding: 0.25em 0 0 0;
	}
	.codrops-header__tagline {
		padding: 1em 0 0 0;
		border: none;
		margin: 0;
	}
}

================================================
FILE: css/normalize.css
================================================
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}

================================================
FILE: css/sponsor.css
================================================
/* Sponsor */
.pater {
	display: block;
	position: fixed;
	width: 100%;
	right: 0;
	bottom: 0;
}

.pater::before {
	content: 'Sponsor:';
	position: absolute;
	color: #000;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 0.5em;
	top: 0.75em;
	left: 0.75em;
	opacity: 0.4;
}

.pater__img {
	display: none;
}

.pater__title {
	display: block;
	background: #fdf7b5;
	color: #333;
	text-align: left;
	padding: 2em 1em 1em;
	font-size: 1em;
	margin: 0;
}

.pater__title span {
	color: #f84242;
}

@media screen and (min-width: 50em) {
	.pater {
		width: 280px;
		height: 258px;
	}
	.pater::before {
		left: 6em;
		top: 6em;
	}
	.pater__img {
		display: block;
		width: 100%;
		position: absolute;
		bottom: 0;
		left: 0;
		opacity: 0.5;
		-webkit-transform: translate3d(50px,50px,0);
		transform: translate3d(50px,50px,0);
		-webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
		transition: transform 0.5s, opacity 0.5s;
		-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
		transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	}
	.pater:hover .pater__img {
		opacity: 1;
		-webkit-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0);
	}
	.pater__title {
		position: absolute;
		width: 100%;
		bottom: 0;
		right: 0;
		font-size: 0.85em;
		padding: 1.25em 50px 1em 1.5em;
		-webkit-transform: translate3d(105px,-20px,0);
		transform: translate3d(105px,-20px,0);
		-webkit-transition: -webkit-transform 0.5s;
		transition: transform 0.5s;
		-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
		transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	}
	.pater:hover .pater__title {
		-webkit-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0);
	}
}

================================================
FILE: index.html
================================================
<!DOCTYPE html>
<html lang="en" class="no-js">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Fancy SVG Letter Animation | Codrops</title>
		<meta name="description" content="An SVG stroke animation on letters inspired by a Dribbble shot of Jake Bartlett, powered by anime.js" />
		<meta name="keywords" content="svg, stroke, animation, letters, typography, effect, css, web design, web development, demo, tutorial" />
		<meta name="author" content="Codrops" />
		<link rel="shortcut icon" href="favicon.ico">
		<link rel="stylesheet" type="text/css" href="css/normalize.css" />
		<link rel="stylesheet" type="text/css" href="css/demo.css" />
		<link rel="stylesheet" type="text/css" href="css/sponsor.css" />
		<link rel="stylesheet" type="text/css" href="css/component.css" />
		<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
		<script>
			document.documentElement.className = 'js';
		</script>
	</head>
	<body>
		<svg class="hidden">
			<defs>
				<symbol id="icon-arrow" viewBox="0 0 24 24">
					<title>arrow</title>
					<polygon points="6.3,12.8 20.9,12.8 20.9,11.2 6.3,11.2 10.2,7.2 9,6 3.1,12 9,18 10.2,16.8 " />
				</symbol>
				<symbol id="icon-drop" viewBox="0 0 24 24">
					<title>drop</title>
					<path d="M12,21c-3.6,0-6.6-3-6.6-6.6C5.4,11,10.8,4,11.4,3.2C11.6,3.1,11.8,3,12,3s0.4,0.1,0.6,0.3c0.6,0.8,6.1,7.8,6.1,11.2C18.6,18.1,15.6,21,12,21zM12,4.8c-1.8,2.4-5.2,7.4-5.2,9.6c0,2.9,2.3,5.2,5.2,5.2s5.2-2.3,5.2-5.2C17.2,12.2,13.8,7.3,12,4.8z" />
					<path d="M12,18.2c-0.4,0-0.7-0.3-0.7-0.7s0.3-0.7,0.7-0.7c1.3,0,2.4-1.1,2.4-2.4c0-0.4,0.3-0.7,0.7-0.7c0.4,0,0.7,0.3,0.7,0.7C15.8,16.5,14.1,18.2,12,18.2z" />
				</symbol>
				<symbol id="icon-octicon" viewBox="0 0 24 24">
					<title>octicon</title>
					<path d="M12,2.2C6.4,2.2,1.9,6.7,1.9,12.2c0,4.4,2.9,8.2,6.9,9.6c0.5,0.1,0.7-0.2,0.7-0.5c0-0.2,0-0.9,0-1.7c-2.8,0.6-3.4-1.4-3.4-1.4C5.6,17.1,5,16.8,5,16.8C4.1,16.2,5,16.2,5,16.2c1,0.1,1.5,1,1.5,1c0.9,1.5,2.4,1.1,2.9,0.8c0.1-0.7,0.4-1.1,0.6-1.3c-2.2-0.3-4.6-1.1-4.6-5c0-1.1,0.4-2,1-2.7C6.5,8.8,6.2,7.7,6.7,6.4c0,0,0.8-0.3,2.8,1C10.3,7.2,11.1,7.1,12,7c0.9,0,1.7,0.1,2.5,0.3c1.9-1.3,2.8-1,2.8-1c0.5,1.4,0.2,2.4,0.1,2.7c0.6,0.7,1,1.6,1,2.7c0,3.9-2.4,4.7-4.6,5c0.4,0.3,0.7,0.9,0.7,1.9c0,1.3,0,2.4,0,2.8c0,0.3,0.2,0.6,0.7,0.5c4-1.3,6.9-5.1,6.9-9.6C22.1,6.7,17.6,2.2,12,2.2z" />
				</symbol>
			</defs>
		</svg>
		<main>
			<header class="codrops-header">
				<div class="codrops-links">
					<a class="codrops-icon codrops-icon--prev" href="http://tympanus.net/Development/NavigationIndicators/" title="Previous Demo"><svg class="icon icon--arrow"><use xlink:href="#icon-arrow"></use></svg></a>
					<a class="codrops-icon codrops-icon--drop" href="http://tympanus.net/codrops/?p=27976" title="Back to the article"><svg class="icon icon--drop"><use xlink:href="#icon-drop"></use></svg></a>
				</div>
				<h1 class="codrops-header__title">Fancy SVG Letter Animation</h1>
				<p class="codrops-header__tagline">A fun letter animation inspired by Jake Bartlett's Dribbble shot <a href="https://dribbble.com/shots/2943049-Shading-Letters-in-Illustrator">"Shading Letters in Illustrator"</a> for Jamie Bartlett's <a href="https://www.skillshare.com/classes/design/Shading-Letters-in-Illustrator/747154273">Skillshare class</a>. </p>
				<a href="https://github.com/codrops/FancyLetterAnimation/" class="btn btn--github"><svg class="icon icon--octicon"><use xlink:href="#icon-octicon"></use></svg></a>
			</header>
			<div class="content content--1">
				<svg width="100%" height="100%" viewBox="0 0 320 180" class="letters letters--effect-1">
					<!--W-->
					<g class="letter letter--1">
						<g class="letter__part">
							<path class="letter__layer color-6" d="M25,39.7l22.4,51l7.9-32.2L76.2,84l1.3-61.2" />
							<path class="letter__layer color-1" d="M25,39.7l22.4,51l7.9-32.2L76.2,84l1.3-61.2" />
							<path class="letter__layer color-2" d="M25,39.7l22.4,51l7.9-32.2L76.2,84l1.3-61.2" />
						</g>
					</g>
					<!--I-->
					<g class="letter letter--2">
						<g class="letter__part">
							<path class="letter__layer color-6" d="M100,20.3l8.4,58.4" />
							<path class="letter__layer color-2" d="M100,20.3l8.4,58.4" />
							<path class="letter__layer color-3" d="M100,20.3l8.4,58.4" />
						</g>
					</g>
					<!--L-->
					<g class="letter letter--3">
						<g class="letter__part">
							<path class="letter__layer color-6" d="M126.4,70.8l27.6,0.5" />
							<path class="letter__layer color-3" d="M126.4,70.8l27.6,0.5" />
							<path class="letter__layer color-4" d="M126.4,70.8l27.6,0.5" />
						</g>
						<g class="letter__part">
							<path class="letter__layer color-6" d="M128.9,15.6l-2.3,60.2" />
							<path class="letter__layer color-3" d="M128.9,15.6l-2.3,60.2" />
							<path class="letter__layer color-4" d="M128.9,15.6l-2.3,60.2" />
						</g>
					</g>
					<!--D-->
					<g class="letter letter--4">
						<g class="letter__part">
							<path class="letter__layer color-6" d="M167.4,27.6l3.7,49.1" />
							<path class="letter__layer color-4" d="M167.4,27.6l3.7,49.1" />
							<path class="letter__layer color-5" d="M167.4,27.6l3.7,49.1" />
						</g>
						<g class="letter__part">
							<path class="letter__layer color-6" d="M157.8,30.9c0,0,31.2-10.9,40.3,6.8c8.9,17-23.5,38.4-35,42.6" />
							<path class="letter__layer color-4" d="M157.8,30.9c0,0,31.2-10.9,40.3,6.8c8.9,17-23.5,38.4-35,42.6" />
							<path class="letter__layer color-5" d="M157.8,30.9c0,0,31.2-10.9,40.3,6.8c8.9,17-23.5,38.4-35,42.6" />
						</g>
					</g>
					<!--E-->
					<g class="letter letter--5">
						<g class="letter__part">
							<path class="letter__layer color-6" d="M215,52l25.6,2.8" />
							<path class="letter__layer color-5" d="M215,52l25.6,2.8" />
							<path class="letter__layer color-1" d="M215,52l25.6,2.8" />
						</g>
						<g class="letter__part">
							<path class="letter__layer color-6" d="M211.8,76.9l30.6,3.4" />
							<path class="letter__layer color-5" d="M211.8,76.9l30.6,3.4" />
							<path class="letter__layer color-1" d="M211.8,76.9l30.6,3.4" />
						</g>
						<g class="letter__part">
							<path class="letter__layer color-6" d="M218.6,27.4l30.9,2.9" />
							<path class="letter__layer color-5" d="M218.6,27.4l30.9,2.9" />
							<path class="letter__layer color-1" d="M218.6,27.4l30.9,2.9" />
						</g>
						<g class="letter__part">
							<path class="letter__layer color-6" d="M218.4,22.4l-6.9,59.6" />
							<path class="letter__layer color-5" d="M218.4,22.4l-6.9,59.6" />
							<path class="letter__layer color-1" d="M218.4,22.4l-6.9,59.6" />
						</g>
					</g>
					<!--R-->
					<g class="letter letter--6">
						<g class="letter__part">
							<path class="letter__layer color-6" d="M264.2,29.8l24.1,8c12,4.2,12,11,9.4,18.5c-2.6,7.5-6.7,12.9-18.7,8.8l-14.2-4.8" />
							<path class="letter__layer color-4" d="M264.2,29.8l24.1,8c12,4.2,12,11,9.4,18.5c-2.6,7.5-6.7,12.9-18.7,8.8l-14.2-4.8" />
							<path class="letter__layer color-2" d="M264.2,29.8l24.1,8c12,4.2,12,11,9.4,18.5c-2.6,7.5-6.7,12.9-18.7,8.8l-14.2-4.8" />
						</g>
						<g class="letter__part">
							<path class="letter__layer color-6" d="M284.9,96.2l-20.4-35.1" />
							<path class="letter__layer color-4" d="M284.9,96.2l-20.4-35.1" />
							<path class="letter__layer color-2" d="M284.9,96.2l-20.4-35.1" />
						</g>
						<g class="letter__part">
							<path class="letter__layer color-6" d="M275.2,29.4l-20.5,60.6" />
							<path class="letter__layer color-4" d="M275.2,29.4l-20.5,60.6" />
							<path class="letter__layer color-2" d="M275.2,29.4l-20.5,60.6" />
						</g>
					</g>
					<!--M-->
					<g class="letter letter--7">
						<g class="letter__part">
							<path class="letter__layer color-6" d="M72.9,156.9l-7.1-56.5L91.7,127l18.8-29.8l7.1,56.5" />
							<path class="letter__layer color-3" d="M72.9,156.9l-7.1-56.5L91.7,127l18.8-29.8l7.1,56.5" />
							<path class="letter__layer color-1" d="M72.9,156.9l-7.1-56.5L91.7,127l18.8-29.8l7.1,56.5" />
						</g>
					</g>
					<!--I-->
					<g class="letter letter--8">
						<g class="letter__part">
							<path class="letter__layer color-6" d="M144.9,99.5l-6,61.3" />
							<path class="letter__layer color-4" d="M144.9,99.5l-6,61.3" />
							<path class="letter__layer color-2" d="M144.9,99.5l-6,61.3" />
						</g>
					</g>
					<!--N-->
					<g class="letter letter--9">
						<g class="letter__part">
							<path class="letter__layer color-6" d="M170.4,161.9l-3.2-61.8l43.4,58.1l-7.2-62.6" />
							<path class="letter__layer color-1" d="M170.4,161.9l-3.2-61.8l43.4,58.1l-7.2-62.6" />
							<path class="letter__layer color-3" d="M170.4,161.9l-3.2-61.8l43.4,58.1l-7.2-62.6" />
						</g>
					</g>
					<!--D-->
					<g class="letter letter--10">
						<g class="letter__part">
							<path class="letter__layer color-6" d="M233.8,107.9l3.9,51.7" />
							<path class="letter__layer color-5" d="M233.8,107.9l3.9,51.7" />
							<path class="letter__layer color-4" d="M233.8,107.9l3.9,51.7" />
						</g>
						<g class="letter__part">
							<path class="letter__layer color-6" d="M222.4,109.4c0,0,33.9-11.8,43.8,7.4c10.9,20.9-23.6,43.4-34.8,47.5" />
							<path class="letter__layer color-5" d="M222.4,109.4c0,0,33.9-11.8,43.8,7.4c10.9,20.9-23.6,43.4-34.8,47.5" />
							<path class="letter__layer color-4" d="M222.4,109.4c0,0,33.9-11.8,43.8,7.4c10.9,20.9-23.6,43.4-34.8,47.5" />
						</g>
					</g>
				</svg>
				<div class="content__meta"><button class="btn btn--start" aria-label="Start animation">Start</button></div>
			</div>
			<div class="content content--2">
				<svg width="100%" height="100%" viewBox="0 0 320 180" class="letters letters--effect-2">
					<!--O-->
					<g class="letter letter--1">
						<g class="letter__part">
							<path class="letter__layer" d="M92.8,80.4C64.5,87.7,64,42.1,83.4,31.3C109.2,30.3,117.6,74.1,92.8,80.4z" />
							<path class="letter__layer" d="M92.8,80.4C64.5,87.7,64,42.1,83.4,31.3C109.2,30.3,117.6,74.1,92.8,80.4z" />
							<path class="letter__layer" d="M92.8,80.4C64.5,87.7,64,42.1,83.4,31.3C109.2,30.3,117.6,74.1,92.8,80.4z" />
						</g>
					</g>
					<!--N-->
					<g class="letter letter--1">
						<g class="letter__part">
							<path class="letter__layer" d="M162.1,27.1v57.4l-38.3-57.4v57.4" />
							<path class="letter__layer" d="M162.1,27.1v57.4l-38.3-57.4v57.4" />
							<path class="letter__layer" d="M162.1,27.1v57.4l-38.3-57.4v57.4" />
						</g>
					</g>
					<!--L-->
					<g class="letter letter--1">
						<g class="letter__part">
							<path class="letter__layer" d="M183.9,27.1v57.4" />
							<path class="letter__layer" d="M183.9,27.1v57.4" />
							<path class="letter__layer" d="M183.9,27.1v57.4" />
						</g>
						<g class="letter__part">
							<path class="letter__layer" d="M183.9,79.5h32.8" />
							<path class="letter__layer" d="M183.9,79.5h32.8" />
							<path class="letter__layer" d="M183.9,79.5h32.8" />
						</g>
					</g>
					<!--Y-->
					<g class="letter letter--1">
						<g class="letter__part">
							<path class="letter__layer" d="M250,27.1l-21.9,27.3" />
							<path class="letter__layer" d="M250,27.1l-21.9,27.3" />
							<path class="letter__layer" d="M250,27.1l-21.9,27.3" />
						</g>
						<g class="letter__part">
							<path class="letter__layer" d="M206.2,27.1c17.4,14.3,27.6,34.9,21.9,57.4" />
							<path class="letter__layer" d="M206.2,27.1c17.4,14.3,27.6,34.9,21.9,57.4" />
							<path class="letter__layer" d="M206.2,27.1c17.4,14.3,27.6,34.9,21.9,57.4" />
						</g>
					</g>
					<!--L-->
					<g class="letter letter--1">
						<g class="letter__part">
							<path class="letter__layer" d="M71.3,91.9v57.4" />
							<path class="letter__layer" d="M71.3,91.9v57.4" />
							<path class="letter__layer" d="M71.3,91.9v57.4" />
						</g>
						<g class="letter__part">
							<path class="letter__layer" d="M71.3,144.4h32.8" />
							<path class="letter__layer" d="M71.3,144.4h32.8" />
							<path class="letter__layer" d="M71.3,144.4h32.8" />
						</g>
					</g>
					<!--O-->
					<g class="letter letter--1">
						<g class="letter__part">
							<path class="letter__layer" d="M132.8,147.1c-28.2,7.2-28.8-38.3-9.4-49.1C149.2,96.9,157.6,140.7,132.8,147.1z" />
							<path class="letter__layer" d="M132.8,147.1c-28.2,7.2-28.8-38.3-9.4-49.1C149.2,96.9,157.6,140.7,132.8,147.1z" />
							<path class="letter__layer" d="M132.8,147.1c-28.2,7.2-28.8-38.3-9.4-49.1C149.2,96.9,157.6,140.7,132.8,147.1z" />
						</g>
					</g>
					<!--V-->
					<g class="letter letter--1">
						<g class="letter__part">
							<path class="letter__layer" d="M202,93.7l-21.9,57.4l-21.9-57.4" />
							<path class="letter__layer" d="M202,93.7l-21.9,57.4l-21.9-57.4" />
							<path class="letter__layer" d="M202,93.7l-21.9,57.4l-21.9-57.4" />
						</g>
					</g>
					<!--E-->
					<g class="letter letter--1">
						<g class="letter__part">
							<path class="letter__layer" d="M217,95.5v57.4" />
							<path class="letter__layer" d="M217,95.5v57.4" />
							<path class="letter__layer" d="M217,95.5v57.4" />
						</g>
						<g class="letter__part">
							<path class="letter__layer" d="M217,100.5h32.5" />
							<path class="letter__layer" d="M217,100.5h32.5" />
							<path class="letter__layer" d="M217,100.5h32.5" />
						</g>
						<g class="letter__part">
							<path class="letter__layer" d="M217,122.8h20" />
							<path class="letter__layer" d="M217,122.8h20" />
							<path class="letter__layer" d="M217,122.8h20" />
						</g>
						<g class="letter__part">
							<path class="letter__layer" d="M217,147.9h32.5" />
							<path class="letter__layer" d="M217,147.9h32.5" />
							<path class="letter__layer" d="M217,147.9h32.5" />
						</g>
					</g>
				</svg>
				<div class="content__meta"><button class="btn btn--start" aria-label="Start animation">Start</button></div>
			</div>		
			<div class="content content--3">
				<svg width="100%" height="100%" viewBox="0 0 400 300" class="letters letters--effect-3">
					<!--J-->
					<g class="letter letter--1">
						<g class="letter__part">
							<path class="letter__layer" d="M20.4,52.1c17.9,0.2,46.3,1.2,63.3-4.4C73,72.5,68.1,114.4,66.3,141.3c-0.2,3-0.6,6.3-2.7,8.4c-3,3-8,2.2-11.9,0.7c-5.4-2.2-10.3-5.7-13.4-10.6c-3.1-4.9-4.2-11.2-2.1-16.7c1.7-4.5,5.4-8.1,9.6-10.5s8.9-3.8,13.6-5.1c16-4.4,32.2-7.9,48.6-10.4" />
							<path class="letter__layer" d="M20.4,52.1c17.9,0.2,46.3,1.2,63.3-4.4C73,72.5,68.1,114.4,66.3,141.3c-0.2,3-0.6,6.3-2.7,8.4c-3,3-8,2.2-11.9,0.7c-5.4-2.2-10.3-5.7-13.4-10.6c-3.1-4.9-4.2-11.2-2.1-16.7c1.7-4.5,5.4-8.1,9.6-10.5s8.9-3.8,13.6-5.1c16-4.4,32.2-7.9,48.6-10.4" />
							<path class="letter__layer" d="M20.4,52.1c17.9,0.2,46.3,1.2,63.3-4.4C73,72.5,68.1,114.4,66.3,141.3c-0.2,3-0.6,6.3-2.7,8.4c-3,3-8,2.2-11.9,0.7c-5.4-2.2-10.3-5.7-13.4-10.6c-3.1-4.9-4.2-11.2-2.1-16.7c1.7-4.5,5.4-8.1,9.6-10.5s8.9-3.8,13.6-5.1c16-4.4,32.2-7.9,48.6-10.4" />
						</g>
					</g>
					<!--u-->
					<g class="letter letter--2">
						<g class="letter__part">
							<path class="letter__layer" d="M93.2,83.7c8.8-6.2,17.5-12.4,26.3-18.6c-0.2,11.9-0.1,23.7,0.1,35.6c0.1,2.5,0.7,5.8,3.2,6.2c1,0.2,2.1-0.2,3-0.6c14.6-6.7,22.9-22.4,27.6-37.8c-0.6,7.1-1.2,14.2-0.1,21.2c1.1,7,4.1,13.9,9.5,18.5" />
							<path class="letter__layer" d="M93.2,83.7c8.8-6.2,17.5-12.4,26.3-18.6c-0.2,11.9-0.1,23.7,0.1,35.6c0.1,2.5,0.7,5.8,3.2,6.2c1,0.2,2.1-0.2,3-0.6c14.6-6.7,22.9-22.4,27.6-37.8c-0.6,7.1-1.2,14.2-0.1,21.2c1.1,7,4.1,13.9,9.5,18.5" />
							<path class="letter__layer" d="M93.2,83.7c8.8-6.2,17.5-12.4,26.3-18.6c-0.2,11.9-0.1,23.7,0.1,35.6c0.1,2.5,0.7,5.8,3.2,6.2c1,0.2,2.1-0.2,3-0.6c14.6-6.7,22.9-22.4,27.6-37.8c-0.6,7.1-1.2,14.2-0.1,21.2c1.1,7,4.1,13.9,9.5,18.5" />
						</g>
					</g>
					<!--s-->
					<g class="letter letter--3">
						<g class="letter__part">
							<path class="letter__layer" d="M207.4,86.7c0.6-3.1,1.3-6.5-0.3-9.4c-2.9-5.4-11-5.7-16.4-5.6c-3.9,0.1-7.9,0.8-11.4,2.5c-3.5,1.8-6.5,4.8-7.8,8.6c-0.8,2.6-0.7,5.8,1.4,7.5c0.8,0.6,1.7,1,2.7,1.3c4.7,1.4,9.6,0.5,14.5,0.1s10.1-0.2,14,2.8c4.9,3.8,5.8,11.8,2,16.6c-2.9,3.6-7.6,5.1-12.1,5.5c-5.5,0.5-11-0.5-16-2.8c-2.6-1.2-5.3-3-5.9-5.9" />
							<path class="letter__layer" d="M207.4,86.7c0.6-3.1,1.3-6.5-0.3-9.4c-2.9-5.4-11-5.7-16.4-5.6c-3.9,0.1-7.9,0.8-11.4,2.5c-3.5,1.8-6.5,4.8-7.8,8.6c-0.8,2.6-0.7,5.8,1.4,7.5c0.8,0.6,1.7,1,2.7,1.3c4.7,1.4,9.6,0.5,14.5,0.1s10.1-0.2,14,2.8c4.9,3.8,5.8,11.8,2,16.6c-2.9,3.6-7.6,5.1-12.1,5.5c-5.5,0.5-11-0.5-16-2.8c-2.6-1.2-5.3-3-5.9-5.9" />
							<path class="letter__layer" d="M207.4,86.7c0.6-3.1,1.3-6.5-0.3-9.4c-2.9-5.4-11-5.7-16.4-5.6c-3.9,0.1-7.9,0.8-11.4,2.5c-3.5,1.8-6.5,4.8-7.8,8.6c-0.8,2.6-0.7,5.8,1.4,7.5c0.8,0.6,1.7,1,2.7,1.3c4.7,1.4,9.6,0.5,14.5,0.1s10.1-0.2,14,2.8c4.9,3.8,5.8,11.8,2,16.6c-2.9,3.6-7.6,5.1-12.1,5.5c-5.5,0.5-11-0.5-16-2.8c-2.6-1.2-5.3-3-5.9-5.9" />
						</g>
					</g>
					<!--t-->
					<g class="letter letter--4">
						<g class="letter__part">
							<path class="letter__layer" d="M281.1,127.4c-7.2,5.6-13,10.5-22.7,11.1c-8.5,0.5-17.2-2.7-23.6-8.2c-6.5-5.6-8.2-15.4-8-23.5c0.5-17.8,2.9-35.5,7.2-52.8" />
							<path class="letter__layer" d="M281.1,127.4c-7.2,5.6-13,10.5-22.7,11.1c-8.5,0.5-17.2-2.7-23.6-8.2c-6.5-5.6-8.2-15.4-8-23.5c0.5-17.8,2.9-35.5,7.2-52.8" />
							<path class="letter__layer" d="M281.1,127.4c-7.2,5.6-13,10.5-22.7,11.1c-8.5,0.5-17.2-2.7-23.6-8.2c-6.5-5.6-8.2-15.4-8-23.5c0.5-17.8,2.9-35.5,7.2-52.8" />
						</g>
						<g class="letter__part">
							<path class="letter__layer" d="M217.1,90.5c14.6,0.2,29.3,0,43.9-0.7" />
							<path class="letter__layer" d="M217.1,90.5c14.6,0.2,29.3,0,43.9-0.7" />
							<path class="letter__layer" d="M217.1,90.5c14.6,0.2,29.3,0,43.9-0.7" />
						</g>
					</g>
					<!--S-->
					<g class="letter letter--5">
						<g class="letter__part">
							<path class="letter__layer" d="M127.8,141.5c-1.3-0.2-4.3-0.6-7.2,1c-5.2,2.8-7.4,10.1-5.2,14.2c3,5.8,14.2,5.3,21.2,2.1c1.6-0.7,8.2-3.8,10.3-10.6c2.7-8.9-4.7-19-12-23.9c-6.4-4.3-14.6-6-22-3.8c-7.7,2.3-13.9,8.4-17.9,15.4c-8.1,14.2-10,30.6-3.9,45.9c2.9,7.4,8.3,13.8,12.7,20.4c4.3,6.5,10.5,15.3,12.1,23.3c5.9,29.5-32.8,30.9-50.8,21.7c-7.8-4-13-9.6-16.1-15.9c-7.5-15.4,2.2-37.9,17.6-43.2c6-2.1,11.7-1.2,15.6-0.2" />
							<path class="letter__layer" d="M127.8,141.5c-1.3-0.2-4.3-0.6-7.2,1c-5.2,2.8-7.4,10.1-5.2,14.2c3,5.8,14.2,5.3,21.2,2.1c1.6-0.7,8.2-3.8,10.3-10.6c2.7-8.9-4.7-19-12-23.9c-6.4-4.3-14.6-6-22-3.8c-7.7,2.3-13.9,8.4-17.9,15.4c-8.1,14.2-10,30.6-3.9,45.9c2.9,7.4,8.3,13.8,12.7,20.4c4.3,6.5,10.5,15.3,12.1,23.3c5.9,29.5-32.8,30.9-50.8,21.7c-7.8-4-13-9.6-16.1-15.9c-7.5-15.4,2.2-37.9,17.6-43.2c6-2.1,11.7-1.2,15.6-0.2" />
							<path class="letter__layer" d="M127.8,141.5c-1.3-0.2-4.3-0.6-7.2,1c-5.2,2.8-7.4,10.1-5.2,14.2c3,5.8,14.2,5.3,21.2,2.1c1.6-0.7,8.2-3.8,10.3-10.6c2.7-8.9-4.7-19-12-23.9c-6.4-4.3-14.6-6-22-3.8c-7.7,2.3-13.9,8.4-17.9,15.4c-8.1,14.2-10,30.6-3.9,45.9c2.9,7.4,8.3,13.8,12.7,20.4c4.3,6.5,10.5,15.3,12.1,23.3c5.9,29.5-32.8,30.9-50.8,21.7c-7.8-4-13-9.6-16.1-15.9c-7.5-15.4,2.2-37.9,17.6-43.2c6-2.1,11.7-1.2,15.6-0.2" />
						</g>
					</g>
					<!--m-->
					<g class="letter letter--6">
						<g class="letter__part">
							<path class="letter__layer" d="M205.3,237.9c1.8-17.6,3.6-35.4,0.6-52.8c-0.3-1.5-0.8-3.2-2.3-3.5c-0.7-0.1-1.4,0.2-2.1,0.5c-9.3,4.1-17.8,10.2-24.8,17.6" />
							<path class="letter__layer" d="M205.3,237.9c1.8-17.6,3.6-35.4,0.6-52.8c-0.3-1.5-0.8-3.2-2.3-3.5c-0.7-0.1-1.4,0.2-2.1,0.5c-9.3,4.1-17.8,10.2-24.8,17.6" />
							<path class="letter__layer" d="M205.3,237.9c1.8-17.6,3.6-35.4,0.6-52.8c-0.3-1.5-0.8-3.2-2.3-3.5c-0.7-0.1-1.4,0.2-2.1,0.5c-9.3,4.1-17.8,10.2-24.8,17.6" />
						</g>
						<g class="letter__part">
							<path class="letter__layer" d="M174.8,237.3c1.8-17.6,3.6-35.4,0.6-52.8c-0.3-1.5-0.8-3.2-2.3-3.5c-0.7-0.1-1.4,0.2-2.1,0.5c-9.3,4.1-17.8,10.2-24.8,17.6" />
							<path class="letter__layer" d="M174.8,237.3c1.8-17.6,3.6-35.4,0.6-52.8c-0.3-1.5-0.8-3.2-2.3-3.5c-0.7-0.1-1.4,0.2-2.1,0.5c-9.3,4.1-17.8,10.2-24.8,17.6" />
							<path class="letter__layer" d="M174.8,237.3c1.8-17.6,3.6-35.4,0.6-52.8c-0.3-1.5-0.8-3.2-2.3-3.5c-0.7-0.1-1.4,0.2-2.1,0.5c-9.3,4.1-17.8,10.2-24.8,17.6" />
						</g>
						<g class="letter__part">
							<path class="letter__layer" d="M116.4,198c7-7.4,15.5-13.4,24.8-17.6c0.7-0.3,1.4-0.6,2.1-0.5c1.5,0.3,2,2,2.3,3.5c3,17.4,1.2,35.2-0.6,52.8" />
							<path class="letter__layer" d="M116.4,198c7-7.4,15.5-13.4,24.8-17.6c0.7-0.3,1.4-0.6,2.1-0.5c1.5,0.3,2,2,2.3,3.5c3,17.4,1.2,35.2-0.6,52.8" />
							<path class="letter__layer" d="M116.4,198c7-7.4,15.5-13.4,24.8-17.6c0.7-0.3,1.4-0.6,2.1-0.5c1.5,0.3,2,2,2.3,3.5c3,17.4,1.2,35.2-0.6,52.8" />
						</g>
					</g>
					<!--o-->
					<g class="letter letter--7">
						<g class="letter__part">
							<path class="letter__layer" d="M224.7,214.5c-1.6,25.1,46.6,25.5,35.2-13.9C251.5,171.6,226.4,188.7,224.7,214.5z" />
							<path class="letter__layer" d="M224.7,214.5c-1.6,25.1,46.6,25.5,35.2-13.9C251.5,171.6,226.4,188.7,224.7,214.5z" />
							<path class="letter__layer" d="M224.7,214.5c-1.6,25.1,46.6,25.5,35.2-13.9C251.5,171.6,226.4,188.7,224.7,214.5z" />
						</g>
					</g>
					<!--k-->
					<g class="letter letter--8">
						<g class="letter__part">
							<path class="letter__layer" d="M266.8,188.2c0.7,1.4,7.1,13.8,21.2,16.1c11.3,1.9,19.6-4.2,22.2-5.8c5.9-3.6,12.9-12.1,12.7-19.4c-0.4-11.6-15.7-7.5-22.2-4.8c-10.3,4.3-17.8,11.6-18,25.8c-0.2,13.2,24.7,43.2,49.3,24.5" />
							<path class="letter__layer" d="M266.8,188.2c0.7,1.4,7.1,13.8,21.2,16.1c11.3,1.9,19.6-4.2,22.2-5.8c5.9-3.6,12.9-12.1,12.7-19.4c-0.4-11.6-15.7-7.5-22.2-4.8c-10.3,4.3-17.8,11.6-18,25.8c-0.2,13.2,24.7,43.2,49.3,24.5" />
							<path class="letter__layer" d="M266.8,188.2c0.7,1.4,7.1,13.8,21.2,16.1c11.3,1.9,19.6-4.2,22.2-5.8c5.9-3.6,12.9-12.1,12.7-19.4c-0.4-11.6-15.7-7.5-22.2-4.8c-10.3,4.3-17.8,11.6-18,25.8c-0.2,13.2,24.7,43.2,49.3,24.5" />
						</g>
						<g class="letter__part">
							<path class="letter__layer" d="M175.8,138.2c11.1,17.1,28.4,27.9,48.6,30.7c16.8,2.3,34-0.4,50.1-5.3c9.7-3,19.4-6.6,27.7-12.4c10.4-7.3,10.4-7.3,20-18.3c10.1-11.6,6.8-25.6-8.3-24.2c-8.4,0.8-16.4,8.7-20.2,16.4c-4,8.1-4.4,17.7-5,26.5c-0.7,9.5-2.6,18.7-4,28.1c-2.6,18.2-4.7,36.5-6.4,54.8" />
							<path class="letter__layer" d="M175.8,138.2c11.1,17.1,28.4,27.9,48.6,30.7c16.8,2.3,34-0.4,50.1-5.3c9.7-3,19.4-6.6,27.7-12.4c10.4-7.3,10.4-7.3,20-18.3c10.1-11.6,6.8-25.6-8.3-24.2c-8.4,0.8-16.4,8.7-20.2,16.4c-4,8.1-4.4,17.7-5,26.5c-0.7,9.5-2.6,18.7-4,28.1c-2.6,18.2-4.7,36.5-6.4,54.8" />
							<path class="letter__layer" d="M175.8,138.2c11.1,17.1,28.4,27.9,48.6,30.7c16.8,2.3,34-0.4,50.1-5.3c9.7-3,19.4-6.6,27.7-12.4c10.4-7.3,10.4-7.3,20-18.3c10.1-11.6,6.8-25.6-8.3-24.2c-8.4,0.8-16.4,8.7-20.2,16.4c-4,8.1-4.4,17.7-5,26.5c-0.7,9.5-2.6,18.7-4,28.1c-2.6,18.2-4.7,36.5-6.4,54.8" />
						</g>
					</g>
					<!--e-->
					<g class="letter letter--9">
						<g class="letter__part">
							<path class="letter__layer" d="M335.6,204.7c51.4,1.2,40.3-43.1,10.9-22.9c-28,19.3,0.9,66.8,33.1,38.7" />
							<path class="letter__layer" d="M335.6,204.7c51.4,1.2,40.3-43.1,10.9-22.9c-28,19.3,0.9,66.8,33.1,38.7" />
							<path class="letter__layer" d="M335.6,204.7c51.4,1.2,40.3-43.1,10.9-22.9c-28,19.3,0.9,66.8,33.1,38.7" />
						</g>
					</g>
				</svg>
				<div class="content__meta"><button class="btn btn--start" aria-label="Start animation">Start</button></div>
			</div>
			<div class="content content--4">
				<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 320 180" class="letters letters--effect-4">
					<g class="letter letter--1">
						<g class="letter__part">
							<path class="letter__layer" d="M41.5,88.4c0,0,26.8,0.9,32.9-9.9c8.4-15-10.8-31.6-46.7-25.2" />
							<path class="letter__layer" d="M41.5,88.4c0,0,26.8,0.9,32.9-9.9c8.4-15-10.8-31.6-46.7-25.2" />
							<path class="letter__layer" d="M41.5,88.4c0,0,26.8,0.9,32.9-9.9c8.4-15-10.8-31.6-46.7-25.2" />
						</g>
						<g class="letter__part">
							<path class="letter__layer" d="M39.2,89.6c45.8-10.3,59.4,49.7-13,36.4" />
							<path class="letter__layer" d="M39.2,89.6c45.8-10.3,59.4,49.7-13,36.4" />
							<path class="letter__layer" d="M39.2,89.6c45.8-10.3,59.4,49.7-13,36.4" />
						</g>
						<g class="letter__part">
							<path class="letter__layer" d="M40.5,63.4v54.9" />
							<path class="letter__layer" d="M40.5,63.4v54.9" />
							<path class="letter__layer" d="M40.5,63.4v54.9" />
						</g>
					</g>
					<g class="letter letter--2">
						<g class="letter__part">
							<path class="letter__layer" d="M91,97.4h31.3c-12.9-65.4-51.4,62.3,0,13.1" />
							<path class="letter__layer" d="M91,97.4h31.3c-12.9-65.4-51.4,62.3,0,13.1" />
							<path class="letter__layer" d="M91,97.4h31.3c-12.9-65.4-51.4,62.3,0,13.1" />
						</g>
					</g>
					<g class="letter letter--3">
						<g class="letter__part">
							<path class="letter__layer" d="M140.6,63.4v61.7" />
							<path class="letter__layer" d="M140.6,63.4v61.7" />
							<path class="letter__layer" d="M140.6,63.4v61.7" />
						</g>
					</g>
					<g class="letter letter--4">
						<g class="letter__part">
							<path class="letter__layer" d="M161.5,72.1l6.3-10" />
							<path class="letter__layer" d="M161.5,72.1l6.3-10" />
							<path class="letter__layer" d="M161.5,72.1l6.3-10" />
						</g>
						<g class="letter__part">
							<path class="letter__layer" d="M161.5,81.7v43.4" />
							<path class="letter__layer" d="M161.5,81.7v43.4" />
							<path class="letter__layer" d="M161.5,81.7v43.4" />
						</g>
					</g>
					<g class="letter letter--5">
						<g class="letter__part">
							<path class="letter__layer" d="M177.3,97.4h31.3c-12.9-65.4-51.4,62.3,0,13.1" />
							<path class="letter__layer" d="M177.3,97.4h31.3c-12.9-65.4-51.4,62.3,0,13.1" />
							<path class="letter__layer" d="M177.3,97.4h31.3c-12.9-65.4-51.4,62.3,0,13.1" />
						</g>
					</g>
					<g class="letter letter--6">
						<g class="letter__part">
							<path class="letter__layer" d="M222.2,81.7l15.8,42.4l15.5-42.4" />
							<path class="letter__layer" d="M222.2,81.7l15.8,42.4l15.5-42.4" />
							<path class="letter__layer" d="M222.2,81.7l15.8,42.4l15.5-42.4" />
						</g>
					</g>
					<g class="letter letter--7">
						<g class="letter__part">
							<path class="letter__layer" d="M293.7,110.5c-51.4,49.2-12.9-78.5,0-13.1h-31.3" />
							<path class="letter__layer" d="M293.7,110.5c-51.4,49.2-12.9-78.5,0-13.1h-31.3" />
							<path class="letter__layer" d="M293.7,110.5c-51.4,49.2-12.9-78.5,0-13.1h-31.3" />
						</g>
					</g>
				</svg>
				<div class="content__meta"><button class="btn btn--start" aria-label="Start animation">Start</button></div>
			</div>
			<!-- Related demos -->
			<section class="content content--related">
				<p>If you enjoyed this demo you might also like:</p>
				<a class="media-item" href="http://tympanus.net/Development/SVGDrawingAnimation/">
					<img class="media-item__img" src="img/related/SVGDrawingAnimation.png">
					<h3 class="media-item__title">SVG Drawing Animation</h3>
				</a>
				<a class="media-item" href="http://tympanus.net/Development/AnimatedLetters/">
					<img class="media-item__img" src="img/related/AnimatedLetters.png">
					<h3 class="media-item__title">Animated Letters</h3>
				</a>
			</section>
			<a class="pater" href="http://goo.gl/eIBPXd" rel="nofollow">
				<img class="pater__img" src="img/sponsor/MightyDeals_FontDeals.png" alt="Font Deals by Mighty Deals"/>
				<h3 class="pater__title">Amazing Font Deals! <br /><span>Up to 95% off!</span> &rarr;</h3>
			</a>
		</main>
		<script src="js/anime.min.js"></script>
		<script src="js/main.js"></script>
		<script>
		(function() {
			var svgFx1 = document.querySelector('.letters--effect-1'),
				svgFx2 = document.querySelector('.letters--effect-2'),
				svgFx3 = document.querySelector('.letters--effect-3'),
				svgFx4 = document.querySelector('.letters--effect-4'),
				phrase1 = new Phrase(svgFx1, {
					pathOpacityAnim : true
				}),
				phrase2 = new Phrase(svgFx2, {
					pathOpacityAnim: true,
					outAnimation: {
						scale: 0,
						opacity: [1, 0],
						duration: 250,
						easing: 'easeInOutQuad'
					},
					inAnimation: {
						delay: 150,
						properties: {
							scale: {
								value: function() {
									return [0, 1];
								},
								duration: 900,
								elasticity: 600,
								easing: 'easeOutElastic'
							},
							opacity: {
								value: [0, 1],
								duration: 50,
								easing: 'linear'
							},
						}
					},
					pathAnimation: {
						duration: 700,
						easing: 'easeOutSine',
						delay: 200
					}
				}),
				phrase3 = new Phrase(svgFx3, {
					outAnimation: {
						translateX: -25,
						rotateZ: 20,
						opacity: [1, 0],
						duration: 250,
						easing: 'easeInBack'
					},
					inAnimation: {
						delay: 100,
						properties: {
							translateY: {
								value: function() {
									return [-80, 0];
								},
								duration: 1200,
								elasticity: 500,
								easing: 'easeOutElastic'
							},
							translateX: {
								value: function() {
									return [50, 0];
								},
								duration: 1200,
								elasticity: 500,
								easing: 'easeOutElastic'
							},
							rotateZ: {
								value: [-70, 0],
								duration: 1200,
								elasticity: 500,
								easing: 'easeOutElastic'
							},
							opacity: {
								value: [0, 1],
								duration: 750,
								easing: 'linear'
							},
						}
					},
					pathAnimation: {
						duration: 1400,
						easing: 'easeOutQuint',
						delay: 300
					}
				}),
				phrase4 = new Phrase(svgFx4, {
					outAnimation: {
						translateY: [0, 15],
						opacity: [1, 0],
						duration: 350,
						easing: 'easeInBack'
					},
					inAnimation: {
						delay: 130,
						properties: {
							rotateZ: {
								value: function() {
									return [70, 0];
								},
								duration: 1200,
								//elasticity: 500,
								easing: 'easeOutElastic'
							},
							opacity: {
								value: [0, 1],
								duration: 400,
								easing: 'linear'
							},
						}
					},
					pathAnimation: {
						duration: 1000,
						easing: 'easeOutCubic',
						delay: 400
					}
				});
			
			// Trigger the animations.
			svgFx1.nextElementSibling.querySelector('button').addEventListener('click', function() { phrase1.animate(); });
			svgFx2.nextElementSibling.querySelector('button').addEventListener('click', function() { phrase2.animate(); });
			svgFx3.nextElementSibling.querySelector('button').addEventListener('click', function() { phrase3.animate(); });
			svgFx4.nextElementSibling.querySelector('button').addEventListener('click', function() { phrase4.animate(); });
		})();
		</script>
	</body>
</html>


================================================
FILE: js/main.js
================================================
/**
 * main.js
 * http://www.codrops.com
 *
 * Licensed under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * Copyright 2016, Codrops
 * http://www.codrops.com
 */
;(function(window) {

	'use strict';

	// Helper vars and functions.
	function extend( a, b ) {
		for( var key in b ) { 
			if( b.hasOwnProperty( key ) ) {
				a[key] = b[key];
			}
		}
		return a;
	}
	// Concatenate JS objs.
	// From http://stackoverflow.com/a/2454315.
	function collect() {
		var ret = {};
		var len = arguments.length;
		for (var i=0; i<len; i++) {
			for (var p in arguments[i]) {
				if (arguments[i].hasOwnProperty(p)) {
					ret[p] = arguments[i][p];
				}
			}
		}
		return ret;
	}

	/**
	 * LetterPart obj. A letter can be split in several parts. Each part will contain one or more layers/paths.
	 */
	function LetterPart(el, options) {
		this.el = el;
		this.options = extend({}, this.options);
		extend(this.options, options);
		// The layers/paths.
		this.layers = [].slice.call(this.el.querySelectorAll('path'));
		// Total number of layers.
		this.layersTotal = this.layers.length;
		var self = this;
		this.layers.forEach(function(layer, pos) {
			if( self.options.pathOpacityAnim ) {
				// If pathOpacityAnim is true, then set the opacity to 0 for all the paths except the last one. We want to make sure that given 2 or more overlapping paths the ones behind will not be shown.
				layer.style.opacity = pos === self.layersTotal - 1 ? 1 : 0;
			}
			// Set the stroke dasharray to the path´s total length and stroke dashoffset to 0 so the paths are initially rendered.
			layer.style.strokeDashoffset = 0;
			layer.style.strokeDasharray = layer.getTotalLength();
		});
	}

	/**
	 * Show all the layers by setting the opacity to 1.
	 */
	LetterPart.prototype.showLayers = function() {
		this.layers.forEach(function(layer, pos) {
			layer.style.opacity = 1;
		});
	};

	/**
	 * Letter obj. The letter element is a SVG group containing one or more parts (LetterParts).
	 */
	function Letter(el, options) {
		this.el = el;
		this.options = extend({}, this.options);
		extend(this.options, options);
		// Set transform origin (center center).
		var bcr = this.el.getBBox();
		this.el.style.transformOrigin = (bcr.x + bcr.width/2) + 'px ' + (bcr.y + bcr.height/2) + 'px';
		this.parts = [];
		var self = this;
		[].slice.call(this.el.querySelectorAll('g.letter__part')).forEach(function(el) {
			self.parts.push(new LetterPart(el, { pathOpacityAnim : self.options.pathOpacityAnim }));
		});
	}

	/**
	 * Phrase obj. The Phrase element is the SVG element itself containing all the SVG groups that represent each letter.
	 */
	function Phrase(el, options) {
		this.el = el;
		this.options = extend({}, this.options);
		extend(this.options, options);
		this.letterElems = [].slice.call(this.el.querySelectorAll('g.letter'));
		this.letters = [];
		var self = this;
		this.letterElems.forEach(function(el) {
			self.letters.push(new Letter(el, { pathOpacityAnim : self.options.pathOpacityAnim }));
		});
	}

	Phrase.prototype.options = {
		// If true, all the layers/paths of each letter part (except the last one) will animate the opacity to 0.
		// With this, we avoid any overlapping path behind the last one to be shown.
		pathOpacityAnim: false,
		// The animation settings for the ´out´ animation (when we click the button and the letters disappear). We are using the anime.js lib so the syntax is the same.
		outAnimation: {
			translateY: [0, 15],
			opacity: [1, 0],
			duration: 250,
			easing: 'easeInOutQuad'
		},
		// The animation settings for the ´in´ animation (when the letters appear again).
		inAnimation: {
			properties: {
				translateY: {
					value: [-30, 0],
					duration: 900,
					elasticity: 600,
					easing: 'easeOutElastic'
				},
				opacity: {
					value: [0, 1],
					duration: 500,
					easing: 'linear'
				},
			},
			delay: 40 // delay increment per letter.
		},
		// Stroke animation settings
		pathAnimation: {
			duration: 800,
			easing: 'easeOutQuint',
			delay: 200 // delay increment per path.
		}
	};

	Phrase.prototype.animate = function() {
		var self = this,
			animOutProps = {
				targets: this.letterElems,
				complete: function() {
					var animLettersProps = {
						targets: self.letterElems,
						delay: function(el, index) {
							return index * self.options.inAnimation.delay;
						}
					};

					anime(collect(animLettersProps, self.options.inAnimation.properties));

					for(var i = 0, len = self.letters.length; i < len; ++i) {
						var parts = self.letters[i].parts,
							partsTotal = parts.length;

						for(var j = 0, len2 = parts.length; j < len2; ++j) {
							parts[j].showLayers();
							
							var animProps = {
								targets: parts[j].layers,
								strokeDashoffset: function(el) {
									return [el.getTotalLength(), 0];
								},
								easing: self.options.pathAnimation.easing,
								duration: self.options.pathAnimation.duration,
								delay: function(el, index) {
									return index * self.options.pathAnimation.delay + i * self.options.inAnimation.delay;
								}
							};

							if( self.options.pathOpacityAnim ) {
								animProps.opacity = {
									value: function(el, index) {
										return index !== parts[j].layers.length - 1 ? 0 : 1;
									},
									duration: 200,
									delay: function(el, index) {
										return index * self.options.pathAnimation.delay + i * self.options.inAnimation.delay + self.options.pathAnimation.duration - 0.1*self.options.pathAnimation.duration;
									}
								}
							}

							anime(animProps);
						}
					}
				}
			};

		anime(collect(animOutProps, this.options.outAnimation));
	};

	window.Phrase = Phrase;

})(window);