[
  {
    "path": ".gitignore",
    "content": "*.DS_Store\n"
  },
  {
    "path": "README.md",
    "content": "# Fancy SVG Letter Animation\n\n![Fancy SVG Letter Animation](http://tympanus.net/codrops/wp-content/uploads/2016/09/FancySVGLetterAnimation_800x600.jpg)\n\nAn 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/).\n\n[Article on Codrops](http://tympanus.net/codrops/?p=27976)\n\n[Demo](https://tympanus.net/Development/FancyLetterAnimation/)\n\nThis demo is sponsored by [Mighty Deals: Amazing Font Deals](https://goo.gl/9YANfs).\n\n## License\n\nIntegrate or build upon it for free in your personal or commercial projects. Don't republish, redistribute or sell \"as-is\". \n\nRead more here: [License](http://tympanus.net/codrops/licensing/)\n\n## Credits\n\n- Animations powered by [anime.js](http://anime-js.com/) by Julian Garnier\n\n## Misc\n\nFollow 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/)\n\n[© Codrops 2016](http://www.codrops.com)\n\n\n\n\n\n"
  },
  {
    "path": "css/component.css",
    "content": "/* Main SVG */\n\n.letters {\n\tposition: relative;\n\tdisplay: block;\n\tmin-height: 400px;\n\tmax-height: 70vh;\n\tmargin: 0 auto;\n}\n\n\n/* Letter path */\n\n.letter__layer {\n\tfill: none;\n\tstroke-miterlimit: 3;\n\tstroke-linecap: butt;\n\tstroke-linejoin: bevel;\n}\n\n\n/* Individual effects/styles */\n\n\n/* Effect 1 */\n\n.letters--effect-1 .letter__layer:first-child {\n\tstroke-width: 9px;\n}\n\n.letters--effect-1 .letter__layer:nth-child(2) {\n\tstroke-width: 9.5px;\n}\n\n.letters--effect-1 .letter__layer:nth-child(3) {\n\tstroke-width: 10px;\n}\n\n\n/* Effect 1 colors */\n\n.color-1 { stroke: #dea521; }\n.color-2 { stroke: #f84242; }\n.color-3 { stroke: #3758a7; }\n.color-4 { stroke: #f79c8c; }\n.color-5 { stroke: #84b5bd; }\n.color-6 { stroke: #feefde; }\n\n\n/* Effect 2 */\n\n.letters--effect-2 .letter__layer:first-child {\n\tstroke: #4caf50;\n\tstroke-width: 1px;\n}\n\n.letters--effect-2 .letter__layer:nth-child(2) {\n\tstroke: #ffeb3b;\n\tstroke-width: 4px;\n}\n\n.letters--effect-2 .letter__layer:nth-child(3) {\n\tstroke: #e6437b;\n\tstroke-width: 10px;\n}\n\n\n/* Effect 3 */\n\n.letters--effect-3 .letter__layer:first-child {\n\t-webkit-transform: translate3d(-2px, -2px, 0);\n\ttransform: translate3d(-2px, -2px, 0);\n\tstroke: #dddde6;\n\tstroke-width: 10px;\n}\n\n.letters--effect-3 .letter__layer:nth-child(2) {\n\tstroke: #eca80e;\n\tstroke-width: 6px;\n}\n\n.letters--effect-3 .letter__layer:nth-child(3) {\n\tstroke: #607d8b;\n\tstroke-width: 8px;\n}\n\n\n/* Effect 4 */\n\n.letters--effect-4 .letter__layer:first-child {\n\tstroke: #00966c;\n\tstroke-width: 10px;\n}\n\n.letters--effect-4 .letter__layer:nth-child(2) {\n\tstroke: #27272d;\n\tstroke-width: 4px;\n}\n\n.letters--effect-4 .letter__layer:nth-child(3) {\n\tstroke: #fcec9b;\n\tstroke-width: 1px;\n}\n"
  },
  {
    "path": "css/demo.css",
    "content": "*, *::after, *::before { -webkit-box-sizing: border-box; box-sizing: border-box; }\r\n\r\nbody {\r\n\tfont-family: 'Avenir Next', Avenir, 'Helvetica Neue', Helvetica, Arial, sans-serif;\r\n\tcolor: #fff;\r\n\tbackground: #27272d;\r\n\t-webkit-font-smoothing: antialiased;\r\n\t-moz-osx-font-smoothing: grayscale;\r\n}\r\n\r\na {\r\n\toutline: none;\r\n\tcolor: #fdf7b5;\r\n\ttext-decoration: none;\r\n}\r\n\r\na:hover, a:focus {\r\n\tcolor: #fff;\r\n}\r\n\r\n.hidden {\r\n\tposition: absolute;\r\n\toverflow: hidden;\r\n\twidth: 0;\r\n\theight: 0;\r\n\tpointer-events: none;\r\n}\r\n\r\n/* Icons */\r\n.icon {\r\n\tdisplay: block;\r\n\twidth: 1.5em;\r\n\theight: 1.5em;\r\n\tmargin: 0 auto;\r\n\tfill: currentColor;\r\n}\r\n\r\n/* Buttons */\r\n\r\n.btn {\r\n\tdisplay: block;\r\n\tmargin: 0;\r\n\tpadding: 0;\r\n\tcursor: pointer;\r\n\tpointer-events: auto;\r\n\tcolor: #fdf7b5;\r\n\tborder: none;\r\n\tbackground: none;\r\n}\r\n\r\n.btn:focus {\r\n\toutline: none;\r\n}\r\n\r\n.btn:hover {\r\n\tcolor: #fff;\r\n}\r\n\r\n.btn--start {\r\n\tborder: 2px solid;\r\n\tborder-radius: 1.85em;\r\n\tfont-weight: bold;\r\n\ttext-transform: uppercase;\r\n\tletter-spacing: 2px;\r\n\tfont-size: 0.95em;\r\n\tpadding: 1em 2em;\r\n\tmargin: 0 auto;\r\n\t-webkit-transition: color 0.2s;\r\n\ttransition: color 0.2s;\r\n}\r\n\r\n.btn--github {\r\n\tposition: absolute;\r\n\tright: 1em;\r\n\ttop: 0.75em;\r\n\tfont-size: 1.5em;\r\n\tmargin: 0.15em 0 0 0;\r\n}\r\n\r\n.btn--github .icon {\r\n\tstroke: #fdf7b5;\r\n\tfill: none;\r\n}\r\n\r\n.btn--github:hover .icon,\r\n.btn--github:focus .icon {\r\n\tstroke: #fff;\r\n}\r\n\r\n/* Codrops header */\r\n\r\n.codrops-header {\r\n\tdisplay: -webkit-flex;\r\n\tdisplay: -ms-flexbox;\r\n\tdisplay: flex;\r\n\t-webkit-flex-direction: row;\r\n\t-ms-flex-direction: row;\r\n\tflex-direction: row;\r\n\t-webkit-flex-wrap: wrap;\r\n\tflex-wrap: wrap;\r\n\t-webkit-align-items: center;\r\n\t-ms-flex-align: center;\r\n\talign-items: center;\r\n\tpadding: 1.25em 2em 3em 1.25em;\r\n\tposition: relative;\r\n}\r\n\r\n.codrops-header__title {\r\n\tfont-size: 1.15em;\r\n\tfont-weight: 500;\r\n\tmargin: 0;\r\n\tpadding: 0 0.75em;\r\n}\r\n\r\n.codrops-header__tagline {\r\n\tfont-size: 0.85em;\r\n\tmargin: 0 0 0 1em;\r\n\tmax-width: 505px;\r\n\ttext-align: left;\r\n\tfont-weight: 600;\r\n\tpadding: 0 4.75em 0 2em;\r\n\tposition: relative;\r\n \tborder-left: 1px solid rgba(255,255,255,0.3);\r\n}\r\n\r\n/* Top Navigation Style */\r\n\r\n.codrops-links {\r\n\tposition: relative;\r\n\tdisplay: -webkit-flex;\r\n\tdisplay: -ms-flexbox;\r\n\tdisplay: flex;\r\n\t-webkit-justify-content: center;\r\n\t-ms-flex-pack: center;\r\n\tjustify-content: center;\r\n\ttext-align: center;\r\n\twhite-space: nowrap;\r\n}\r\n\r\n.codrops-links::after {\r\n\tcontent: '';\r\n\tposition: absolute;\r\n\ttop: 10%;\r\n\tleft: 50%;\r\n\twidth: 1px;\r\n\theight: 80%;\r\n\topacity: 0.2;\r\n\tbackground: currentColor;\r\n\t-webkit-transform: rotate3d(0, 0, 1, 22.5deg);\r\n\ttransform: rotate3d(0, 0, 1, 22.5deg);\r\n}\r\n\r\n.codrops-icon {\r\n\tdisplay: inline-block;\r\n\tmargin: 0.25em;\r\n\tpadding: 0.25em;\r\n}\r\n\r\n/* Content */\r\n.content {\r\n\tposition: relative;\r\n\tmax-height: 85vh;\r\n\tmin-height: 300px;\r\n\tmargin: 0 auto 5em;\r\n}\r\n\r\n.content__meta {\r\n\tposition: relative;\r\n\ttext-align: center;\r\n}\r\n\r\n/* Related demos */\r\n.content--related {\r\n\ttext-align: center;\r\n\tfont-weight: bold;\r\n\tpadding: 7em 0 12em;\r\n\tmargin: 10em 0 0 0;\r\n\tbackground: #1c1c21;\r\n\tposition: relative;\r\n\tz-index: 1000;\r\n\tmax-height: none;\r\n}\r\n\r\n.media-item {\r\n\tdisplay: inline-block;\r\n\tpadding: 1em;\r\n\tvertical-align: top;\r\n\t-webkit-transition: color 0.3s;\r\n\ttransition: color 0.3s;\r\n}\r\n\r\n.media-item__img {\r\n\tmax-width: 100%;\r\n\topacity: 0.5;\r\n\t-webkit-transition: opacity 0.3s;\r\n\ttransition: opacity 0.3s;\r\n}\r\n\r\n.media-item:hover .media-item__img,\r\n.media-item:focus .media-item__img {\r\n\topacity: 1;\r\n}\r\n\r\n.media-item__title {\r\n\tmargin: 0;\r\n\tpadding: 0.5em;\r\n\tfont-size: 1em;\r\n}\r\n\r\n@media screen and (max-width: 50em) {\r\n\t.codrops-header {\r\n\t\t-webkit-flex-wrap: wrap;\r\n\t\tflex-wrap: wrap;\r\n\t\tpadding: 1em 3em 0 1em;\r\n\t}\r\n\t.codrops-header__title {\r\n\t\t-webkit-flex: none;\r\n\t\tflex: none;\r\n\t\twidth: 100%;\r\n\t\tpadding: 0.25em 0 0 0;\r\n\t}\r\n\t.codrops-header__tagline {\r\n\t\tpadding: 1em 0 0 0;\r\n\t\tborder: none;\r\n\t\tmargin: 0;\r\n\t}\r\n}"
  },
  {
    "path": "css/normalize.css",
    "content": "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;}"
  },
  {
    "path": "css/sponsor.css",
    "content": "/* Sponsor */\r\n.pater {\r\n\tdisplay: block;\r\n\tposition: fixed;\r\n\twidth: 100%;\r\n\tright: 0;\r\n\tbottom: 0;\r\n}\r\n\r\n.pater::before {\r\n\tcontent: 'Sponsor:';\r\n\tposition: absolute;\r\n\tcolor: #000;\r\n\tfont-weight: bold;\r\n\ttext-transform: uppercase;\r\n\tletter-spacing: 2px;\r\n\tfont-size: 0.5em;\r\n\ttop: 0.75em;\r\n\tleft: 0.75em;\r\n\topacity: 0.4;\r\n}\r\n\r\n.pater__img {\r\n\tdisplay: none;\r\n}\r\n\r\n.pater__title {\r\n\tdisplay: block;\r\n\tbackground: #fdf7b5;\r\n\tcolor: #333;\r\n\ttext-align: left;\r\n\tpadding: 2em 1em 1em;\r\n\tfont-size: 1em;\r\n\tmargin: 0;\r\n}\r\n\r\n.pater__title span {\r\n\tcolor: #f84242;\r\n}\r\n\r\n@media screen and (min-width: 50em) {\r\n\t.pater {\r\n\t\twidth: 280px;\r\n\t\theight: 258px;\r\n\t}\r\n\t.pater::before {\r\n\t\tleft: 6em;\r\n\t\ttop: 6em;\r\n\t}\r\n\t.pater__img {\r\n\t\tdisplay: block;\r\n\t\twidth: 100%;\r\n\t\tposition: absolute;\r\n\t\tbottom: 0;\r\n\t\tleft: 0;\r\n\t\topacity: 0.5;\r\n\t\t-webkit-transform: translate3d(50px,50px,0);\r\n\t\ttransform: translate3d(50px,50px,0);\r\n\t\t-webkit-transition: -webkit-transform 0.5s, opacity 0.5s;\r\n\t\ttransition: transform 0.5s, opacity 0.5s;\r\n\t\t-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);\r\n\t\ttransition-timing-function: cubic-bezier(0.7,0,0.3,1);\r\n\t}\r\n\t.pater:hover .pater__img {\r\n\t\topacity: 1;\r\n\t\t-webkit-transform: translate3d(0,0,0);\r\n\t\ttransform: translate3d(0,0,0);\r\n\t}\r\n\t.pater__title {\r\n\t\tposition: absolute;\r\n\t\twidth: 100%;\r\n\t\tbottom: 0;\r\n\t\tright: 0;\r\n\t\tfont-size: 0.85em;\r\n\t\tpadding: 1.25em 50px 1em 1.5em;\r\n\t\t-webkit-transform: translate3d(105px,-20px,0);\r\n\t\ttransform: translate3d(105px,-20px,0);\r\n\t\t-webkit-transition: -webkit-transform 0.5s;\r\n\t\ttransition: transform 0.5s;\r\n\t\t-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);\r\n\t\ttransition-timing-function: cubic-bezier(0.7,0,0.3,1);\r\n\t}\r\n\t.pater:hover .pater__title {\r\n\t\t-webkit-transform: translate3d(0,0,0);\r\n\t\ttransform: translate3d(0,0,0);\r\n\t}\r\n}"
  },
  {
    "path": "index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\" class=\"no-js\">\n\t<head>\n\t\t<meta charset=\"UTF-8\" />\n\t\t<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\t\t<title>Fancy SVG Letter Animation | Codrops</title>\n\t\t<meta name=\"description\" content=\"An SVG stroke animation on letters inspired by a Dribbble shot of Jake Bartlett, powered by anime.js\" />\n\t\t<meta name=\"keywords\" content=\"svg, stroke, animation, letters, typography, effect, css, web design, web development, demo, tutorial\" />\n\t\t<meta name=\"author\" content=\"Codrops\" />\n\t\t<link rel=\"shortcut icon\" href=\"favicon.ico\">\n\t\t<link rel=\"stylesheet\" type=\"text/css\" href=\"css/normalize.css\" />\n\t\t<link rel=\"stylesheet\" type=\"text/css\" href=\"css/demo.css\" />\n\t\t<link rel=\"stylesheet\" type=\"text/css\" href=\"css/sponsor.css\" />\n\t\t<link rel=\"stylesheet\" type=\"text/css\" href=\"css/component.css\" />\n\t\t<!--[if IE]><script src=\"http://html5shiv.googlecode.com/svn/trunk/html5.js\"></script><![endif]-->\n\t\t<script>\n\t\t\tdocument.documentElement.className = 'js';\n\t\t</script>\n\t</head>\n\t<body>\n\t\t<svg class=\"hidden\">\n\t\t\t<defs>\n\t\t\t\t<symbol id=\"icon-arrow\" viewBox=\"0 0 24 24\">\n\t\t\t\t\t<title>arrow</title>\n\t\t\t\t\t<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 \" />\n\t\t\t\t</symbol>\n\t\t\t\t<symbol id=\"icon-drop\" viewBox=\"0 0 24 24\">\n\t\t\t\t\t<title>drop</title>\n\t\t\t\t\t<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\" />\n\t\t\t\t\t<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\" />\n\t\t\t\t</symbol>\n\t\t\t\t<symbol id=\"icon-octicon\" viewBox=\"0 0 24 24\">\n\t\t\t\t\t<title>octicon</title>\n\t\t\t\t\t<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\" />\n\t\t\t\t</symbol>\n\t\t\t</defs>\n\t\t</svg>\n\t\t<main>\n\t\t\t<header class=\"codrops-header\">\n\t\t\t\t<div class=\"codrops-links\">\n\t\t\t\t\t<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>\n\t\t\t\t\t<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>\n\t\t\t\t</div>\n\t\t\t\t<h1 class=\"codrops-header__title\">Fancy SVG Letter Animation</h1>\n\t\t\t\t<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>\n\t\t\t\t<a href=\"https://github.com/codrops/FancyLetterAnimation/\" class=\"btn btn--github\"><svg class=\"icon icon--octicon\"><use xlink:href=\"#icon-octicon\"></use></svg></a>\n\t\t\t</header>\n\t\t\t<div class=\"content content--1\">\n\t\t\t\t<svg width=\"100%\" height=\"100%\" viewBox=\"0 0 320 180\" class=\"letters letters--effect-1\">\n\t\t\t\t\t<!--W-->\n\t\t\t\t\t<g class=\"letter letter--1\">\n\t\t\t\t\t\t<g class=\"letter__part\">\n\t\t\t\t\t\t\t<path class=\"letter__layer color-6\" d=\"M25,39.7l22.4,51l7.9-32.2L76.2,84l1.3-61.2\" />\n\t\t\t\t\t\t\t<path class=\"letter__layer color-1\" d=\"M25,39.7l22.4,51l7.9-32.2L76.2,84l1.3-61.2\" />\n\t\t\t\t\t\t\t<path class=\"letter__layer color-2\" d=\"M25,39.7l22.4,51l7.9-32.2L76.2,84l1.3-61.2\" />\n\t\t\t\t\t\t</g>\n\t\t\t\t\t</g>\n\t\t\t\t\t<!--I-->\n\t\t\t\t\t<g class=\"letter letter--2\">\n\t\t\t\t\t\t<g class=\"letter__part\">\n\t\t\t\t\t\t\t<path class=\"letter__layer color-6\" d=\"M100,20.3l8.4,58.4\" />\n\t\t\t\t\t\t\t<path class=\"letter__layer color-2\" d=\"M100,20.3l8.4,58.4\" />\n\t\t\t\t\t\t\t<path class=\"letter__layer color-3\" d=\"M100,20.3l8.4,58.4\" />\n\t\t\t\t\t\t</g>\n\t\t\t\t\t</g>\n\t\t\t\t\t<!--L-->\n\t\t\t\t\t<g class=\"letter letter--3\">\n\t\t\t\t\t\t<g class=\"letter__part\">\n\t\t\t\t\t\t\t<path class=\"letter__layer color-6\" d=\"M126.4,70.8l27.6,0.5\" />\n\t\t\t\t\t\t\t<path class=\"letter__layer color-3\" d=\"M126.4,70.8l27.6,0.5\" />\n\t\t\t\t\t\t\t<path class=\"letter__layer color-4\" d=\"M126.4,70.8l27.6,0.5\" />\n\t\t\t\t\t\t</g>\n\t\t\t\t\t\t<g class=\"letter__part\">\n\t\t\t\t\t\t\t<path class=\"letter__layer color-6\" d=\"M128.9,15.6l-2.3,60.2\" />\n\t\t\t\t\t\t\t<path class=\"letter__layer color-3\" d=\"M128.9,15.6l-2.3,60.2\" />\n\t\t\t\t\t\t\t<path class=\"letter__layer color-4\" d=\"M128.9,15.6l-2.3,60.2\" />\n\t\t\t\t\t\t</g>\n\t\t\t\t\t</g>\n\t\t\t\t\t<!--D-->\n\t\t\t\t\t<g class=\"letter letter--4\">\n\t\t\t\t\t\t<g class=\"letter__part\">\n\t\t\t\t\t\t\t<path class=\"letter__layer color-6\" d=\"M167.4,27.6l3.7,49.1\" />\n\t\t\t\t\t\t\t<path class=\"letter__layer color-4\" d=\"M167.4,27.6l3.7,49.1\" />\n\t\t\t\t\t\t\t<path class=\"letter__layer color-5\" d=\"M167.4,27.6l3.7,49.1\" />\n\t\t\t\t\t\t</g>\n\t\t\t\t\t\t<g class=\"letter__part\">\n\t\t\t\t\t\t\t<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\" />\n\t\t\t\t\t\t\t<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\" />\n\t\t\t\t\t\t\t<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\" />\n\t\t\t\t\t\t</g>\n\t\t\t\t\t</g>\n\t\t\t\t\t<!--E-->\n\t\t\t\t\t<g class=\"letter letter--5\">\n\t\t\t\t\t\t<g class=\"letter__part\">\n\t\t\t\t\t\t\t<path class=\"letter__layer color-6\" d=\"M215,52l25.6,2.8\" />\n\t\t\t\t\t\t\t<path class=\"letter__layer color-5\" d=\"M215,52l25.6,2.8\" />\n\t\t\t\t\t\t\t<path class=\"letter__layer color-1\" d=\"M215,52l25.6,2.8\" />\n\t\t\t\t\t\t</g>\n\t\t\t\t\t\t<g class=\"letter__part\">\n\t\t\t\t\t\t\t<path class=\"letter__layer color-6\" d=\"M211.8,76.9l30.6,3.4\" />\n\t\t\t\t\t\t\t<path class=\"letter__layer color-5\" d=\"M211.8,76.9l30.6,3.4\" />\n\t\t\t\t\t\t\t<path class=\"letter__layer color-1\" d=\"M211.8,76.9l30.6,3.4\" />\n\t\t\t\t\t\t</g>\n\t\t\t\t\t\t<g class=\"letter__part\">\n\t\t\t\t\t\t\t<path class=\"letter__layer color-6\" d=\"M218.6,27.4l30.9,2.9\" />\n\t\t\t\t\t\t\t<path class=\"letter__layer color-5\" d=\"M218.6,27.4l30.9,2.9\" />\n\t\t\t\t\t\t\t<path class=\"letter__layer color-1\" d=\"M218.6,27.4l30.9,2.9\" />\n\t\t\t\t\t\t</g>\n\t\t\t\t\t\t<g class=\"letter__part\">\n\t\t\t\t\t\t\t<path class=\"letter__layer color-6\" d=\"M218.4,22.4l-6.9,59.6\" />\n\t\t\t\t\t\t\t<path class=\"letter__layer color-5\" d=\"M218.4,22.4l-6.9,59.6\" />\n\t\t\t\t\t\t\t<path class=\"letter__layer color-1\" d=\"M218.4,22.4l-6.9,59.6\" />\n\t\t\t\t\t\t</g>\n\t\t\t\t\t</g>\n\t\t\t\t\t<!--R-->\n\t\t\t\t\t<g class=\"letter letter--6\">\n\t\t\t\t\t\t<g class=\"letter__part\">\n\t\t\t\t\t\t\t<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\" />\n\t\t\t\t\t\t\t<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\" />\n\t\t\t\t\t\t\t<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\" />\n\t\t\t\t\t\t</g>\n\t\t\t\t\t\t<g class=\"letter__part\">\n\t\t\t\t\t\t\t<path class=\"letter__layer color-6\" d=\"M284.9,96.2l-20.4-35.1\" />\n\t\t\t\t\t\t\t<path class=\"letter__layer color-4\" d=\"M284.9,96.2l-20.4-35.1\" />\n\t\t\t\t\t\t\t<path class=\"letter__layer color-2\" d=\"M284.9,96.2l-20.4-35.1\" />\n\t\t\t\t\t\t</g>\n\t\t\t\t\t\t<g class=\"letter__part\">\n\t\t\t\t\t\t\t<path class=\"letter__layer color-6\" d=\"M275.2,29.4l-20.5,60.6\" />\n\t\t\t\t\t\t\t<path class=\"letter__layer color-4\" d=\"M275.2,29.4l-20.5,60.6\" />\n\t\t\t\t\t\t\t<path class=\"letter__layer color-2\" d=\"M275.2,29.4l-20.5,60.6\" />\n\t\t\t\t\t\t</g>\n\t\t\t\t\t</g>\n\t\t\t\t\t<!--M-->\n\t\t\t\t\t<g class=\"letter letter--7\">\n\t\t\t\t\t\t<g class=\"letter__part\">\n\t\t\t\t\t\t\t<path class=\"letter__layer color-6\" d=\"M72.9,156.9l-7.1-56.5L91.7,127l18.8-29.8l7.1,56.5\" />\n\t\t\t\t\t\t\t<path class=\"letter__layer color-3\" d=\"M72.9,156.9l-7.1-56.5L91.7,127l18.8-29.8l7.1,56.5\" />\n\t\t\t\t\t\t\t<path class=\"letter__layer color-1\" d=\"M72.9,156.9l-7.1-56.5L91.7,127l18.8-29.8l7.1,56.5\" />\n\t\t\t\t\t\t</g>\n\t\t\t\t\t</g>\n\t\t\t\t\t<!--I-->\n\t\t\t\t\t<g class=\"letter letter--8\">\n\t\t\t\t\t\t<g class=\"letter__part\">\n\t\t\t\t\t\t\t<path class=\"letter__layer color-6\" d=\"M144.9,99.5l-6,61.3\" />\n\t\t\t\t\t\t\t<path class=\"letter__layer color-4\" d=\"M144.9,99.5l-6,61.3\" />\n\t\t\t\t\t\t\t<path class=\"letter__layer color-2\" d=\"M144.9,99.5l-6,61.3\" />\n\t\t\t\t\t\t</g>\n\t\t\t\t\t</g>\n\t\t\t\t\t<!--N-->\n\t\t\t\t\t<g class=\"letter letter--9\">\n\t\t\t\t\t\t<g class=\"letter__part\">\n\t\t\t\t\t\t\t<path class=\"letter__layer color-6\" d=\"M170.4,161.9l-3.2-61.8l43.4,58.1l-7.2-62.6\" />\n\t\t\t\t\t\t\t<path class=\"letter__layer color-1\" d=\"M170.4,161.9l-3.2-61.8l43.4,58.1l-7.2-62.6\" />\n\t\t\t\t\t\t\t<path class=\"letter__layer color-3\" d=\"M170.4,161.9l-3.2-61.8l43.4,58.1l-7.2-62.6\" />\n\t\t\t\t\t\t</g>\n\t\t\t\t\t</g>\n\t\t\t\t\t<!--D-->\n\t\t\t\t\t<g class=\"letter letter--10\">\n\t\t\t\t\t\t<g class=\"letter__part\">\n\t\t\t\t\t\t\t<path class=\"letter__layer color-6\" d=\"M233.8,107.9l3.9,51.7\" />\n\t\t\t\t\t\t\t<path class=\"letter__layer color-5\" d=\"M233.8,107.9l3.9,51.7\" />\n\t\t\t\t\t\t\t<path class=\"letter__layer color-4\" d=\"M233.8,107.9l3.9,51.7\" />\n\t\t\t\t\t\t</g>\n\t\t\t\t\t\t<g class=\"letter__part\">\n\t\t\t\t\t\t\t<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\" />\n\t\t\t\t\t\t\t<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\" />\n\t\t\t\t\t\t\t<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\" />\n\t\t\t\t\t\t</g>\n\t\t\t\t\t</g>\n\t\t\t\t</svg>\n\t\t\t\t<div class=\"content__meta\"><button class=\"btn btn--start\" aria-label=\"Start animation\">Start</button></div>\n\t\t\t</div>\n\t\t\t<div class=\"content content--2\">\n\t\t\t\t<svg width=\"100%\" height=\"100%\" viewBox=\"0 0 320 180\" class=\"letters letters--effect-2\">\n\t\t\t\t\t<!--O-->\n\t\t\t\t\t<g class=\"letter letter--1\">\n\t\t\t\t\t\t<g class=\"letter__part\">\n\t\t\t\t\t\t\t<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\" />\n\t\t\t\t\t\t\t<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\" />\n\t\t\t\t\t\t\t<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\" />\n\t\t\t\t\t\t</g>\n\t\t\t\t\t</g>\n\t\t\t\t\t<!--N-->\n\t\t\t\t\t<g class=\"letter letter--1\">\n\t\t\t\t\t\t<g class=\"letter__part\">\n\t\t\t\t\t\t\t<path class=\"letter__layer\" d=\"M162.1,27.1v57.4l-38.3-57.4v57.4\" />\n\t\t\t\t\t\t\t<path class=\"letter__layer\" d=\"M162.1,27.1v57.4l-38.3-57.4v57.4\" />\n\t\t\t\t\t\t\t<path class=\"letter__layer\" d=\"M162.1,27.1v57.4l-38.3-57.4v57.4\" />\n\t\t\t\t\t\t</g>\n\t\t\t\t\t</g>\n\t\t\t\t\t<!--L-->\n\t\t\t\t\t<g class=\"letter letter--1\">\n\t\t\t\t\t\t<g class=\"letter__part\">\n\t\t\t\t\t\t\t<path class=\"letter__layer\" d=\"M183.9,27.1v57.4\" />\n\t\t\t\t\t\t\t<path class=\"letter__layer\" d=\"M183.9,27.1v57.4\" />\n\t\t\t\t\t\t\t<path class=\"letter__layer\" d=\"M183.9,27.1v57.4\" />\n\t\t\t\t\t\t</g>\n\t\t\t\t\t\t<g class=\"letter__part\">\n\t\t\t\t\t\t\t<path class=\"letter__layer\" d=\"M183.9,79.5h32.8\" />\n\t\t\t\t\t\t\t<path class=\"letter__layer\" d=\"M183.9,79.5h32.8\" />\n\t\t\t\t\t\t\t<path class=\"letter__layer\" d=\"M183.9,79.5h32.8\" />\n\t\t\t\t\t\t</g>\n\t\t\t\t\t</g>\n\t\t\t\t\t<!--Y-->\n\t\t\t\t\t<g class=\"letter letter--1\">\n\t\t\t\t\t\t<g class=\"letter__part\">\n\t\t\t\t\t\t\t<path class=\"letter__layer\" d=\"M250,27.1l-21.9,27.3\" />\n\t\t\t\t\t\t\t<path class=\"letter__layer\" d=\"M250,27.1l-21.9,27.3\" />\n\t\t\t\t\t\t\t<path class=\"letter__layer\" d=\"M250,27.1l-21.9,27.3\" />\n\t\t\t\t\t\t</g>\n\t\t\t\t\t\t<g class=\"letter__part\">\n\t\t\t\t\t\t\t<path class=\"letter__layer\" d=\"M206.2,27.1c17.4,14.3,27.6,34.9,21.9,57.4\" />\n\t\t\t\t\t\t\t<path class=\"letter__layer\" d=\"M206.2,27.1c17.4,14.3,27.6,34.9,21.9,57.4\" />\n\t\t\t\t\t\t\t<path class=\"letter__layer\" d=\"M206.2,27.1c17.4,14.3,27.6,34.9,21.9,57.4\" />\n\t\t\t\t\t\t</g>\n\t\t\t\t\t</g>\n\t\t\t\t\t<!--L-->\n\t\t\t\t\t<g class=\"letter letter--1\">\n\t\t\t\t\t\t<g class=\"letter__part\">\n\t\t\t\t\t\t\t<path class=\"letter__layer\" d=\"M71.3,91.9v57.4\" />\n\t\t\t\t\t\t\t<path class=\"letter__layer\" d=\"M71.3,91.9v57.4\" />\n\t\t\t\t\t\t\t<path class=\"letter__layer\" d=\"M71.3,91.9v57.4\" />\n\t\t\t\t\t\t</g>\n\t\t\t\t\t\t<g class=\"letter__part\">\n\t\t\t\t\t\t\t<path class=\"letter__layer\" d=\"M71.3,144.4h32.8\" />\n\t\t\t\t\t\t\t<path class=\"letter__layer\" d=\"M71.3,144.4h32.8\" />\n\t\t\t\t\t\t\t<path class=\"letter__layer\" d=\"M71.3,144.4h32.8\" />\n\t\t\t\t\t\t</g>\n\t\t\t\t\t</g>\n\t\t\t\t\t<!--O-->\n\t\t\t\t\t<g class=\"letter letter--1\">\n\t\t\t\t\t\t<g class=\"letter__part\">\n\t\t\t\t\t\t\t<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\" />\n\t\t\t\t\t\t\t<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\" />\n\t\t\t\t\t\t\t<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\" />\n\t\t\t\t\t\t</g>\n\t\t\t\t\t</g>\n\t\t\t\t\t<!--V-->\n\t\t\t\t\t<g class=\"letter letter--1\">\n\t\t\t\t\t\t<g class=\"letter__part\">\n\t\t\t\t\t\t\t<path class=\"letter__layer\" d=\"M202,93.7l-21.9,57.4l-21.9-57.4\" />\n\t\t\t\t\t\t\t<path class=\"letter__layer\" d=\"M202,93.7l-21.9,57.4l-21.9-57.4\" />\n\t\t\t\t\t\t\t<path class=\"letter__layer\" d=\"M202,93.7l-21.9,57.4l-21.9-57.4\" />\n\t\t\t\t\t\t</g>\n\t\t\t\t\t</g>\n\t\t\t\t\t<!--E-->\n\t\t\t\t\t<g class=\"letter letter--1\">\n\t\t\t\t\t\t<g class=\"letter__part\">\n\t\t\t\t\t\t\t<path class=\"letter__layer\" d=\"M217,95.5v57.4\" />\n\t\t\t\t\t\t\t<path class=\"letter__layer\" d=\"M217,95.5v57.4\" />\n\t\t\t\t\t\t\t<path class=\"letter__layer\" d=\"M217,95.5v57.4\" />\n\t\t\t\t\t\t</g>\n\t\t\t\t\t\t<g class=\"letter__part\">\n\t\t\t\t\t\t\t<path class=\"letter__layer\" d=\"M217,100.5h32.5\" />\n\t\t\t\t\t\t\t<path class=\"letter__layer\" d=\"M217,100.5h32.5\" />\n\t\t\t\t\t\t\t<path class=\"letter__layer\" d=\"M217,100.5h32.5\" />\n\t\t\t\t\t\t</g>\n\t\t\t\t\t\t<g class=\"letter__part\">\n\t\t\t\t\t\t\t<path class=\"letter__layer\" d=\"M217,122.8h20\" />\n\t\t\t\t\t\t\t<path class=\"letter__layer\" d=\"M217,122.8h20\" />\n\t\t\t\t\t\t\t<path class=\"letter__layer\" d=\"M217,122.8h20\" />\n\t\t\t\t\t\t</g>\n\t\t\t\t\t\t<g class=\"letter__part\">\n\t\t\t\t\t\t\t<path class=\"letter__layer\" d=\"M217,147.9h32.5\" />\n\t\t\t\t\t\t\t<path class=\"letter__layer\" d=\"M217,147.9h32.5\" />\n\t\t\t\t\t\t\t<path class=\"letter__layer\" d=\"M217,147.9h32.5\" />\n\t\t\t\t\t\t</g>\n\t\t\t\t\t</g>\n\t\t\t\t</svg>\n\t\t\t\t<div class=\"content__meta\"><button class=\"btn btn--start\" aria-label=\"Start animation\">Start</button></div>\n\t\t\t</div>\t\t\n\t\t\t<div class=\"content content--3\">\n\t\t\t\t<svg width=\"100%\" height=\"100%\" viewBox=\"0 0 400 300\" class=\"letters letters--effect-3\">\n\t\t\t\t\t<!--J-->\n\t\t\t\t\t<g class=\"letter letter--1\">\n\t\t\t\t\t\t<g class=\"letter__part\">\n\t\t\t\t\t\t\t<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\" />\n\t\t\t\t\t\t\t<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\" />\n\t\t\t\t\t\t\t<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\" />\n\t\t\t\t\t\t</g>\n\t\t\t\t\t</g>\n\t\t\t\t\t<!--u-->\n\t\t\t\t\t<g class=\"letter letter--2\">\n\t\t\t\t\t\t<g class=\"letter__part\">\n\t\t\t\t\t\t\t<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\" />\n\t\t\t\t\t\t\t<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\" />\n\t\t\t\t\t\t\t<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\" />\n\t\t\t\t\t\t</g>\n\t\t\t\t\t</g>\n\t\t\t\t\t<!--s-->\n\t\t\t\t\t<g class=\"letter letter--3\">\n\t\t\t\t\t\t<g class=\"letter__part\">\n\t\t\t\t\t\t\t<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\" />\n\t\t\t\t\t\t\t<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\" />\n\t\t\t\t\t\t\t<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\" />\n\t\t\t\t\t\t</g>\n\t\t\t\t\t</g>\n\t\t\t\t\t<!--t-->\n\t\t\t\t\t<g class=\"letter letter--4\">\n\t\t\t\t\t\t<g class=\"letter__part\">\n\t\t\t\t\t\t\t<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\" />\n\t\t\t\t\t\t\t<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\" />\n\t\t\t\t\t\t\t<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\" />\n\t\t\t\t\t\t</g>\n\t\t\t\t\t\t<g class=\"letter__part\">\n\t\t\t\t\t\t\t<path class=\"letter__layer\" d=\"M217.1,90.5c14.6,0.2,29.3,0,43.9-0.7\" />\n\t\t\t\t\t\t\t<path class=\"letter__layer\" d=\"M217.1,90.5c14.6,0.2,29.3,0,43.9-0.7\" />\n\t\t\t\t\t\t\t<path class=\"letter__layer\" d=\"M217.1,90.5c14.6,0.2,29.3,0,43.9-0.7\" />\n\t\t\t\t\t\t</g>\n\t\t\t\t\t</g>\n\t\t\t\t\t<!--S-->\n\t\t\t\t\t<g class=\"letter letter--5\">\n\t\t\t\t\t\t<g class=\"letter__part\">\n\t\t\t\t\t\t\t<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\" />\n\t\t\t\t\t\t\t<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\" />\n\t\t\t\t\t\t\t<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\" />\n\t\t\t\t\t\t</g>\n\t\t\t\t\t</g>\n\t\t\t\t\t<!--m-->\n\t\t\t\t\t<g class=\"letter letter--6\">\n\t\t\t\t\t\t<g class=\"letter__part\">\n\t\t\t\t\t\t\t<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\" />\n\t\t\t\t\t\t\t<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\" />\n\t\t\t\t\t\t\t<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\" />\n\t\t\t\t\t\t</g>\n\t\t\t\t\t\t<g class=\"letter__part\">\n\t\t\t\t\t\t\t<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\" />\n\t\t\t\t\t\t\t<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\" />\n\t\t\t\t\t\t\t<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\" />\n\t\t\t\t\t\t</g>\n\t\t\t\t\t\t<g class=\"letter__part\">\n\t\t\t\t\t\t\t<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\" />\n\t\t\t\t\t\t\t<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\" />\n\t\t\t\t\t\t\t<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\" />\n\t\t\t\t\t\t</g>\n\t\t\t\t\t</g>\n\t\t\t\t\t<!--o-->\n\t\t\t\t\t<g class=\"letter letter--7\">\n\t\t\t\t\t\t<g class=\"letter__part\">\n\t\t\t\t\t\t\t<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\" />\n\t\t\t\t\t\t\t<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\" />\n\t\t\t\t\t\t\t<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\" />\n\t\t\t\t\t\t</g>\n\t\t\t\t\t</g>\n\t\t\t\t\t<!--k-->\n\t\t\t\t\t<g class=\"letter letter--8\">\n\t\t\t\t\t\t<g class=\"letter__part\">\n\t\t\t\t\t\t\t<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\" />\n\t\t\t\t\t\t\t<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\" />\n\t\t\t\t\t\t\t<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\" />\n\t\t\t\t\t\t</g>\n\t\t\t\t\t\t<g class=\"letter__part\">\n\t\t\t\t\t\t\t<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\" />\n\t\t\t\t\t\t\t<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\" />\n\t\t\t\t\t\t\t<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\" />\n\t\t\t\t\t\t</g>\n\t\t\t\t\t</g>\n\t\t\t\t\t<!--e-->\n\t\t\t\t\t<g class=\"letter letter--9\">\n\t\t\t\t\t\t<g class=\"letter__part\">\n\t\t\t\t\t\t\t<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\" />\n\t\t\t\t\t\t\t<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\" />\n\t\t\t\t\t\t\t<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\" />\n\t\t\t\t\t\t</g>\n\t\t\t\t\t</g>\n\t\t\t\t</svg>\n\t\t\t\t<div class=\"content__meta\"><button class=\"btn btn--start\" aria-label=\"Start animation\">Start</button></div>\n\t\t\t</div>\n\t\t\t<div class=\"content content--4\">\n\t\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\" viewBox=\"0 0 320 180\" class=\"letters letters--effect-4\">\n\t\t\t\t\t<g class=\"letter letter--1\">\n\t\t\t\t\t\t<g class=\"letter__part\">\n\t\t\t\t\t\t\t<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\" />\n\t\t\t\t\t\t\t<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\" />\n\t\t\t\t\t\t\t<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\" />\n\t\t\t\t\t\t</g>\n\t\t\t\t\t\t<g class=\"letter__part\">\n\t\t\t\t\t\t\t<path class=\"letter__layer\" d=\"M39.2,89.6c45.8-10.3,59.4,49.7-13,36.4\" />\n\t\t\t\t\t\t\t<path class=\"letter__layer\" d=\"M39.2,89.6c45.8-10.3,59.4,49.7-13,36.4\" />\n\t\t\t\t\t\t\t<path class=\"letter__layer\" d=\"M39.2,89.6c45.8-10.3,59.4,49.7-13,36.4\" />\n\t\t\t\t\t\t</g>\n\t\t\t\t\t\t<g class=\"letter__part\">\n\t\t\t\t\t\t\t<path class=\"letter__layer\" d=\"M40.5,63.4v54.9\" />\n\t\t\t\t\t\t\t<path class=\"letter__layer\" d=\"M40.5,63.4v54.9\" />\n\t\t\t\t\t\t\t<path class=\"letter__layer\" d=\"M40.5,63.4v54.9\" />\n\t\t\t\t\t\t</g>\n\t\t\t\t\t</g>\n\t\t\t\t\t<g class=\"letter letter--2\">\n\t\t\t\t\t\t<g class=\"letter__part\">\n\t\t\t\t\t\t\t<path class=\"letter__layer\" d=\"M91,97.4h31.3c-12.9-65.4-51.4,62.3,0,13.1\" />\n\t\t\t\t\t\t\t<path class=\"letter__layer\" d=\"M91,97.4h31.3c-12.9-65.4-51.4,62.3,0,13.1\" />\n\t\t\t\t\t\t\t<path class=\"letter__layer\" d=\"M91,97.4h31.3c-12.9-65.4-51.4,62.3,0,13.1\" />\n\t\t\t\t\t\t</g>\n\t\t\t\t\t</g>\n\t\t\t\t\t<g class=\"letter letter--3\">\n\t\t\t\t\t\t<g class=\"letter__part\">\n\t\t\t\t\t\t\t<path class=\"letter__layer\" d=\"M140.6,63.4v61.7\" />\n\t\t\t\t\t\t\t<path class=\"letter__layer\" d=\"M140.6,63.4v61.7\" />\n\t\t\t\t\t\t\t<path class=\"letter__layer\" d=\"M140.6,63.4v61.7\" />\n\t\t\t\t\t\t</g>\n\t\t\t\t\t</g>\n\t\t\t\t\t<g class=\"letter letter--4\">\n\t\t\t\t\t\t<g class=\"letter__part\">\n\t\t\t\t\t\t\t<path class=\"letter__layer\" d=\"M161.5,72.1l6.3-10\" />\n\t\t\t\t\t\t\t<path class=\"letter__layer\" d=\"M161.5,72.1l6.3-10\" />\n\t\t\t\t\t\t\t<path class=\"letter__layer\" d=\"M161.5,72.1l6.3-10\" />\n\t\t\t\t\t\t</g>\n\t\t\t\t\t\t<g class=\"letter__part\">\n\t\t\t\t\t\t\t<path class=\"letter__layer\" d=\"M161.5,81.7v43.4\" />\n\t\t\t\t\t\t\t<path class=\"letter__layer\" d=\"M161.5,81.7v43.4\" />\n\t\t\t\t\t\t\t<path class=\"letter__layer\" d=\"M161.5,81.7v43.4\" />\n\t\t\t\t\t\t</g>\n\t\t\t\t\t</g>\n\t\t\t\t\t<g class=\"letter letter--5\">\n\t\t\t\t\t\t<g class=\"letter__part\">\n\t\t\t\t\t\t\t<path class=\"letter__layer\" d=\"M177.3,97.4h31.3c-12.9-65.4-51.4,62.3,0,13.1\" />\n\t\t\t\t\t\t\t<path class=\"letter__layer\" d=\"M177.3,97.4h31.3c-12.9-65.4-51.4,62.3,0,13.1\" />\n\t\t\t\t\t\t\t<path class=\"letter__layer\" d=\"M177.3,97.4h31.3c-12.9-65.4-51.4,62.3,0,13.1\" />\n\t\t\t\t\t\t</g>\n\t\t\t\t\t</g>\n\t\t\t\t\t<g class=\"letter letter--6\">\n\t\t\t\t\t\t<g class=\"letter__part\">\n\t\t\t\t\t\t\t<path class=\"letter__layer\" d=\"M222.2,81.7l15.8,42.4l15.5-42.4\" />\n\t\t\t\t\t\t\t<path class=\"letter__layer\" d=\"M222.2,81.7l15.8,42.4l15.5-42.4\" />\n\t\t\t\t\t\t\t<path class=\"letter__layer\" d=\"M222.2,81.7l15.8,42.4l15.5-42.4\" />\n\t\t\t\t\t\t</g>\n\t\t\t\t\t</g>\n\t\t\t\t\t<g class=\"letter letter--7\">\n\t\t\t\t\t\t<g class=\"letter__part\">\n\t\t\t\t\t\t\t<path class=\"letter__layer\" d=\"M293.7,110.5c-51.4,49.2-12.9-78.5,0-13.1h-31.3\" />\n\t\t\t\t\t\t\t<path class=\"letter__layer\" d=\"M293.7,110.5c-51.4,49.2-12.9-78.5,0-13.1h-31.3\" />\n\t\t\t\t\t\t\t<path class=\"letter__layer\" d=\"M293.7,110.5c-51.4,49.2-12.9-78.5,0-13.1h-31.3\" />\n\t\t\t\t\t\t</g>\n\t\t\t\t\t</g>\n\t\t\t\t</svg>\n\t\t\t\t<div class=\"content__meta\"><button class=\"btn btn--start\" aria-label=\"Start animation\">Start</button></div>\n\t\t\t</div>\n\t\t\t<!-- Related demos -->\n\t\t\t<section class=\"content content--related\">\n\t\t\t\t<p>If you enjoyed this demo you might also like:</p>\n\t\t\t\t<a class=\"media-item\" href=\"http://tympanus.net/Development/SVGDrawingAnimation/\">\n\t\t\t\t\t<img class=\"media-item__img\" src=\"img/related/SVGDrawingAnimation.png\">\n\t\t\t\t\t<h3 class=\"media-item__title\">SVG Drawing Animation</h3>\n\t\t\t\t</a>\n\t\t\t\t<a class=\"media-item\" href=\"http://tympanus.net/Development/AnimatedLetters/\">\n\t\t\t\t\t<img class=\"media-item__img\" src=\"img/related/AnimatedLetters.png\">\n\t\t\t\t\t<h3 class=\"media-item__title\">Animated Letters</h3>\n\t\t\t\t</a>\n\t\t\t</section>\n\t\t\t<a class=\"pater\" href=\"http://goo.gl/eIBPXd\" rel=\"nofollow\">\n\t\t\t\t<img class=\"pater__img\" src=\"img/sponsor/MightyDeals_FontDeals.png\" alt=\"Font Deals by Mighty Deals\"/>\n\t\t\t\t<h3 class=\"pater__title\">Amazing Font Deals! <br /><span>Up to 95% off!</span> &rarr;</h3>\n\t\t\t</a>\n\t\t</main>\n\t\t<script src=\"js/anime.min.js\"></script>\n\t\t<script src=\"js/main.js\"></script>\n\t\t<script>\n\t\t(function() {\n\t\t\tvar svgFx1 = document.querySelector('.letters--effect-1'),\n\t\t\t\tsvgFx2 = document.querySelector('.letters--effect-2'),\n\t\t\t\tsvgFx3 = document.querySelector('.letters--effect-3'),\n\t\t\t\tsvgFx4 = document.querySelector('.letters--effect-4'),\n\t\t\t\tphrase1 = new Phrase(svgFx1, {\n\t\t\t\t\tpathOpacityAnim : true\n\t\t\t\t}),\n\t\t\t\tphrase2 = new Phrase(svgFx2, {\n\t\t\t\t\tpathOpacityAnim: true,\n\t\t\t\t\toutAnimation: {\n\t\t\t\t\t\tscale: 0,\n\t\t\t\t\t\topacity: [1, 0],\n\t\t\t\t\t\tduration: 250,\n\t\t\t\t\t\teasing: 'easeInOutQuad'\n\t\t\t\t\t},\n\t\t\t\t\tinAnimation: {\n\t\t\t\t\t\tdelay: 150,\n\t\t\t\t\t\tproperties: {\n\t\t\t\t\t\t\tscale: {\n\t\t\t\t\t\t\t\tvalue: function() {\n\t\t\t\t\t\t\t\t\treturn [0, 1];\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\tduration: 900,\n\t\t\t\t\t\t\t\telasticity: 600,\n\t\t\t\t\t\t\t\teasing: 'easeOutElastic'\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\topacity: {\n\t\t\t\t\t\t\t\tvalue: [0, 1],\n\t\t\t\t\t\t\t\tduration: 50,\n\t\t\t\t\t\t\t\teasing: 'linear'\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t}\n\t\t\t\t\t},\n\t\t\t\t\tpathAnimation: {\n\t\t\t\t\t\tduration: 700,\n\t\t\t\t\t\teasing: 'easeOutSine',\n\t\t\t\t\t\tdelay: 200\n\t\t\t\t\t}\n\t\t\t\t}),\n\t\t\t\tphrase3 = new Phrase(svgFx3, {\n\t\t\t\t\toutAnimation: {\n\t\t\t\t\t\ttranslateX: -25,\n\t\t\t\t\t\trotateZ: 20,\n\t\t\t\t\t\topacity: [1, 0],\n\t\t\t\t\t\tduration: 250,\n\t\t\t\t\t\teasing: 'easeInBack'\n\t\t\t\t\t},\n\t\t\t\t\tinAnimation: {\n\t\t\t\t\t\tdelay: 100,\n\t\t\t\t\t\tproperties: {\n\t\t\t\t\t\t\ttranslateY: {\n\t\t\t\t\t\t\t\tvalue: function() {\n\t\t\t\t\t\t\t\t\treturn [-80, 0];\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\tduration: 1200,\n\t\t\t\t\t\t\t\telasticity: 500,\n\t\t\t\t\t\t\t\teasing: 'easeOutElastic'\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\ttranslateX: {\n\t\t\t\t\t\t\t\tvalue: function() {\n\t\t\t\t\t\t\t\t\treturn [50, 0];\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\tduration: 1200,\n\t\t\t\t\t\t\t\telasticity: 500,\n\t\t\t\t\t\t\t\teasing: 'easeOutElastic'\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\trotateZ: {\n\t\t\t\t\t\t\t\tvalue: [-70, 0],\n\t\t\t\t\t\t\t\tduration: 1200,\n\t\t\t\t\t\t\t\telasticity: 500,\n\t\t\t\t\t\t\t\teasing: 'easeOutElastic'\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\topacity: {\n\t\t\t\t\t\t\t\tvalue: [0, 1],\n\t\t\t\t\t\t\t\tduration: 750,\n\t\t\t\t\t\t\t\teasing: 'linear'\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t}\n\t\t\t\t\t},\n\t\t\t\t\tpathAnimation: {\n\t\t\t\t\t\tduration: 1400,\n\t\t\t\t\t\teasing: 'easeOutQuint',\n\t\t\t\t\t\tdelay: 300\n\t\t\t\t\t}\n\t\t\t\t}),\n\t\t\t\tphrase4 = new Phrase(svgFx4, {\n\t\t\t\t\toutAnimation: {\n\t\t\t\t\t\ttranslateY: [0, 15],\n\t\t\t\t\t\topacity: [1, 0],\n\t\t\t\t\t\tduration: 350,\n\t\t\t\t\t\teasing: 'easeInBack'\n\t\t\t\t\t},\n\t\t\t\t\tinAnimation: {\n\t\t\t\t\t\tdelay: 130,\n\t\t\t\t\t\tproperties: {\n\t\t\t\t\t\t\trotateZ: {\n\t\t\t\t\t\t\t\tvalue: function() {\n\t\t\t\t\t\t\t\t\treturn [70, 0];\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\tduration: 1200,\n\t\t\t\t\t\t\t\t//elasticity: 500,\n\t\t\t\t\t\t\t\teasing: 'easeOutElastic'\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\topacity: {\n\t\t\t\t\t\t\t\tvalue: [0, 1],\n\t\t\t\t\t\t\t\tduration: 400,\n\t\t\t\t\t\t\t\teasing: 'linear'\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t}\n\t\t\t\t\t},\n\t\t\t\t\tpathAnimation: {\n\t\t\t\t\t\tduration: 1000,\n\t\t\t\t\t\teasing: 'easeOutCubic',\n\t\t\t\t\t\tdelay: 400\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t\n\t\t\t// Trigger the animations.\n\t\t\tsvgFx1.nextElementSibling.querySelector('button').addEventListener('click', function() { phrase1.animate(); });\n\t\t\tsvgFx2.nextElementSibling.querySelector('button').addEventListener('click', function() { phrase2.animate(); });\n\t\t\tsvgFx3.nextElementSibling.querySelector('button').addEventListener('click', function() { phrase3.animate(); });\n\t\t\tsvgFx4.nextElementSibling.querySelector('button').addEventListener('click', function() { phrase4.animate(); });\n\t\t})();\n\t\t</script>\n\t</body>\n</html>\n"
  },
  {
    "path": "js/main.js",
    "content": "/**\n * main.js\n * http://www.codrops.com\n *\n * Licensed under the MIT license.\n * http://www.opensource.org/licenses/mit-license.php\n * \n * Copyright 2016, Codrops\n * http://www.codrops.com\n */\n;(function(window) {\n\n\t'use strict';\n\n\t// Helper vars and functions.\n\tfunction extend( a, b ) {\n\t\tfor( var key in b ) { \n\t\t\tif( b.hasOwnProperty( key ) ) {\n\t\t\t\ta[key] = b[key];\n\t\t\t}\n\t\t}\n\t\treturn a;\n\t}\n\t// Concatenate JS objs.\n\t// From http://stackoverflow.com/a/2454315.\n\tfunction collect() {\n\t\tvar ret = {};\n\t\tvar len = arguments.length;\n\t\tfor (var i=0; i<len; i++) {\n\t\t\tfor (var p in arguments[i]) {\n\t\t\t\tif (arguments[i].hasOwnProperty(p)) {\n\t\t\t\t\tret[p] = arguments[i][p];\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\treturn ret;\n\t}\n\n\t/**\n\t * LetterPart obj. A letter can be split in several parts. Each part will contain one or more layers/paths.\n\t */\n\tfunction LetterPart(el, options) {\n\t\tthis.el = el;\n\t\tthis.options = extend({}, this.options);\n\t\textend(this.options, options);\n\t\t// The layers/paths.\n\t\tthis.layers = [].slice.call(this.el.querySelectorAll('path'));\n\t\t// Total number of layers.\n\t\tthis.layersTotal = this.layers.length;\n\t\tvar self = this;\n\t\tthis.layers.forEach(function(layer, pos) {\n\t\t\tif( self.options.pathOpacityAnim ) {\n\t\t\t\t// 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.\n\t\t\t\tlayer.style.opacity = pos === self.layersTotal - 1 ? 1 : 0;\n\t\t\t}\n\t\t\t// Set the stroke dasharray to the path´s total length and stroke dashoffset to 0 so the paths are initially rendered.\n\t\t\tlayer.style.strokeDashoffset = 0;\n\t\t\tlayer.style.strokeDasharray = layer.getTotalLength();\n\t\t});\n\t}\n\n\t/**\n\t * Show all the layers by setting the opacity to 1.\n\t */\n\tLetterPart.prototype.showLayers = function() {\n\t\tthis.layers.forEach(function(layer, pos) {\n\t\t\tlayer.style.opacity = 1;\n\t\t});\n\t};\n\n\t/**\n\t * Letter obj. The letter element is a SVG group containing one or more parts (LetterParts).\n\t */\n\tfunction Letter(el, options) {\n\t\tthis.el = el;\n\t\tthis.options = extend({}, this.options);\n\t\textend(this.options, options);\n\t\t// Set transform origin (center center).\n\t\tvar bcr = this.el.getBBox();\n\t\tthis.el.style.transformOrigin = (bcr.x + bcr.width/2) + 'px ' + (bcr.y + bcr.height/2) + 'px';\n\t\tthis.parts = [];\n\t\tvar self = this;\n\t\t[].slice.call(this.el.querySelectorAll('g.letter__part')).forEach(function(el) {\n\t\t\tself.parts.push(new LetterPart(el, { pathOpacityAnim : self.options.pathOpacityAnim }));\n\t\t});\n\t}\n\n\t/**\n\t * Phrase obj. The Phrase element is the SVG element itself containing all the SVG groups that represent each letter.\n\t */\n\tfunction Phrase(el, options) {\n\t\tthis.el = el;\n\t\tthis.options = extend({}, this.options);\n\t\textend(this.options, options);\n\t\tthis.letterElems = [].slice.call(this.el.querySelectorAll('g.letter'));\n\t\tthis.letters = [];\n\t\tvar self = this;\n\t\tthis.letterElems.forEach(function(el) {\n\t\t\tself.letters.push(new Letter(el, { pathOpacityAnim : self.options.pathOpacityAnim }));\n\t\t});\n\t}\n\n\tPhrase.prototype.options = {\n\t\t// If true, all the layers/paths of each letter part (except the last one) will animate the opacity to 0.\n\t\t// With this, we avoid any overlapping path behind the last one to be shown.\n\t\tpathOpacityAnim: false,\n\t\t// 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.\n\t\toutAnimation: {\n\t\t\ttranslateY: [0, 15],\n\t\t\topacity: [1, 0],\n\t\t\tduration: 250,\n\t\t\teasing: 'easeInOutQuad'\n\t\t},\n\t\t// The animation settings for the ´in´ animation (when the letters appear again).\n\t\tinAnimation: {\n\t\t\tproperties: {\n\t\t\t\ttranslateY: {\n\t\t\t\t\tvalue: [-30, 0],\n\t\t\t\t\tduration: 900,\n\t\t\t\t\telasticity: 600,\n\t\t\t\t\teasing: 'easeOutElastic'\n\t\t\t\t},\n\t\t\t\topacity: {\n\t\t\t\t\tvalue: [0, 1],\n\t\t\t\t\tduration: 500,\n\t\t\t\t\teasing: 'linear'\n\t\t\t\t},\n\t\t\t},\n\t\t\tdelay: 40 // delay increment per letter.\n\t\t},\n\t\t// Stroke animation settings\n\t\tpathAnimation: {\n\t\t\tduration: 800,\n\t\t\teasing: 'easeOutQuint',\n\t\t\tdelay: 200 // delay increment per path.\n\t\t}\n\t};\n\n\tPhrase.prototype.animate = function() {\n\t\tvar self = this,\n\t\t\tanimOutProps = {\n\t\t\t\ttargets: this.letterElems,\n\t\t\t\tcomplete: function() {\n\t\t\t\t\tvar animLettersProps = {\n\t\t\t\t\t\ttargets: self.letterElems,\n\t\t\t\t\t\tdelay: function(el, index) {\n\t\t\t\t\t\t\treturn index * self.options.inAnimation.delay;\n\t\t\t\t\t\t}\n\t\t\t\t\t};\n\n\t\t\t\t\tanime(collect(animLettersProps, self.options.inAnimation.properties));\n\n\t\t\t\t\tfor(var i = 0, len = self.letters.length; i < len; ++i) {\n\t\t\t\t\t\tvar parts = self.letters[i].parts,\n\t\t\t\t\t\t\tpartsTotal = parts.length;\n\n\t\t\t\t\t\tfor(var j = 0, len2 = parts.length; j < len2; ++j) {\n\t\t\t\t\t\t\tparts[j].showLayers();\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\tvar animProps = {\n\t\t\t\t\t\t\t\ttargets: parts[j].layers,\n\t\t\t\t\t\t\t\tstrokeDashoffset: function(el) {\n\t\t\t\t\t\t\t\t\treturn [el.getTotalLength(), 0];\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\teasing: self.options.pathAnimation.easing,\n\t\t\t\t\t\t\t\tduration: self.options.pathAnimation.duration,\n\t\t\t\t\t\t\t\tdelay: function(el, index) {\n\t\t\t\t\t\t\t\t\treturn index * self.options.pathAnimation.delay + i * self.options.inAnimation.delay;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t};\n\n\t\t\t\t\t\t\tif( self.options.pathOpacityAnim ) {\n\t\t\t\t\t\t\t\tanimProps.opacity = {\n\t\t\t\t\t\t\t\t\tvalue: function(el, index) {\n\t\t\t\t\t\t\t\t\t\treturn index !== parts[j].layers.length - 1 ? 0 : 1;\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\tduration: 200,\n\t\t\t\t\t\t\t\t\tdelay: function(el, index) {\n\t\t\t\t\t\t\t\t\t\treturn index * self.options.pathAnimation.delay + i * self.options.inAnimation.delay + self.options.pathAnimation.duration - 0.1*self.options.pathAnimation.duration;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\tanime(animProps);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t};\n\n\t\tanime(collect(animOutProps, this.options.outAnimation));\n\t};\n\n\twindow.Phrase = Phrase;\n\n})(window);"
  }
]