cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

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

Auto-Updating Preview

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

            
              #main
#userInput





















































































//---------------------------------------
// END OF CUSTOM JADE -------------------
//---------------------------------------







//---------------------------------------
// TEMPLATE JADE ------------------------
//---------------------------------------

// Info panel
.panelBackdrop

svg#panelIconSVG(xmlns='http://www.w3.org/2000/svg', viewbox='0 0 100 100')
	defs
		mask#iconMask(x="0", y="0", width="100", height="100", maskUnits="userSpaceOnUse")
			circle(fill="#fff", cx="50", cy="50", r="50")
			path#panelIconLine1(stroke='#000', stroke-width='13', d='M50 75V25', stroke-linecap='round')
			path#panelIconLine2(stroke='#000', stroke-width='13', d='M50 75V25', stroke-linecap='round')
	g
		circle(fill="rgba(255, 255, 255, 0.01)", cx="50", cy="50", r="50")
		circle#panelIcon(mask="url(#iconMask)", cx="50", cy="50", r="50" stroke-width="4")

section.panel
	svg#panelBgSVG(xmlns='http://www.w3.org/2000/svg')
		defs
			linearGradient#blueGrad(x1="0%" x2="0%" y1="0%" y2="100%")
				stop#stop1(offset="0%")
				stop#stop2(offset="100%")
		rect#panelRect(fill="url(#blueGrad)", x="0", y="0", rx="10", width="100%", height="100%", stroke-width="1")

	.contentWrapper.row
		article.panelBox.leftBox.columns.small-12
			.info.card.small-12.columns
				h1 About this pen
				p.text Yay, a penny for reading my thoughts!
				p.text Kinetic type has always fascinated me, but the video format hasn't. It's so limiting. Once a video is rendered – you're done. You can't do much else with it. With code tho... the journey has just begun. You can change it, make it interactive and reuse it in a million different ways. You're only limited by your creativity and your coding skills.
				p.text Kinetic type is the mix of text and motion. If done right, the reading experience can really come to life with story and emotion. The message is no longer only in the text, but in the imagination of the user.
				p.text This script weighs in on only 3 Kb... that seriously makes me happy. 3 Kb is negligible. It's virtually nothing. You could have a hundred scripts like these and probably not notice any difference in loading time. That's powerful!
				p.text So let's animate more in the browsers, shall we?
				p.text This was so much fun to build! Please hit the heart button if you wanna show your support.		
				p.text If you got any thoughts or questions – please let me know. I love to share the stuff I know!
		aside.panelBox.rightBox.columns.small-12
			.company.card.columns.small-12
				.crab.rock
					svg#rockLogo(xmlns='http://www.w3.org/2000/svg', width='620', height='260', viewbox='0 0 620 260', xmlns:xlink='http://www.w3.org/1999/xlink')
						defs
							radialgradient#radialGradient-1(cy='-6.145%', r='175.844%', fx='50%', fy='-6.145%')
								stop(stop-color='#7F7D61', stop-opacity='0', offset='0%')
								stop(stop-color='#231E34', offset='100%')
							lineargradient#linearGradient-2(x1='50%', x2='50%', y1='0%', y2='100%')
								stop(stop-color='#6B7585', offset='0%')
								stop(stop-color='#93AAA9', offset='100%')
							lineargradient#linearGradient-3(x1='39.169%', x2='50%', y1='3.73%', y2='100%')
								stop(stop-color='#A0B8B4', offset='0%')
								stop(stop-color='#515E4B', offset='100%')
							lineargradient#linearGradient-4(x1='50%', x2='50%', y1='0%', y2='100%')
								stop(stop-color='#9BAAB2', offset='0%')
								stop(stop-color='#4B5A58', offset='100%')
							lineargradient#linearGradient-5(x1='50%', x2='50%', y1='36.179%', y2='100%')
								stop(stop-color='#738093', offset='0%')
								stop(stop-color='#637877', offset='100%')
							lineargradient#linearGradient-6(x1='39.169%', x2='50%', y1='3.73%', y2='100%')
								stop(stop-color='#7FA59F', offset='0%')
								stop(stop-color='#4A5856', offset='100%')
							lineargradient#linearGradient-7(x1='50%', x2='50%', y1='0%', y2='100%')
								stop(stop-color='#93908B', offset='0%')
								stop(stop-color='#787672', offset='100%')
							lineargradient#linearGradient-8(x1='61.387%', x2='18.491%', y1='0%', y2='100%')
								stop(stop-color='#827E79', offset='0%')
								stop(stop-color='#575552', offset='100%')
							lineargradient#linearGradient-9(x1='13.531%', x2='131.506%', y1='31.328%', y2='96.198%')
								stop(stop-color='#DAD5CB', offset='0%')
								stop(stop-color='#9F9C95', offset='100%')
							lineargradient#linearGradient-10(x1='22.714%', y1='5.232%', y2='79.11%')
								stop(stop-color='#CAC5BA', offset='0%')
								stop(stop-color='#A6A29A', offset='100%')
							lineargradient#linearGradient-11(x1='50%', x2='122.625%', y1='17.889%', y2='111.744%')
								stop(stop-color='#97938C', offset='0%')
								stop(stop-color='#615F5C', offset='100%')
							lineargradient#linearGradient-12(x1='42.66%', x2='58.635%', y1='17.128%', y2='100%')
								stop(stop-color='#9E9B93', offset='0%')
								stop(stop-color='#6B6966', offset='100%')
							lineargradient#linearGradient-13(x1='42.462%', x2='58.635%', y1='-5.814%', y2='100%')
								stop(stop-color='#918E87', offset='0%')
								stop(stop-color='#6B6966', offset='100%')
							lineargradient#linearGradient-14(x1='42.168%', x2='50%', y1='5.434%', y2='87.884%')
								stop(stop-color='#BEBAB1', offset='0%')
								stop(stop-color='#98958D', offset='100%')
							lineargradient#linearGradient-15(x1='40.832%', x2='107.975%', y1='41.233%', y2='50%')
								stop(stop-color='#BAB6AD', offset='0%')
								stop(stop-color='#9E9B95', offset='100%')
							lineargradient#linearGradient-16(x1='46.198%', x2='46.198%', y1='0%', y2='100%')
								stop(stop-color='#9E9B93', offset='0%')
								stop(stop-color='#6B6966', offset='100%')
							lineargradient#linearGradient-17(x1='24.884%', x2='50%', y1='10.732%', y2='86.094%')
								stop(stop-color='#9E9C96', offset='0%')
								stop(stop-color='#A3A19B', offset='100%')
							lineargradient#linearGradient-18(x1='100%', x2='50%', y1='100%', y2='0%')
								stop(stop-color='#878580', offset='0%')
								stop(stop-color='#AEABA5', offset='100%')
							lineargradient#linearGradient-19(x1='87.019%', x2='15.084%', y1='100%', y2='50%')
								stop(stop-color='#E0DED8', offset='0%')
								stop(stop-color='#B9B6B0', offset='100%')
							lineargradient#linearGradient-20(x1='14.158%', x2='106.425%', y1='0%', y2='100%')
								stop(stop-color='#C2BDB4', offset='0%')
								stop(stop-color='#C5BFB5', offset='100%')
							lineargradient#linearGradient-21(x1='50%', x2='50%', y1='9.761%', y2='127.003%')
								stop(stop-color='#D7D3CA', offset='0%')
								stop(stop-color='#938F88', offset='100%')
							lineargradient#linearGradient-22(x1='-4.359%', x2='108.86%', y1='70.252%', y2='50%')
								stop(stop-color='#EBE8E4', offset='0%')
								stop(stop-color='#D1CDC4', offset='100%')
							lineargradient#linearGradient-23(x1='46.825%', x2='50%', y1='73.32%', y2='100%')
								stop(stop-color='#0C0117', stop-opacity='0', offset='0%')
								stop(stop-color='#0A0524', offset='100%')
							ellipse#path-24(cx='27.628', cy='27.782', rx='27.628', ry='27.782')
							ellipse#path-26(cx='27.628', cy='27.782', rx='27.628', ry='27.782')
						g#Page-1(fill='none', fill-rule='evenodd')
							g#logo-rock
								g#rockLogo
									path#rockBg(fill='#FFFFFF', d='M0 0h620v260H0z')
									path#rockBg-Copy-2(fill='#676A93', d='M0 0h620v190H0z')
									path#rockBg-Copy(fill='url(#radialGradient-1)', d='M0 190h620v70H0z')
									g#detailsBg
										path#shadow(fill='#000000', d='M226 210l6.516 3.62L271 226l80 2 96-7 11-9-25-7-59-2z', opacity='.248')
										path#Path-4(fill='#384C2F', d='M241.164 207.156l-14.824 2.47-8.95 4.043-15.086-2.433 6.015-4.83 10.016-2.147 11.083-.25z')
										path#Path-4-Copy(fill='#648156', d='M241.164 207.156l-19.56-.41-5.28 5.027-15.488-.93 5.612-3.327-4.002-2.682 6.678-1.432 9.212.858 11.083-.25z')
										path#Path-27(fill='url(#linearGradient-2)', d='M326.485 0L309 36l6-1-13 36 26 1-28 101 147 6-34-43 14-1-47-78 18 6-29-55 6 1-4.343-9z')
										path#Path-27-Copy(fill='url(#linearGradient-3)', d='M414.27 15L392.9 62.447l10.138-5.95-21.585 35.936 17.916 1.007L376 127.693l20.253 1.007L376 194l69-3 11.09-42.072 12.944 5.15-32.275-40.49 14.02 6.045-28.043-57.424 10.127 3.022z')
										path#Path-27-Copy-2(fill='url(#linearGradient-4)', d='M217.27 8l-27.345 38.428 9.143-.94-14.615 46.952 17.916 1.007-23.37 34.25 20.253 1.008L179 194h101l-20.91-45.07 12.944 5.152-32.275-40.488 14.02 6.045-23.064-69.443 10.126 3.022z', transform='matrix(-1 0 0 1 459 0)')
										path#Path-27(fill='url(#linearGradient-5)', d='M150 0l-10 24 10 1-24 47 11-3-15 49 9-3-19 79h145l-34-43 14-1-47-78 18 6-29-55 6 1-4.343-24z')
										path#Path-27-Copy(fill='url(#linearGradient-6)', d='M203 15.33l-21.463 47.36 10.183-5.938-21.68 35.868 17.994 1.006-23.47 34.19 20.34 1.005-20.34 65.18H266l-21-44.99 13 5.143-32.415-40.416 14.082 6.034-28.164-57.317 10.17 3.017z')
										path#Path-27-Copy-2(fill='url(#linearGradient-6)', d='M452 11l-20 45.14L442 52l-25 64.407L429 112l-24 44.822h12l-20 39.847h118l-21-44.99 13 5.142-32.415-40.415 14.082 6.033-23.164-69.318 10.17 3.017z', transform='matrix(-1 0 0 1 912 0)')
										path#moonlightFilter(fill='#070218', d='M0 0h620v260H0z', opacity='.355')
									g#rock
										path#Path-8(fill='url(#linearGradient-7)', d='M199 57l.5 13.19L204 101l12 8z', transform='translate(201 50)')
										path#Path-9(fill='url(#linearGradient-8)', d='M204 101l-13.687 49.25L190 160l26-51z', transform='translate(201 50)')
										path#Path-10(fill='url(#linearGradient-9)', d='M21 26l.223 3.625-16.295 76.282L3 110 0 58z', transform='translate(201 50)')
										path#Path-11(fill='url(#linearGradient-10)', d='M21 26h1l29 58-34 36-14-10z', transform='translate(201 50)')
										path#Path-14(fill='url(#linearGradient-11)', d='M3 110l14 9 10 38-2 3z', transform='translate(201 50)')
										path#Path-13(fill='url(#linearGradient-12)', d='M51 84l22 78-48-2-8-41z', transform='translate(201 50)')
										path#Path-15(fill='url(#linearGradient-13)', d='M51 84l71 24 9 50-59 4z', transform='translate(201 50)')
										path#Path-16(fill='url(#linearGradient-14)', d='M80 18l42 90-71-24z', transform='translate(201 50)')
										path#Path-17(fill='url(#linearGradient-15)', d='M80 19l42 89 20-57-62-33z', transform='translate(201 50)')
										path#Path-18(fill='url(#linearGradient-16)', d='M122 108l82-7-14 59-60-2z', transform='translate(201 50)')
										path#Path-19(fill='url(#linearGradient-17)', d='M142 51l62 50-82 7z', transform='translate(201 50)')
										path#Path-20(fill='url(#linearGradient-18)', d='M184.907 54.517L199 57l5 44-62-50z', transform='translate(201 50)')
										path#Path-21(fill='url(#linearGradient-19)', d='M199 57l-41-23-16 17z', transform='translate(201 50)')
										path#Path-22(fill='url(#linearGradient-20)', d='M158 34L80 18l-.283.382L142 51z', transform='translate(201 50)')
										path#Path-23(fill='#C3BFB8', d='M359 84l-61-33-18 17z')
										path#Path-12(fill='url(#linearGradient-21)', d='M81 17L51 84 21 26z', transform='translate(201 50)')
										path#Path-7(fill='url(#linearGradient-22)', d='M47.272 11.042L21 26l59-8L97 1z', transform='translate(201 50)')
										g#moss
											g#patch1
												path#Path-2(fill='#384C2F', d='M225 75l9-1 17-9 8 1 10-2 10-4h3l5-1 6 10 9-8 24 6-29-17h-23l-20 4-9 2-1 5-15 7 3 1z')
												path#Path-2-Copy-2(fill='#638155', d='M225 75l9-2 17-10 7 2 12-2 10-5 2 1 4-2 8 10 8-8 24 8-29-17h-23l-20 4-9 2-1 5-15 7 3 1z')
												path#Path-2-Copy(fill='#7FA36E', d='M225 75l11-6 2-3 7-3.5 2-5.5 24-5 29 2-3-4h-23l-20 4-9 2-1 5-15 7 3 1z')
											path#Path-24(fill='#384C2F', d='M371 87l16 15-17-6v5h-6l-2-5-12 3-9-25z')
											path#Path-24-Copy(fill='#648156', d='M371 87l9.5 5.2-3.557.347L386 101l-16-6v5h-5l-2-5-12 3-10-24z')
											path#Path-24-Copy-2(fill='#7FA36E', d='M371 87l-4 1-26-14z')
										path#rock-shape-copy(fill='url(#linearGradient-23)', d='M21 26L97 1l102 56 17 52-26 51-59.688-2L72 162l-47-2-22-50-3-52z', opacity='.5', transform='translate(201 50)')
									g#eyes
										g#eyeL
											g#eyeL_ball
												g#maskedContent(transform='translate(236.04 71.686)')
													mask#mask-25(fill='white')
														use(xlink:href='#path-24')
													use#eyeL_mask(fill='#EBE6E2', xlink:href='#path-24')
													g#eyeL_center(mask='url(#mask-25)')
														g
															path#eyeWhite(fill='#FFFFFF', fill-opacity='.27', d='M29.705 49.388c15.232 0 24.784-9.58 24.784-21.01 0-11.432-9.553-19.298-24.785-19.298s-27.58 8.374-27.58 17.39c0 9.018 12.348 22.918 27.58 22.918z')
															g#eyeL_iris.logo-eyeL_iris(transform='translate(17.218 16.46)')
																ellipse#irisLayer1(cx='11.212', cy='11.292', fill='#2A566A', rx='11.164', ry='11.244')
																path#irisLayer2(fill='#366276', d='M11.26 20.672l-.79 1.024-.626-1.133-.935.89-.447-1.216-1.06.736-.256-1.27-1.158.564-.062-1.294-1.23.38.135-1.29-1.273.187.33-1.253-1.287-.012.515-1.187-1.27-.21.69-1.094-1.223-.402.847-.976-1.148-.585.985-.833-1.046-.755 1.1-.673-.92-.908 1.19-.496-.77-1.037 1.25-.308-.605-1.144 1.28-.112-.423-1.223 1.284.087-.232-1.274 1.255.283-.037-1.296 1.198.473.16-1.286 1.11.653.353-1.246 1 .815.538-1.177.865.96.71-1.082.708 1.08.865-.958.537 1.177 1-.815.353 1.246 1.112-.652.16 1.287 1.197-.473-.037 1.295 1.255-.284-.233 1.274 1.284-.087-.423 1.223 1.282.112-.605 1.144 1.25.307-.77 1.036 1.188.496-.92.907 1.1.672-1.044.755.984.834-1.148.586.847.976-1.223.402.69 1.094-1.27.21.515 1.187-1.286.012.328 1.253-1.273-.186.135 1.29-1.23-.38-.06 1.293-1.16-.564-.256 1.27-1.06-.736-.445 1.216-.937-.89-.625 1.133z')
																path#irisLayer3(fill='#3D6E85', d='M10.457 17.697L8.88 20.283l-.095-3.03-2.21 2.062.72-2.944-2.68 1.387 1.482-2.64-2.95.607 2.133-2.142-3.003-.216 2.628-1.484-2.832-1.024L5 10.142 2.548 8.387l3.01.105-1.89-2.357 2.867.92L5.35 4.27 7.86 5.934 7.466 2.93 9.44 5.215l.424-3.003 1.286 2.74 1.213-2.778.504 2.988 1.91-2.346-.314 3.015 2.468-1.74-1.11 2.82 2.84-1.008-1.824 2.414 3.005-.197-2.402 1.83 2.944.626-2.803 1.11 2.666 1.403-2.996.307 2.19 2.076-2.965-.517 1.552 2.595-2.715-1.303.798 2.922-2.264-1.995-.014 3.03-1.646-2.535-.825 2.917z')
																path#irisLayer4(fill='#41768F', d='M10.113 16.625l-.987 1.688.116-1.953-1.255 1.497.44-1.906-1.486 1.264.755-1.805-1.677.992 1.047-1.65-1.82.692 1.31-1.45-1.91.373 1.533-1.207-1.943.044 1.712-.93-1.92-.287 1.84-.625-1.843-.61 1.92-.304-1.714-.915 1.943.027-1.536-1.194 1.91.358-1.313-1.44 1.82.678-1.05-1.642 1.68.978-.76-1.798 1.492 1.25-.447-1.902 1.258 1.486-.12-1.952.99 1.68.21-1.945L11 5.94l.533-1.88.378 1.916.84-1.765.05 1.956 1.126-1.6-.28 1.938 1.377-1.385-.6 1.86 1.588-1.13-.904 1.733 1.755-.845-1.18 1.556 1.87-.536-1.425 1.334 1.932-.21-1.628 1.073 1.938.122-1.784.78 1.89.45-1.89.467 1.787.765-1.937.137 1.63 1.06-1.932-.194 1.43 1.32-1.872-.518 1.186 1.546-1.757-.83.908 1.726-1.59-1.117.604 1.855-1.38-1.373.284 1.934-1.13-1.588-.043 1.955-.845-1.758-.372 1.92-.537-1.878-.69 1.83z')
																path#irisLayer5(fill='#4B87A3', d='M10.84 13.202l-2.73 5.19 2.012-5.51-4.59 3.628 4.065-4.216-5.653 1.44 5.41-2.193-5.74-.995 5.824.21-4.834-3.262 5.228 2.575L6.74 5.106l3.73 4.496-.817-5.805 1.586 5.64 1.6-5.645-.832 5.808 3.742-4.507-3.107 4.97 5.236-2.59-4.845 3.276 5.824-.228-5.744 1.014 5.405 2.177-5.648-1.424 4.052 4.203-4.58-3.615 2 5.504-2.718-5.18-.4 5.852z')
																path#irisLayer6(fill='#63A6D9', fill-opacity='.168', d='M11.4 21.426c4.47 0 8.09-3.074 8.09-6.25 0-3.174-3.62.75-8.09.75-4.467 0-8.09-3.924-8.09-.75 0 3.176 3.623 6.25 8.09 6.25z')
																g#eyeL_pupil.logo-eyeL_pupil(transform='translate(5.1 5.13)')
																	path#pupilOuter(fill='#382828', fill-opacity='.688', d='M5.372 9.803l-.6 1.076.073-1.232-.753.975.254-1.207-.888.852.43-1.156-1.004.71.596-1.08-1.097.552.748-.978-1.165.38.885-.855-1.21.203 1.003-.713-1.225.018 1.095-.556L1.3 6.626l1.165-.385-1.175-.345 1.208-.206-1.11-.52 1.225-.022-1.02-.68 1.214.162-.907-.826 1.175.342-.774-.953 1.112.515-.624-1.06 1.022.677-.46-1.14.91.82-.286-1.197.778.95-.106-1.228.63 1.056.076-1.23.465 1.138.26-1.205.29 1.195.434-1.153.112 1.227.6-1.077-.073 1.23.75-.975-.253 1.207.888-.85-.43 1.154L9.4 2.54l-.596 1.08L9.9 3.067l-.748.978 1.166-.38-.885.854 1.21-.2-1.002.712 1.226-.018-1.095.555 1.214.165-1.165.385 1.173.346-1.208.206 1.11.52-1.225.022 1.02.68-1.214-.162.908.825-1.176-.342.775.953-1.112-.514.626 1.058-1.023-.675.46 1.14-.91-.82.287 1.196-.78-.95.107 1.23-.63-1.057-.076 1.23-.464-1.14-.26 1.207-.29-1.197-.434 1.154z')
																	ellipse#pupilInner(cx='6.111', cy='6.163', fill='#372727', rx='3.453', ry='3.478')
																path#irisLayer7(fill='#000000', fill-opacity='.182', d='M11.26 9.53c10.974 0 10.974 7.914 10.974 1.81C22.234 5.234 17.32.285 11.26.285 5.197.286.283 5.236.283 11.34c0 6.104 0-1.81 10.975-1.81z')
													g#lids(mask='url(#mask-25)')
														g
															g#eyeL_lidBtm.logoLidBtm
																path#lid(fill='#A09E98', d='M63.332 74.46h-75.257l-.36-39.754c.54-.056 26.49-4.39 26.49-4.39l24.445-.025 24.682 3.702V74.46z')
															g#eyeL_lidTop.logoLidTop
																path#lid(fill='#ADAAA1', d='M-11.925 35.176l25.21-4.325 26.068.197 28.23 4.13v-50.018h-79.508z')
												path#shadowUpr(fill='#000000', fill-opacity='.1', d='M290.552 93.033c-4.272-1.392-13.03-10.514-28.227-10.514-11.022 0-19.22 4.8-24.81 7.966 3.714-10.936 14.02-18.8 26.153-18.8 13.056 0 23.997 9.106 26.884 21.347z')
												path#shadowLwr(fill='#000000', fill-opacity='.1', d='M288.775 111.08c-4.373 9.544-13.97 16.17-25.107 16.17-11.333 0-21.072-6.862-25.333-16.68 5.284 2.437 13.694 2.876 26.072 3.872 11.064.89 18.906-1.32 24.368-3.362z')
											g#eyeL_brow.logo-eyeL_brow
												g#Group
													path#layer1(fill='#384C2F', d='M263.09 81l22.362 3.106 4.797-2.616-1.178-2.934-11.27-9.427-16.976-2.2-22.37 6.832 1.872 2.334-9.762 17.847 3.947-.633.77 5.04L250.09 84z')
													path#layer2(fill='#4C683D', d='M261.09 80l24.362 2.106 4.797-.616 1.167-2.267-3.345-3.667 1.22-2.5-11.49-3.927-16.976-2.2-22.37 6.832 1.872 2.334-9.762 17.847 2.947.367 1.77 4.04L249.09 83z')
													path#layer3(fill='#648156', d='M261.09 76l18.32 1.983 9.667 1.697 1.172-2.19-3.575-3.463 2.617-.97-11.49-3.928-16.976-2.2-22.37 6.832 1.872 2.334-9.762 17.847L235.09 92l-.148 2.546 5.404-9.584 5.87-5.57z')
													path#layer4(fill='#7FA36E', d='M258.85 70.078l7.75 2.144-.85-1.682 20.24 5.33-.967-3.076 4.27.263-11.49-3.928-16.977-2.2-22.37 6.832L249.09 73z')
										g#eyeR
											g#eyeR_ball(transform='matrix(-1 0 0 1 361.457 71.686)')
												ellipse#eyeR_white(cx='27.525', cy='27.731', fill='#EBE6E2', rx='27.525', ry='27.722')
												g#maskedContent
													mask#mask-27(fill='white')
														use(xlink:href='#path-26')
													use#eyeR_mask(fill='#EBE6E2', opacity='.346', xlink:href='#path-26')
													g#eyeR_center(mask='url(#mask-27)')
														g
															path#eyeWhite(fill='#FFFFFF', fill-opacity='.27', d='M29.705 49.388c15.232 0 24.784-9.58 24.784-21.01 0-11.432-9.553-19.298-24.785-19.298s-27.58 8.374-27.58 17.39c0 9.018 12.348 22.918 27.58 22.918z')
															g#eyeR_iris.logo-eyeR_iris(transform='translate(17.218 16.46)')
																ellipse#irisLayer1(cx='11.212', cy='11.292', fill='#2A566A', rx='11.164', ry='11.244')
																path#irisLayer2(fill='#366276', d='M11.26 20.672l-.79 1.024-.626-1.133-.935.89-.447-1.216-1.06.736-.256-1.27-1.158.564-.062-1.294-1.23.38.135-1.29-1.273.187.33-1.253-1.287-.012.515-1.187-1.27-.21.69-1.094-1.223-.402.847-.976-1.148-.585.985-.833-1.046-.755 1.1-.673-.92-.908 1.19-.496-.77-1.037 1.25-.308-.605-1.144 1.28-.112-.423-1.223 1.284.087-.232-1.274 1.255.283-.037-1.296 1.198.473.16-1.286 1.11.653.353-1.246 1 .815.538-1.177.865.96.71-1.082.708 1.08.865-.958.537 1.177 1-.815.353 1.246 1.112-.652.16 1.287 1.197-.473-.037 1.295 1.255-.284-.233 1.274 1.284-.087-.423 1.223 1.282.112-.605 1.144 1.25.307-.77 1.036 1.188.496-.92.907 1.1.672-1.044.755.984.834-1.148.586.847.976-1.223.402.69 1.094-1.27.21.515 1.187-1.286.012.328 1.253-1.273-.186.135 1.29-1.23-.38-.06 1.293-1.16-.564-.256 1.27-1.06-.736-.445 1.216-.937-.89-.625 1.133z')
																path#irisLayer3(fill='#3D6E85', d='M10.457 17.697L8.88 20.283l-.095-3.03-2.21 2.062.72-2.944-2.68 1.387 1.482-2.64-2.95.607 2.133-2.142-3.003-.216 2.628-1.484-2.832-1.024L5 10.142 2.548 8.387l3.01.105-1.89-2.357 2.867.92L5.35 4.27 7.86 5.934 7.466 2.93 9.44 5.215l.424-3.003 1.286 2.74 1.213-2.778.504 2.988 1.91-2.346-.314 3.015 2.468-1.74-1.11 2.82 2.84-1.008-1.824 2.414 3.005-.197-2.402 1.83 2.944.626-2.803 1.11 2.666 1.403-2.996.307 2.19 2.076-2.965-.517 1.552 2.595-2.715-1.303.798 2.922-2.264-1.995-.014 3.03-1.646-2.535-.825 2.917z')
																path#irisLayer4(fill='#41768F', d='M10.113 16.625l-.987 1.688.116-1.953-1.255 1.497.44-1.906-1.486 1.264.755-1.805-1.677.992 1.047-1.65-1.82.692 1.31-1.45-1.91.373 1.533-1.207-1.943.044 1.712-.93-1.92-.287 1.84-.625-1.843-.61 1.92-.304-1.714-.915 1.943.027-1.536-1.194 1.91.358-1.313-1.44 1.82.678-1.05-1.642 1.68.978-.76-1.798 1.492 1.25-.447-1.902 1.258 1.486-.12-1.952.99 1.68.21-1.945L11 5.94l.533-1.88.378 1.916.84-1.765.05 1.956 1.126-1.6-.28 1.938 1.377-1.385-.6 1.86 1.588-1.13-.904 1.733 1.755-.845-1.18 1.556 1.87-.536-1.425 1.334 1.932-.21-1.628 1.073 1.938.122-1.784.78 1.89.45-1.89.467 1.787.765-1.937.137 1.63 1.06-1.932-.194 1.43 1.32-1.872-.518 1.186 1.546-1.757-.83.908 1.726-1.59-1.117.604 1.855-1.38-1.373.284 1.934-1.13-1.588-.043 1.955-.845-1.758-.372 1.92-.537-1.878-.69 1.83z')
																path#irisLayer5(fill='#4B87A3', d='M10.84 13.202l-2.73 5.19 2.012-5.51-4.59 3.628 4.065-4.216-5.653 1.44 5.41-2.193-5.74-.995 5.824.21-4.834-3.262 5.228 2.575L6.74 5.106l3.73 4.496-.817-5.805 1.586 5.64 1.6-5.645-.832 5.808 3.742-4.507-3.107 4.97 5.236-2.59-4.845 3.276 5.824-.228-5.744 1.014 5.405 2.177-5.648-1.424 4.052 4.203-4.58-3.615 2 5.504-2.718-5.18-.4 5.852z')
																path#irisLayer6(fill='#63A6D9', fill-opacity='.168', d='M11.4 21.426c4.47 0 8.09-3.074 8.09-6.25 0-3.174-3.62.75-8.09.75-4.467 0-8.09-3.924-8.09-.75 0 3.176 3.623 6.25 8.09 6.25z')
																g#eyeR_pupil.logo-eyeR_pupil(transform='translate(5.1 5.13)')
																	path#pupilOuter(fill='#382828', fill-opacity='.688', d='M5.372 9.803l-.6 1.076.073-1.232-.753.975.254-1.207-.888.852.43-1.156-1.004.71.596-1.08-1.097.552.748-.978-1.165.38.885-.855-1.21.203 1.003-.713-1.225.018 1.095-.556L1.3 6.626l1.165-.385-1.175-.345 1.208-.206-1.11-.52 1.225-.022-1.02-.68 1.214.162-.907-.826 1.175.342-.774-.953 1.112.515-.624-1.06 1.022.677-.46-1.14.91.82-.286-1.197.778.95-.106-1.228.63 1.056.076-1.23.465 1.138.26-1.205.29 1.195.434-1.153.112 1.227.6-1.077-.073 1.23.75-.975-.253 1.207.888-.85-.43 1.154L9.4 2.54l-.596 1.08L9.9 3.067l-.748.978 1.166-.38-.885.854 1.21-.2-1.002.712 1.226-.018-1.095.555 1.214.165-1.165.385 1.173.346-1.208.206 1.11.52-1.225.022 1.02.68-1.214-.162.908.825-1.176-.342.775.953-1.112-.514.626 1.058-1.023-.675.46 1.14-.91-.82.287 1.196-.78-.95.107 1.23-.63-1.057-.076 1.23-.464-1.14-.26 1.207-.29-1.197-.434 1.154z')
																	ellipse#pupilInner(cx='6.111', cy='6.163', fill='#372727', rx='3.453', ry='3.478')
																path#irisLayer7(fill='#000000', fill-opacity='.182', d='M11.26 9.53c10.974 0 10.974 7.914 10.974 1.81C22.234 5.234 17.32.285 11.26.285 5.197.286.283 5.236.283 11.34c0 6.104 0-1.81 10.975-1.81z')
													g#lids(mask='url(#mask-27)')
														g
															g#eyeR_lidBtm.logoLidBtm
																path#lid(fill='#A09E98', d='M63.332 74.46h-75.257l-.36-39.754c.567-.06 28.9-4.56 28.9-4.56l22.035.145 24.682 3.702V74.46z')
															g#eyeR_lidTop.logoLidTop
																path#lid(fill='#ADAAA1', d='M-11.925 35.176l29.278-4.13h21.104l29.126 4.13V-14.84h-79.508z')
												path#shadowLwr(fill='#000000', fill-opacity='.1', d='M52.735 39.394c-4.373 9.544-13.97 16.17-25.107 16.17-11.333 0-21.072-6.862-25.333-16.68 5.284 2.437 13.694 2.876 26.072 3.872 11.064.89 18.906-1.32 24.368-3.362z')
												path#shadowUpr(fill='#000000', fill-opacity='.1', d='M54.512 21.347C51.625 9.107 40.684 0 27.628 0 15.495 0 5.188 7.864 1.476 18.8c5.588-3.167 13.787-7.967 24.81-7.967 15.195 0 23.954 9.122 28.226 10.514z')
											g#eyeR_brow.logo-eyeR_brow
												g#Group
													path#layer1(fill='#384C2F', d='M335 82l-23.362 1.106-4.797-1.616 1.178-2.934-2.916-1.66 2.696-3.84 11.49-3.927 16.976-2.2 22.37 6.832-1.872 2.334 9.762 17.847-1.947-.633-2.77 6.04L347 84z')
													path#layer2(fill='#4C683D', d='M335 81l-23.362 1.106-4.797-.616 1.178-2.934-2.916-1.66 2.696-3.84 11.49-3.927 16.976-2.2 22.37 6.832-1.872 2.334 9.762 17.847-2.947-1.633-1.77 6.04L348 83z')
													path#layer3(fill='#648156', d='M336 76l-18.32 4.983-10.84.507 2.178-3.934-3.916-.66 2.696-3.84 11.49-3.927 16.976-2.2 22.37 6.832-1.872 2.334 9.762 17.847L361 89l-1.853 2.546-2.403-6.584-5.87-5.57z')
													path#layer4(fill='#7FA36E', d='M335.24 70.078l-9.75.144 1.85 2.318-4.24-.67-13.033 1.924-4.965 3.103 2.696-3.84 11.49-3.928 16.976-2.2 22.37 6.832L352 73z')
									a(xmlns:xlink='http://www.w3.org/1999/xlink', xlink:href='http://www.nerdmanship.com' target='_blank')
										title This road leads to our site
										g#logoSign
											g#wood
												path#Path-3(fill='#635242', d='M183 124l3.44-2 25.943.517L218 124l33-3h76v2l7-2v2l3.676-2.263L350 123l66-2 11 3 3 17v27l-4 6-19-2-74 6-26.456-.118-12.857-1.832L262 175l-12-1 2 2-46 1-25.512-.697L183 173l-2.073-1.598L182 151z')
												path#Path-3-Copy(fill='#776350', d='M183 124l3.44-2 25.943.517L218 124l33-3h76v2l7-2v2l3.676-2.263L350 123l66-2 11 3v43l-3 5-15-2-76 6-26.456-.118-12.857-1.832L262 173l-14-1 3 2h-45l-25.512 2.303L186 171l-5.073-1.598L182 151z')
												path#Path-3-Copy-2(fill='#A69879', d='M183 124l3.44-2 25.943.517L218 124l33-3h76v2l7-2v2l3.676-2.263L350 123l66-2 11 3-11-2-67.758 2.167-10.81-2.81-4.092 2.433.39-1.525-7.787 1.526.753-1.602-76.722-.32-32.68 3.75-5.53-1.758-23.325-.86-4.455 1.804L182 151z')
											g#message
												path#paper(fill='#F7F6F3', d='M185.11 149.407C184.554 137.203 188 126 188 126s15.633 2.648 33.734 2.42c6.973-.088 14.313.25 21.266-1.42.598-.143 1.916 1.597 1.916 1.597l2.284-2.37 27.365-.382s31.603 2.5 51.435 2.752c19.832.25 40-1.597 40-1.597s55.018.967 55.64 1.937c3.182 4.956 3.925 17.112 3.925 17.112L423 167s-30.504 3.454-72 5c-41.496 1.546-83-2-89-2s-73 2-73 2-3.336-10.39-3.89-22.593z')
												path(id='LET’S-ANIMATE-THE-WE', fill='#423927', d='M214.49 144.13h3.877c.103 0 .19.037.266.112.075.075.112.163.112.266v2.114c0 .103-.037.19-.112.266-.075.075-.163.112-.266.112h-7.056c-.102 0-.19-.037-.265-.112-.075-.075-.112-.163-.112-.266v-9.044c0-.103.037-.19.112-.266.075-.075.163-.112.266-.112h2.8c.104 0 .192.037.267.112.075.075.112.163.112.266v6.552zm9.145.14h4.312c.103 0 .19.037.266.112.075.075.112.163.112.266v1.974c0 .103-.037.19-.112.266-.075.075-.163.112-.266.112h-7.294c-.103 0-.19-.037-.266-.112-.075-.075-.112-.163-.112-.266v-9.044c0-.103.037-.19.112-.266.075-.075.163-.112.266-.112h7.182c.103 0 .19.037.266.112.076.075.113.163.113.266v1.974c0 .103-.037.19-.112.266-.074.075-.162.112-.265.112h-4.2v.882h3.892c.103 0 .19.037.266.112.075.075.112.163.112.266v1.82c0 .103-.037.19-.112.266-.075.075-.163.112-.266.112h-3.892v.882zm6.528-7.07h8.204c.103 0 .19.037.266.112.075.075.112.163.112.266v2.254c0 .103-.037.19-.112.266-.075.075-.163.112-.266.112h-2.324v6.412c0 .103-.037.19-.112.266-.074.075-.162.112-.265.112h-2.8c-.103 0-.19-.037-.266-.112-.076-.075-.113-.163-.113-.266v-6.412h-2.324c-.103 0-.19-.037-.266-.112-.075-.075-.112-.163-.112-.266v-2.254c0-.103.037-.19.112-.266.075-.075.163-.112.266-.112zm10.812-.154h2.31c.084 0 .156.03.217.09.06.062.09.122.09.183 0 .06-.004.104-.013.132l-1.33 3.374c-.113.3-.328.448-.645.448h-1.512c-.084 0-.156-.03-.217-.09-.06-.062-.09-.134-.09-.218v-.028l.517-3.346c.02-.14.09-.266.217-.378.126-.112.278-.168.455-.168zm4.21.91c.788-.597 1.824-.896 3.107-.896 1.283 0 2.333.313 3.15.938.817.625 1.225 1.28 1.225 1.96 0 .084-.03.156-.09.217-.062.06-.13.09-.204.09h-2.8c-.215 0-.41-.078-.588-.237-.177-.16-.415-.238-.714-.238-.447 0-.67.13-.67.392 0 .14.11.257.328.35.22.093.628.177 1.225.252 1.39.177 2.382.502 2.975.973.593.47.89 1.185.89 2.142 0 .956-.437 1.735-1.31 2.337-.873.602-2.014.903-3.423.903-1.41 0-2.515-.29-3.318-.868-.803-.58-1.204-1.283-1.204-2.114 0-.084.03-.156.09-.217.062-.06.134-.09.218-.09h2.66c.197 0 .414.093.652.28.238.187.567.28.987.28.7 0 1.05-.13 1.05-.392 0-.168-.127-.296-.38-.385-.25-.09-.727-.18-1.427-.273-2.408-.317-3.612-1.344-3.612-3.08 0-.952.395-1.727 1.184-2.324zm16.828-.756h3.038c.337 0 .547.154.63.462l3.123 8.932c.01.028.014.072.014.133 0 .06-.03.12-.09.182-.062.06-.134.09-.218.09h-2.59c-.28 0-.463-.117-.547-.35l-.336-.924h-3.01l-.336.924c-.083.233-.265.35-.545.35h-2.59c-.084 0-.156-.03-.217-.09-.06-.062-.09-.122-.09-.183 0-.06.004-.105.013-.133l3.123-8.932c.084-.308.294-.462.63-.462zm.728 5.796h1.583l-.798-2.604-.784 2.604zm13.375-5.796h2.534c.102 0 .19.037.265.112.075.075.112.163.112.266v9.044c0 .103-.037.19-.112.266-.075.075-.163.112-.266.112h-2.213c-.243 0-.434-.107-.574-.322l-2.366-3.57v3.514c0 .103-.037.19-.112.266-.075.075-.163.112-.266.112h-2.535c-.103 0-.19-.037-.266-.112-.076-.075-.113-.163-.113-.266v-9.044c0-.103.037-.19.112-.266.074-.075.162-.112.265-.112h2.212c.26 0 .453.107.574.322l2.367 3.878v-3.822c0-.103.037-.19.112-.266.074-.075.162-.112.265-.112zm8.236 9.8h-2.855c-.103 0-.19-.037-.266-.112-.076-.075-.113-.163-.113-.266v-9.044c0-.103.037-.19.112-.266.074-.075.162-.112.265-.112h2.856c.104 0 .192.037.267.112.075.075.112.163.112.266v9.044c0 .103-.038.19-.113.266-.075.075-.163.112-.266.112zm10.323-9.8h2.212c.103 0 .19.037.266.112.076.075.113.163.113.266v9.044c0 .103-.037.19-.112.266-.074.075-.162.112-.265.112h-2.534c-.102 0-.19-.037-.265-.112-.075-.075-.112-.163-.112-.266v-3.836l-.924 1.512c-.15.233-.323.35-.52.35h-.98c-.195 0-.368-.117-.517-.35l-.924-1.512v3.836c0 .103-.038.19-.113.266-.075.075-.163.112-.266.112h-2.533c-.103 0-.19-.037-.266-.112-.074-.075-.11-.163-.11-.266v-9.044c0-.103.036-.19.11-.266.076-.075.164-.112.267-.112h2.212c.26 0 .46.126.6.378l2.03 3.36 2.03-3.36c.14-.252.342-.378.603-.378zm7.746 0h3.037c.336 0 .546.154.63.462l3.122 8.932c.008.028.013.072.013.133 0 .06-.03.12-.09.182-.062.06-.134.09-.218.09h-2.59c-.28 0-.462-.117-.546-.35l-.337-.924h-3.01l-.336.924c-.084.233-.266.35-.546.35h-2.59c-.083 0-.155-.03-.216-.09-.06-.062-.09-.122-.09-.183 0-.06.004-.105.013-.133l3.122-8.932c.083-.308.293-.462.63-.462zm.727 5.796h1.582l-.8-2.604-.783 2.604zm6.154-5.796h8.205c.103 0 .19.037.266.112.076.075.113.163.113.266v2.254c0 .103-.037.19-.112.266-.074.075-.162.112-.265.112h-2.324v6.412c0 .103-.036.19-.11.266-.076.075-.164.112-.267.112h-2.8c-.103 0-.19-.037-.266-.112-.075-.075-.112-.163-.112-.266v-6.412H309.3c-.102 0-.19-.037-.265-.112-.075-.075-.112-.163-.112-.266v-2.254c0-.103.037-.19.112-.266.075-.075.163-.112.266-.112zm13.043 7.07h4.312c.103 0 .19.037.266.112.076.075.113.163.113.266v1.974c0 .103-.037.19-.112.266-.074.075-.162.112-.265.112h-7.294c-.102 0-.19-.037-.265-.112-.075-.075-.112-.163-.112-.266v-9.044c0-.103.037-.19.112-.266.075-.075.163-.112.266-.112h7.183c.103 0 .19.037.266.112.074.075.11.163.11.266v1.974c0 .103-.036.19-.11.266-.076.075-.164.112-.267.112h-4.2v.882h3.892c.103 0 .19.037.266.112.076.075.113.163.113.266v1.82c0 .103-.037.19-.112.266-.074.075-.162.112-.265.112h-3.892v.882zm10.858-7.07h8.205c.103 0 .19.037.266.112.076.075.113.163.113.266v2.254c0 .103-.037.19-.112.266-.074.075-.162.112-.265.112h-2.324v6.412c0 .103-.036.19-.11.266-.076.075-.164.112-.267.112h-2.8c-.103 0-.19-.037-.266-.112-.075-.075-.112-.163-.112-.266v-6.412H333.2c-.102 0-.19-.037-.265-.112-.075-.075-.112-.163-.112-.266v-2.254c0-.103.037-.19.112-.266.075-.075.163-.112.266-.112zm16.33 0h2.743c.103 0 .19.037.266.112.074.075.11.163.11.266v9.044c0 .103-.036.19-.11.266-.076.075-.164.112-.267.112h-2.744c-.104 0-.192-.037-.267-.112-.075-.075-.112-.163-.112-.266v-3.024h-2.267v3.024c0 .103-.037.19-.112.266-.074.075-.162.112-.265.112h-2.744c-.102 0-.19-.035-.265-.105-.075-.07-.112-.16-.112-.273v-9.044c0-.103.037-.19.112-.266.075-.075.163-.112.266-.112h2.745c.103 0 .19.037.266.112.076.075.113.163.113.266v2.94h2.268v-2.94c0-.103.038-.19.113-.266.075-.075.163-.112.266-.112zm8.27 7.07h4.313c.103 0 .19.037.266.112.074.075.11.163.11.266v1.974c0 .103-.036.19-.11.266-.076.075-.164.112-.267.112h-7.294c-.104 0-.192-.037-.267-.112-.075-.075-.112-.163-.112-.266v-9.044c0-.103.038-.19.113-.266.075-.075.163-.112.266-.112H362c.104 0 .192.037.267.112.075.075.112.163.112.266v1.974c0 .103-.038.19-.113.266-.075.075-.163.112-.266.112h-4.2v.882h3.893c.103 0 .19.037.266.112.074.075.11.163.11.266v1.82c0 .103-.036.19-.11.266-.076.075-.164.112-.267.112H357.8v.882zm14.485 2.73h-2.002c-.177 0-.324-.054-.44-.16-.118-.108-.185-.232-.204-.372l-1.29-8.918v-.042c0-.084.03-.156.092-.217.06-.06.133-.09.217-.09h2.603c.308 0 .476.126.504.378l.476 3.948.574-1.75c.093-.27.252-.406.476-.406h1.428c.225 0 .384.135.477.406l.574 1.736.477-3.934c.028-.252.196-.378.504-.378h2.605c.084 0 .156.03.217.09.06.062.09.134.09.218v.042l-1.287 8.918c-.02.14-.086.264-.203.37-.117.108-.264.162-.44.162h-2.003c-.29 0-.482-.126-.575-.378l-1.148-2.87-1.148 2.87c-.094.252-.286.378-.575.378zm12.108-2.73h4.312c.103 0 .19.037.266.112.076.075.113.163.113.266v1.974c0 .103-.037.19-.112.266-.074.075-.162.112-.265.112h-7.294c-.102 0-.19-.037-.265-.112-.075-.075-.112-.163-.112-.266v-9.044c0-.103.037-.19.112-.266.075-.075.163-.112.266-.112h7.183c.103 0 .19.037.266.112.074.075.11.163.11.266v1.974c0 .103-.036.19-.11.266-.076.075-.164.112-.267.112h-4.2v.882h3.892c.103 0 .19.037.266.112.076.075.113.163.113.266v1.82c0 .103-.037.19-.112.266-.074.075-.162.112-.265.112h-3.892v.882zm11.89-4.004c0-.168-.05-.32-.147-.455-.098-.134-.24-.202-.427-.202h-1.177v1.274h1.176c.186 0 .328-.06.426-.182.098-.12.147-.266.147-.434zm-1.75 2.954v1.372h1.302c.215 0 .376-.072.483-.217.107-.145.16-.306.16-.483v-.014c0-.177-.057-.33-.174-.462-.117-.13-.273-.196-.47-.196h-1.3zM396.2 147h-4.79c-.102 0-.19-.037-.265-.112-.075-.075-.112-.163-.112-.266v-9.044c0-.103.037-.19.112-.266.075-.075.163-.112.266-.112h4.65c1.324 0 2.302.24 2.932.72.63.482.945 1.207.945 2.178v.042c0 .4-.117.758-.35 1.07-.233.314-.49.54-.77.68.373.15.688.413.945.79.257.38.385.792.385 1.24 0 2.053-1.316 3.08-3.948 3.08z')
												g#linkRock
													path(id='www.nerdmanship.com', fill='#F1B742', d='M226.788 154.76h1.116c.216 0 .352.096.408.288l.78 2.496.732-2.496c.056-.192.192-.288.408-.288h1.848c.08 0 .148.028.204.084.056.056.084.112.084.168 0 .056-.004.1-.012.132l-1.752 5.556c-.064.2-.196.3-.396.3H228.6c-.2 0-.332-.1-.396-.3l-.852-2.424-.864 2.424c-.064.2-.196.3-.396.3h-1.608c-.2 0-.332-.1-.396-.3l-1.752-5.556c-.008-.032-.012-.076-.012-.132 0-.056.028-.112.084-.168.056-.056.124-.084.204-.084h1.848c.216 0 .352.096.408.288l.732 2.496.78-2.496c.056-.192.192-.288.408-.288zm10.755 0h1.116c.215 0 .35.096.407.288l.78 2.496.732-2.496c.055-.192.19-.288.407-.288h1.848c.08 0 .148.028.204.084.055.056.083.112.083.168 0 .056-.004.1-.012.132l-1.75 5.556c-.065.2-.197.3-.397.3h-1.608c-.2 0-.332-.1-.396-.3l-.853-2.424-.864 2.424c-.064.2-.196.3-.396.3h-1.608c-.2 0-.333-.1-.397-.3l-1.752-5.556c-.007-.032-.01-.076-.01-.132 0-.056.027-.112.083-.168.056-.056.124-.084.204-.084h1.848c.216 0 .352.096.408.288l.732 2.496.78-2.496c.056-.192.192-.288.408-.288zm10.756 0h1.115c.216 0 .352.096.408.288l.78 2.496.732-2.496c.056-.192.192-.288.408-.288h1.848c.08 0 .15.028.205.084.056.056.084.112.084.168 0 .056-.005.1-.013.132l-1.752 5.556c-.064.2-.196.3-.396.3h-1.61c-.2 0-.33-.1-.395-.3l-.852-2.424L248 160.7c-.065.2-.197.3-.397.3h-1.608c-.2 0-.332-.1-.396-.3l-1.753-5.556c-.008-.032-.012-.076-.012-.132 0-.056.028-.112.084-.168.055-.056.123-.084.203-.084h1.848c.217 0 .353.096.41.288l.73 2.496.78-2.496c.057-.192.193-.288.41-.288zm7.094 3.504h2.088c.088 0 .164.032.228.096s.096.14.096.228v2.088c0 .088-.032.164-.096.228s-.14.096-.228.096h-2.088c-.088 0-.164-.032-.228-.096s-.096-.14-.096-.228v-2.088c0-.088.032-.164.096-.228s.14-.096.228-.096zm11.032-.9v3.312c0 .088-.032.164-.096.228s-.14.096-.228.096h-2.292c-.088 0-.164-.032-.228-.096s-.096-.14-.096-.228v-3.228c0-.44-.2-.66-.6-.66-.4 0-.6.22-.6.66v3.228c0 .088-.032.164-.096.228s-.14.096-.228.096h-2.28c-.088 0-.164-.032-.228-.096s-.096-.14-.096-.228v-5.592c0-.088.032-.164.096-.228s.14-.096.228-.096h2.1c.088 0 .164.032.228.096s.096.14.096.228v.396c.208-.248.49-.45.846-.606.356-.156.738-.234 1.146-.234.656 0 1.208.23 1.656.69.448.46.672 1.138.672 2.034zm7.707 1.224h-3.576v.06c0 .488.156.732.468.732.088 0 .196-.064.324-.192.127-.128.267-.192.42-.192h2.267c.176 0 .264.088.264.264 0 .392-.293.8-.88 1.224-.59.424-1.385.636-2.39.636-1.003 0-1.823-.262-2.46-.786-.635-.524-.953-1.246-.953-2.166v-.576c0-.872.324-1.582.972-2.13.647-.548 1.497-.822 2.55-.822 1.05 0 1.867.308 2.447.924.58.616.87 1.396.87 2.34v.36c0 .088-.032.164-.096.228-.063.064-.14.096-.227.096zm-3.096-2.268c-.32 0-.48.24-.48.72v.048h.96v-.048c0-.48-.16-.72-.48-.72zm7.3-1.236v.42c.56-.496 1.184-.744 1.872-.744h.575c.088 0 .164.032.228.096s.096.14.096.228v1.872c0 .088-.033.164-.097.228s-.14.096-.228.096h-1.548c-.216 0-.386.05-.51.15-.124.1-.194.234-.21.402v2.844c0 .088-.032.164-.096.228-.063.064-.14.096-.227.096h-2.28c-.088 0-.164-.032-.228-.096s-.096-.14-.096-.228v-5.592c0-.088.03-.164.095-.228.064-.064.14-.096.228-.096h2.1c.088 0 .164.032.228.096.065.064.097.14.097.228zm3.783 3.264v-.948c0-.896.24-1.58.72-2.052s1.066-.708 1.758-.708 1.246.188 1.662.564v-2.4c0-.088.032-.164.096-.228s.14-.096.228-.096h2.22c.088 0 .164.032.228.096s.096.14.096.228v7.872c0 .088-.032.164-.096.228s-.14.096-.228.096h-2.04c-.088 0-.164-.032-.228-.096s-.096-.14-.096-.228v-.36c-.416.536-1.004.804-1.764.804s-1.376-.226-1.848-.678c-.472-.452-.708-1.15-.708-2.094zm4.14-.072v-.888c-.024-.4-.224-.6-.6-.6-.4 0-.6.232-.6.696v.792c0 .464.2.696.6.696.4 0 .6-.232.6-.696zm11.295-1.488c-.128 0-.238.048-.33.144-.092.096-.138.24-.138.432v3.312c0 .088-.032.164-.096.228-.063.064-.14.096-.227.096h-2.112c-.087 0-.163-.032-.227-.096s-.096-.14-.096-.228v-3.228c0-.44-.16-.66-.48-.66-.136 0-.25.05-.342.15-.092.1-.138.238-.138.414v3.324c0 .088-.032.164-.096.228-.063.064-.14.096-.227.096h-2.16c-.088 0-.164-.032-.228-.096s-.096-.14-.096-.228v-5.592c0-.088.03-.164.095-.228.064-.064.14-.096.228-.096h1.98c.088 0 .164.032.228.096.065.064.097.14.097.228v.396c.16-.208.388-.396.684-.564.33-.184.697-.276 1.105-.276.88 0 1.472.328 1.776.984.193-.28.457-.514.793-.702.336-.188.684-.282 1.044-.282.648 0 1.178.228 1.59.684.412.456.618 1.136.618 2.04v3.312c0 .088-.032.164-.096.228-.065.064-.14.096-.23.096h-2.11c-.09 0-.165-.032-.23-.096-.063-.064-.095-.14-.095-.228v-3.228c0-.44-.16-.66-.48-.66zm4.432 2.424c0-1.08.876-1.772 2.628-2.076l1.272-.204c0-.24-.02-.402-.06-.486-.04-.084-.134-.126-.282-.126-.148 0-.294.064-.438.192-.144.128-.28.192-.408.192h-2.04c-.177 0-.265-.086-.265-.258 0-.172.062-.356.186-.552.125-.196.305-.39.54-.582.237-.192.57-.352.997-.48.428-.128.906-.192 1.434-.192 1.073 0 1.877.224 2.413.672.536.448.804 1.088.804 1.92v3.444c0 .088-.032.164-.096.228-.063.064-.14.096-.227.096h-2.1c-.088 0-.164-.032-.228-.096s-.096-.14-.096-.228v-.336c-.377.52-.925.78-1.645.78s-1.298-.182-1.734-.546c-.435-.364-.653-.818-.653-1.362zm3.156.132c.52 0 .78-.312.78-.936l-.708.156c-.352.08-.528.228-.528.444 0 .096.04.176.12.24.08.064.192.096.336.096zm12.063-1.98v3.312c0 .088-.032.164-.096.228s-.14.096-.228.096h-2.292c-.088 0-.164-.032-.228-.096s-.096-.14-.096-.228v-3.228c0-.44-.2-.66-.6-.66-.4 0-.6.22-.6.66v3.228c0 .088-.032.164-.096.228s-.14.096-.228.096h-2.28c-.088 0-.164-.032-.228-.096s-.096-.14-.096-.228v-5.592c0-.088.032-.164.096-.228s.14-.096.228-.096h2.1c.088 0 .164.032.228.096s.096.14.096.228v.396c.208-.248.49-.45.846-.606.356-.156.738-.234 1.146-.234.656 0 1.208.23 1.656.69.448.46.672 1.138.672 2.034zm4.696 1.908c0-.08-.02-.144-.06-.192-.104-.128-.488-.254-1.152-.378-.664-.124-1.202-.344-1.614-.66-.412-.316-.618-.758-.618-1.326 0-.568.272-1.056.816-1.464.544-.408 1.278-.612 2.202-.612.924 0 1.682.192 2.274.576.592.384.888.772.888 1.164 0 .088-.026.164-.078.228-.052.064-.114.096-.186.096h-2.016c-.12 0-.268-.064-.444-.192s-.308-.192-.396-.192c-.184 0-.276.064-.276.192 0 .08.02.144.06.192.104.12.54.236 1.308.348.768.112 1.342.358 1.722.738.38.38.57.802.57 1.266 0 .648-.292 1.156-.876 1.524-.584.368-1.412.552-2.484.552-.568 0-1.072-.064-1.512-.192-.44-.128-.776-.288-1.008-.48-.456-.376-.684-.728-.684-1.056 0-.088.028-.164.084-.228.056-.064.124-.096.204-.096h2.088c.112 0 .258.062.438.186s.35.186.51.186c.16 0 .24-.06.24-.18zm7.143-1.824v3.228c0 .088-.032.164-.096.228-.065.064-.14.096-.23.096h-2.34c-.087 0-.163-.032-.227-.096s-.096-.14-.096-.228v-7.872c0-.088.032-.164.096-.228s.14-.096.228-.096h2.34c.09 0 .165.032.23.096.063.064.095.14.095.228v2.58c.456-.496 1.04-.744 1.752-.744s1.3.232 1.764.696c.465.464.697 1.14.697 2.028v3.3c0 .088-.032.164-.096.228-.063.064-.14.096-.227.096h-2.352c-.087 0-.163-.032-.227-.096s-.096-.14-.096-.228v-3.216c0-.44-.202-.66-.606-.66-.403 0-.605.22-.605.66zM337.1 161h-2.147c-.088 0-.164-.032-.228-.096s-.096-.14-.096-.228v-5.592c0-.088.03-.164.095-.228.064-.064.14-.096.228-.096h2.148c.09 0 .165.032.23.096.063.064.095.14.095.228v5.592c0 .088-.032.164-.096.228-.065.064-.14.096-.23.096zm.265-8.556v1.452c0 .088-.032.164-.096.228-.065.064-.14.096-.23.096h-2.027c-.088 0-.164-.032-.228-.096s-.096-.14-.096-.228v-1.452c0-.088.03-.164.095-.228.064-.064.14-.096.228-.096h2.028c.09 0 .165.032.23.096.063.064.095.14.095.228zm8.5 4.968v.948c0 .896-.24 1.58-.72 2.052s-1.067.708-1.76.708c-.69 0-1.245-.188-1.66-.564v2.4c0 .088-.033.164-.097.228s-.14.096-.228.096h-2.22c-.088 0-.164-.032-.228-.096s-.096-.14-.096-.228v-7.872c0-.088.032-.164.096-.228s.14-.096.228-.096h2.04c.088 0 .164.032.228.096s.096.14.096.228v.36c.416-.536 1.004-.804 1.764-.804s1.376.226 1.848.678c.472.452.708 1.15.708 2.094zm-4.14.072v.888c.023.4.223.6.6.6.4 0 .6-.232.6-.696v-.792c0-.464-.2-.696-.6-.696-.4 0-.6.232-.6.696zm5.834.78h2.087c.088 0 .164.032.228.096s.096.14.096.228v2.088c0 .088-.03.164-.095.228-.064.064-.14.096-.228.096h-2.088c-.09 0-.165-.032-.23-.096-.063-.064-.095-.14-.095-.228v-2.088c0-.088.032-.164.096-.228.065-.064.14-.096.23-.096zm6.723-.804v.84c0 .272.036.468.108.588.073.12.185.18.337.18.152 0 .256-.026.312-.078.055-.052.113-.152.173-.3.06-.148.174-.222.342-.222h2.34c.088 0 .164.032.228.096s.096.148.096.252c0 .104-.037.244-.11.42-.07.176-.195.376-.37.6-.177.224-.393.43-.65.618-.255.188-.59.346-1.007.474-.416.128-.876.192-1.38.192-1 0-1.81-.262-2.43-.786-.62-.524-.93-1.25-.93-2.178v-.552c0-.928.31-1.654.93-2.178.62-.524 1.43-.786 2.43-.786.592 0 1.128.09 1.608.27.48.18.85.4 1.11.66.26.26.46.514.595.762.136.248.204.438.204.57 0 .132-.033.23-.097.294-.064.064-.14.096-.228.096h-2.34c-.152 0-.268-.08-.348-.24-.112-.24-.26-.36-.444-.36-.32 0-.48.256-.48.768zm4.947.828v-.816c0-.912.324-1.612.972-2.1.648-.488 1.484-.732 2.508-.732s1.86.244 2.508.732c.648.488.972 1.188.972 2.1v.816c0 .92-.312 1.622-.936 2.106-.624.484-1.472.726-2.544.726s-1.92-.242-2.544-.726c-.624-.484-.936-1.186-.936-2.106zm4.02.096v-1.008c0-.304-.04-.516-.12-.636-.08-.12-.22-.18-.42-.18-.2 0-.34.06-.42.18-.08.12-.12.332-.12.636v1.008c0 .32.04.536.12.648.08.112.22.168.42.168.2 0 .34-.06.42-.18.08-.12.12-.332.12-.636zm11.188-1.596c-.128 0-.238.048-.33.144-.092.096-.138.24-.138.432v3.312c0 .088-.032.164-.096.228s-.14.096-.228.096h-2.112c-.088 0-.164-.032-.228-.096s-.096-.14-.096-.228v-3.228c0-.44-.16-.66-.48-.66-.136 0-.25.05-.342.15-.092.1-.138.238-.138.414v3.324c0 .088-.032.164-.096.228s-.14.096-.228.096h-2.16c-.088 0-.164-.032-.228-.096s-.096-.14-.096-.228v-5.592c0-.088.032-.164.096-.228s.14-.096.228-.096h1.98c.088 0 .164.032.228.096s.096.14.096.228v.396c.16-.208.388-.396.684-.564.328-.184.696-.276 1.104-.276.88 0 1.472.328 1.776.984.192-.28.456-.514.792-.702.336-.188.684-.282 1.044-.282.648 0 1.178.228 1.59.684.412.456.618 1.136.618 2.04v3.312c0 .088-.032.164-.096.228s-.14.096-.228.096h-2.112c-.088 0-.164-.032-.228-.096s-.096-.14-.096-.228v-3.228c0-.44-.16-.66-.48-.66zm11.803-1.104v-1.692c0-.072.027-.134.08-.186.05-.052.11-.078.18-.078.067 0 .125.02.173.06l2.604 2.532c.112.096.168.208.168.336v.792c0 .128-.056.24-.168.336l-2.604 2.532c-.048.04-.106.06-.174.06-.07 0-.13-.026-.18-.078-.053-.052-.08-.114-.08-.186v-1.692c0-.216.073-.396.217-.54l.828-.828-.828-.828c-.144-.144-.216-.324-.216-.54zm-3.48 0v-1.692c0-.072.027-.134.08-.186.05-.052.11-.078.18-.078.067 0 .125.02.173.06l2.604 2.532c.112.096.168.208.168.336v.792c0 .128-.056.24-.168.336l-2.604 2.532c-.048.04-.106.06-.174.06-.07 0-.13-.026-.18-.078-.053-.052-.08-.114-.08-.186v-1.692c0-.216.073-.396.217-.54l.828-.828-.828-.828c-.144-.144-.216-.324-.216-.54z')
													path#Line(stroke='#F0B642', d='M224.5 162.5h113.07', stroke-linecap='square')
													path#Line-Copy(stroke='#F0B642', d='M389.51 162.5h-45.94', stroke-linecap='square')
											g#handLeft
												path#Path-29(fill='#5D5A51', d='M197 137l-11 5h4l6-2z')
												path#Path-32(fill='#5D5951', d='M189 148l9-1-1 2-9 2-3-1z')
												path#Path-34(fill='#817E73', d='M180 156l-1 2-5-2-1-5z')
												path#Path-35(fill='#5D5A51', d='M179 158h8l7 1v-2l-4-1h-10z')
												path#Path-36(fill='#716D61', d='M196 154v2l-2 3v-2z')
												path#Path-25(fill='#A7A39B', d='M194 135l3 2-11 5h4l7 2 1 3-9 1-4 2h4l6 2 1 2-2 3-4-1h-10l1-20z')
												path#Path-26(fill='#BCB8B0', d='M181 136l2 6v8l-3 6-7-5 2-13z')
											g#mossHand
												path#Path-4(fill='#384C2F', d='M190 135l-9 4-9 10 2-6-2 1 3-7 7-2z')
												path#Path-4-Copy(fill='#648156', d='M190 135l-11 4-7 10 3-8-3 3 3-7 7-2z')
											g#handRight
												path#Path-29(fill='#817E73', d='M415.304 135.673l10.31 6.303-3.97-.487-5.713-2.717z')
												path#Path-32(fill='#817E73', d='M421.904 147.566l-8.81-2.09.748 2.108 8.69 3.082 3.1-.627z')
												path#Path-34(fill='#5D5A51', d='M429.862 156.603l.75 2.107 5.205-1.376 1.602-4.84z')
												path#Path-35(fill='#817E73', d='M430.61 158.71l-7.94-.975-7.07.14.245-1.985 4.092-.505 9.925 1.218z')
												path#Path-36(fill='#817E73', d='M414.225 152.668l-.244 1.985 1.62 3.222.245-1.985z')
												path#Path-25(fill='#BCB8B0', d='M418.526 134.054l-3.222 1.62 10.31 6.302-3.97-.487-7.193 1.13-1.357 2.857 8.81 2.09 3.728 2.472-3.97-.49-6.2 1.255-1.235 1.863 1.62 3.222 4.092-.505 9.925 1.218 1.445-19.973z')
												path#Path-26(fill='#A7A39B', d='M431.307 136.63l-2.716 5.712-.974 7.94 2.246 6.32 7.557-4.108-.4-13.147z')

            
// Production controls
.controls.row
	.buttons.small-4.columns
		button#btnFirstFrame.button
			i.fa.fa-step-backward.fa-2x
		button#btnReverse.button
			i.fa.fa-play.fa-2x.fa-rotate-180
		button#btnPause.button
			i.fa.fa-pause.fa-2x
		button#btnPlay.button
			i.fa.fa-play.fa-2x
		button#btnLastFrame.button
			i.fa.fa-step-forward.fa-2x
	.scrubb.small-8.columns
		#slider
            
          
!
            
              @import 'https://fonts.googleapis.com/css?family=Rubik+One';

body {
	background-color: hsla(200, 50%, 10%, 0);
}

#userInput {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 500px;
	top: 300px;
	opacity: 0.01;
}

.input {
	font-family: 'Rubik One', sans-serif;
	font-size: 30px;
	text-transform: uppercase;
	text-align: center;

	border: none;
	border-bottom: 5px solid hsla(200, 50%, 40%, 1);
	padding: 0;
	background-color: hsla(200, 50%, 10%, 1);
	color: hsla(200, 50%, 70%, 1);
}

.input:focus {
	outline: none;
	border-bottom: 5px solid hsla(200, 50%, 70%, 1);
}

input::selection {
	background-color: hsla(200, 50%, 10%, 0);
	color: hsla(200, 50%, 70%, 0.2);
}

.error {
	border-bottom: 5px solid hsla(0, 50%, 70%, 1);
}

.error:focus {
	border-bottom: 5px solid hsla(0, 50%, 70%, 1);
}

#main {
	position: relative;
	overflow: visible;
	width: 100%;
	height: 100%;
}

#kineticType {
	overflow: visible;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

@media (max-width: 400px) {
	#kineticType {
		top: 100px;
	}
	
	#userInput {
		width: 300px;
		top: 220px;
	}
}
            
          
!
            
              /*

	THIS IS MY MESSAGE TO YOU, RUDY!
	--------------------------------
	
	Stay updated with web animation
	and follow us on Facebook!
	
	www.facebook.com/nerdmanship

*/



//---------------------------------------
//     APP         ----------------------
//---------------------------------------

// INIT SCENE
// CREATE LETTERS
// POSITION LETTERS
// CREATE INPUTS
// INIT INPUTS
// INPUT VALIDATION
// ENTRY SEQUENCE
// SETUP ANIMATION
// UI BEHAVIOR
// ANIMATE LETTER

var numLetters = (window.innerWidth < 400) ? 4 : 12;
var letterPadding = (window.innerWidth < 400) ? 390 : 111;
var letterY = (window.innerWidth < 400) ? 400 : 600;
var inputWidth = 30;
var inputHeight = inputWidth;
var numLinks = 75;
var linkLength = (window.innerWidth < 400) ? 13 : 7;
var strokeWidth = linkLength;
var viewBox = "0 0 1300 975";
var SVGWidth = (window.innerWidth < 400) ? "300" : "400";
var SVGHeight = (window.innerWidth < 400) ? "225" : "300";
var svgns = "http://www.w3.org/2000/svg";
var xlink = 'http://www.w3.org/1999/xlink';
var main = document.getElementById("main");
var inputDiv = document.getElementById("userInput");

var dur; // Animation speed

var l; // dynamic reference to link
var lg; // dynamic reference to link groups
var letg; // dynamic reference to letter group
var validInputs = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z", ".", " ", "-", "_", ""]
var validKeys = [190, 189, 32]; for (var i = 65; i <= 90; i++) { validKeys.push(i);	}

// Convenience: Set multiple attributes at once
function setAttributes(el, attrs) {
  for(var key in attrs) {
    el.setAttribute(key, attrs[key]);
  }
}

// Convenience: Return array of links/linkGroups to animated
function linkArr(first, last, type) {
	var arr = [];
	if (type == undefined) {
		type = lg
	}
	for(var i = first; i <= last; i++){
		arr.push( type + i );
	}
	return arr;
}



//-----------------------
//-----------------------	INIT SCENE
//-----------------------

$(initScene( createLetters,	positionLetters, createInputs ));

function initScene (x,y,z) { 

	// Create SVG
	var newSVG = document.createElementNS( svgns, "svg");

	// Set SVG attributes
	setAttributes(newSVG, {
		"id": "kineticType",
		"xmlns": svgns,
		"viewBox": viewBox,
		"width": SVGWidth,
		"height": SVGHeight			
	})

	
	// Create Defs tag
	var newDefs = document.createElementNS( svgns, "defs");
	
	
	// Create path template
	var newPathTemplate = document.createElementNS( svgns, "path");
	
	// Set path attributes
	setAttributes(newPathTemplate, {
		"id": "link",
		"d": "M0 0h" + linkLength,
		"stroke-linecap": "round",
		"stroke-width": strokeWidth		
	})

	
	// Create the mainGroup
	var mainGroup = document.createElementNS( svgns, "g");

	// Set mainGroup attributes
	setAttributes(mainGroup, {
		"id": "mainGroup"
	})

	
	// Append SVG to main div
	main.appendChild(newSVG);

	// Append Defs to SVG
	newSVG.appendChild(newDefs);
		
	// Append path to Defs
	newDefs.appendChild(newPathTemplate);

	// Append mainGroup to SVG
	newSVG.appendChild(mainGroup);
	
	
	x();
	y();
	z();
}





//-----------------------
//-----------------------	CREATE LETTERS
//-----------------------

function createLetters() {
	// Create letterGroups and put them in mainGroup
	for (var i = 0; i < numLetters; i++) {
			
		// Create a letterGroup
		var newLetterGroup = document.createElementNS( svgns, "g");

		// Set letterGroup attributes
		setAttributes(newLetterGroup, {
			"id": "letterGroup" + i,
			"class": "letterGroup",
			"stroke": "hsla(330, 40%, " + random(40,60) + "%, 1)",
			"opacity": "0"
		})
		
		
		// Store previously created link group
		var prevLinkGroup;
		
		// Create Links and nest them in LinkGroups
		for (var j = 0; j < numLinks; j++) { 
			
			// Create a linkGroup
			var newLinkGroup = document.createElementNS( svgns, "g");

			// Set linkGroup attributes
			setAttributes(newLinkGroup, {
				"id": "linkGroup" + i + "-" + j,
				"class": "linkGroup"
			})

			// Create Link
			var newLink = document.createElementNS( svgns, "use");

			// Set Link attributes
			newLink.setAttributeNS(xlink, "xlink:href", "#link");
			setAttributes(newLink, {
				"class": "link",
				"id": "link" + i + "-" + j,
				"x": j*linkLength
			})
			
			// Put the link in the linkGroup
			newLinkGroup.appendChild(newLink);
			
			// Nest linkGroups
			if ( j == 0 ) {
				newLetterGroup.appendChild(newLinkGroup);
			} else {
				prevLinkGroup.appendChild(newLinkGroup);
			}

			// Set previous linkGroup for next iteration 
			prevLinkGroup = newLinkGroup;
		}
		
		
		// Put the letterGroup in the mainGroup
		mainGroup.appendChild(newLetterGroup);
	}
}





//-----------------------
//-----------------------	POSITION LETTERS
//-----------------------

function positionLetters() {
	for (var i = 0; i < numLetters; i++) {
		TweenMax.set(".letterGroup", { rotation: -90, transformOrigin: "left center" })
		TweenMax.set("#letterGroup" + i, { x: i*letterPadding, y: letterY })
	}
}





//-----------------------
//-----------------------	CREATE INPUTS
//-----------------------

function createInputs() {
	for (var i = 0; i < numLetters; i++) {
		var inputGroupWidth = document.getElementById("userInput").clientWidth;
		// Create an input
		var newInput = document.createElement("input");

		var margin = (inputGroupWidth-(numLetters*inputWidth))/(numLetters*2);

		// Set attributes
		setAttributes(newInput, {
			"id": "index" + i,
			"class": "input",
			"data-index": i,
			"maxlength": "1",
			"style": "margin: 0 " + margin + "px; width: " + inputWidth + "px; height: " + inputHeight + "px;"

		})



		// Put input in inputDiv
		inputDiv.appendChild(newInput);
	}
	
	// Connect listeners to inputs
	initInputs();
}





//-----------------------
//-----------------------	INIT INPUTS
//-----------------------

// Initiate inputs after they are created
function initInputs() {
	
	// ADD EVENT LISTENERS TO INPUTS
	// Highlight text of focused inputs
	$(".input").on("focus",function(){ highlightText(this);	});
	// Check valid inputs and initiate animation
	$(".input").keyup(function (e) { checkInput(this, e); });
	
	// SET FIRST STATE OF UI
	// Focus and highlight the first input
	//$(".input").first().focus().select();
	
	// START EXPERIENCE
	entrySequence();
}





//-----------------------
//-----------------------	INPUT VALIDATION
//-----------------------

function checkInput(elem, event) {

	// CHECK IF KEYSTROKE IS VALID
	// Get pressed key
	var key = event.which;
	// Check if valid
	if ($.inArray(key, validKeys) != -1) {
		// If valid
		animationSetup(elem);
		moveToNext(elem);
	} else {
		// If not
		highlightText(elem);
	}
	
	// If user hit backspace, move back and erase
	if ( key == 8 ) {
		moveToPrev(elem);
	}

	// INFORM THE USER
	// Check if 
	if ($.inArray(elem.value.toLowerCase(), validInputs)  == -1) {
		// Show error message if invalid
		$(elem).addClass("error");
	} else {
		// Remove error message
		$(elem).removeClass("error");
	}
}





//-----------------------
//-----------------------	ENTRY SEQUENCE
//-----------------------

function entrySequence() {
	if (window.innerWidth < 400) {
		animate(0, "n", 0)
		animate(1, "e", 0)
		animate(2, "r", 0)
		animate(3, "d", 0)		
	} else {
		animate(0, "k", 0)
		animate(1, "i", 0)
		animate(2, "n", 0)
		animate(3, "e", 0)
		animate(4, "t", 0)
		animate(5, "i", 0)
		animate(6, "c", 0)
		animate(7, "space", 0)
		animate(8, "t", 0)
		animate(9, "y", 0)
		animate(10, "p", 0)
		animate(11, "e", 0)
	}
	
	revealScene();
}

function revealScene() {
	TweenMax.to("body", 0.5, { backgroundColor: "hsla(200, 50%, 10%, 1)" });
	TweenMax.from("#userInput", 0.7, { y: "+=60", ease: Back.easeOut, delay: 0.5 });
	TweenMax.to("#userInput", 0.5, { autoAlpha: 1, delay: 0.5 });
	TweenMax.staggerTo(".letterGroup", 0.5, { autoAlpha: 1, delay: 1 }, 0.05);
}





//-----------------------
//-----------------------	SETUP ANIMATION
//-----------------------

function animationSetup(elem) {
	// Get which input box
	var i = elem.dataset.index;

	// Get which input value
	var input = elem.value;

	// Animate to correlating input value
	switch (input) {
		case "":
			animate(i, "space");
			break;
		case ".":
			animate(i, "dot");
			break;
		case " ":
			animate(i, "space");
			break;
		case "-":
			animate(i, "dash");
			break;
		case "_":
			animate(i, "score");
			break;
		default:
			animate(i, input);
	}
}





//-----------------------
//-----------------------	UI BEHAVIOR
//-----------------------

function highlightText(elem) {
	if (window.innerWidth > 400) {
		$(elem).select();
	} else {
		elem.value = "";
	}
}


function moveToNext(elem) {

	// Focus on the next input box
	var $next = $(elem).next('.input');

	if ($next.length) {
		$(elem).next('.input').focus();
	} else {
		$(".input").first().focus();
	}
}

function moveToPrev(elem) {

	// Focus on the next input box
	var $prev = $(elem).prev('.input');

	if ($prev.length) {
		$(elem).prev('.input').focus();
		elem.value = "";
	} else {
		$(".input").last().focus();
		elem.value = "";
	}
}




//-----------------------
//-----------------------	ANIMATE LETTER
//-----------------------

// Initiate animation with correleting input box and character
function animate(index, letter, seconds) {

	// Normalise input
	var letter = letter.toUpperCase();
	
	// Set dynamic references
	letg = "#letterGroup" + index;
	lg = "#linkGroup" + index + "-";
	l = "#link" + index + "-";
	dur = (seconds == undefined) ? 1 : seconds;
	
	// Reset and start animation
	reset(window[letter]);
}


// Resets properties of links and linkgroups before animating the letter
function reset(letterFunc) {
	var allLinkGroups = linkArr(0,numLinks-1);
	var allLinks = linkArr(0,numLinks-1, l);
	TweenMax.to(letg, 0.2, { attr: { "stroke": "hsla(330, " + random(60,65) + "%, " + random(37,50) + ", 1)" } })
	TweenMax.to(allLinkGroups, dur*2, { rotation: 0, autoAlpha: 1 })
	TweenMax.to(allLinks, dur, { autoAlpha: 1 })
	letterFunc();
}

// Tweening the properties of links and linkgroups to form given letter
function A() {
	var first = -1;
	var last = 64;
	var startArr = linkArr(0, first, l);
	TweenMax.to(startArr, dur, { autoAlpha: 0 })
	TweenMax.to(lg+last, dur, { autoAlpha: 0 })
	
	var c1 = linkArr(16, 30)
	
	TweenMax.to(c1, dur, { rotation: 180/c1.length })
	TweenMax.to(lg+36, dur, { rotation: 90 })
	TweenMax.to(lg+45, dur, { rotation: 180 })
	TweenMax.to(lg+54, dur, { rotation: 90 })

}

function B() {
	var first = -1;
	var last = 70;
	var startArr = linkArr(0, first, l);
	TweenMax.to(startArr, dur, { autoAlpha: 0 })
	TweenMax.to(lg+last, dur, { autoAlpha: 0 })
	
	var c1 = linkArr(25, 38);
	var c2 = linkArr(48, 65);

	TweenMax.to(lg+20, dur, { rotation: 90 } )
	TweenMax.to(c1, dur, { rotation: 180/c1.length } )
	TweenMax.to(lg+43, dur, { rotation: -180 } )
	TweenMax.to(c2, dur, { rotation: 180/c2.length } )
}

function C() {
	var first = 4;
	var last = 56;
	var startArr = linkArr(0, first, l);
	TweenMax.to(startArr, dur, { autoAlpha: 0 })
	TweenMax.to(lg+last, dur, { autoAlpha: 0 })
	
	var c1 = linkArr(5, 12);
	var c2 = linkArr(14, 29);
	var c3 = linkArr(40, 55);

	TweenMax.to(lg+0, dur, { rotation: 90 });
	TweenMax.to(c1, dur, { rotation: -90/c1.length });
	TweenMax.to(lg+13, dur, { rotation: -180 });
	TweenMax.to(c2, dur, { rotation: 180/c2.length });
	TweenMax.to(c3, dur, { rotation: 180/c3.length });
}

function D() { 
	var first = -1;
	var last = 54;
	var startArr = linkArr(0, first, l);
	TweenMax.to(startArr, dur, { autoAlpha: 0 })
	TweenMax.to(lg+last, dur, { autoAlpha: 0 })
	
	var c1 = linkArr(24, 32);
	var c2 = linkArr(42, 50);

	TweenMax.to(lg+"20", dur, { rotation: 90 } )
	TweenMax.to(c1, dur, { rotation: 90/c1.length } )
	TweenMax.to(c2, dur, { rotation: 90/c2.length } )
}
function E() {
	var first = -1;
	var last = 61;
	var startArr = linkArr(0, first, l);
	TweenMax.to(startArr, dur, { autoAlpha: 0 })
	TweenMax.to(lg+last, dur, { autoAlpha: 0 })
	
	TweenMax.to(lg+"0", dur, { rotation: 90 } )
	TweenMax.to(lg+"9", dur, { rotation: -180 } )
	TweenMax.to(lg+"18", dur, { rotation: 90 } )
	TweenMax.to(lg+"28", dur, { rotation: 90 } )
	TweenMax.to(lg+"35", dur, { rotation: 180 } )
	TweenMax.to(lg+"42", dur, { rotation: 90 } )
	TweenMax.to(lg+"52", dur, { rotation: 90 } )
}
function F() {
	var first = -1;
	var last = 43;
	var startArr = linkArr(0, first, l);
	TweenMax.to(startArr, dur, { autoAlpha: 0 })
	TweenMax.to(lg+last, dur, { autoAlpha: 0 })
	
	TweenMax.to(lg+"10", dur, { rotation: 90 } )
	TweenMax.to(lg+"17", dur, { rotation: 180 } )
	TweenMax.to(lg+"24", dur, { rotation: 90 } )
	TweenMax.to(lg+"34", dur, { rotation: 90 } )
}
function G() {
	var first = 4;
	var last = 72;
	var startArr = linkArr(0, first, l);
	TweenMax.to(startArr, dur, { autoAlpha: 0 })
	TweenMax.to(lg+last, dur, { autoAlpha: 0 })
	
	var c1 = linkArr(5, 12);
	var c2 = linkArr(30, 45);
	var c3 = linkArr(56, 71);

	TweenMax.to(lg+0, dur, { rotation: 90 });
	TweenMax.to(c1, dur, { rotation: -90/c1.length });
	TweenMax.to(lg+17, dur, { rotation: -90 });
	TweenMax.to(lg+21, dur, { rotation: 180 });
	TweenMax.to(lg+25, dur, { rotation: 90 });
	TweenMax.to(c2, dur, { rotation: 180/c2.length });
	TweenMax.to(c3, dur, { rotation: 180/c3.length });
}

function H() {
	var first = -1;
	var last = 70;
	var startArr = linkArr(0, first, l);
	TweenMax.to(startArr, dur, { autoAlpha: 0 })
	TweenMax.to(lg+last, dur, { autoAlpha: 0 })
	
	TweenMax.to(lg+"20", dur, { rotation: 180 })
	TweenMax.to(lg+"30", dur, { rotation: -90 })
	TweenMax.to(lg+"40", dur, { rotation: 90 })
	TweenMax.to(lg+"50", dur, { rotation: 180 })

}
function I() {
	var first = 1;
	var last = 40;
	var startArr = linkArr(0, first, l);
	TweenMax.to(startArr, dur, { autoAlpha: 0 })
	TweenMax.to(lg+last, dur, { autoAlpha: 0 })

	TweenMax.to(lg+0, dur, { rotation: 90 });
	TweenMax.to(lg+8, dur, { rotation: -180 });
	TweenMax.to(lg+11, dur, { rotation: 90 });
	TweenMax.to(lg+31, dur, { rotation: 90 });
	TweenMax.to(lg+34, dur, { rotation: 180 });

}
function J() {
	var first = 4;
	var last = 48;
	var startArr = linkArr(0, first, l);
	TweenMax.to(startArr, dur, { autoAlpha: 0 })
	TweenMax.to(lg+last, dur, { autoAlpha: 0 })
	
	var c1 = linkArr(5, 12);
	var c2 = linkArr(18, 33);

	TweenMax.to(lg+0, dur, { rotation: 90 });
	TweenMax.to(lg+4, dur, { rotation: -180 });
	TweenMax.to(c1, dur, { rotation: 90/c1.length });
	TweenMax.to(lg+15, dur, { rotation: 180 });
	TweenMax.to(c2, dur, { rotation: -180/c2.length });
}
function K() {
	var first = -1;
	var last = 68;
	var startArr = linkArr(0, first, l);
	TweenMax.to(startArr, dur, { autoAlpha: 0 })
	TweenMax.to(lg+last, dur, { autoAlpha: 0 })
	
	TweenMax.to(lg+"20", dur, { rotation: 180 })
	TweenMax.to(lg+"30", dur, { rotation: -140 })
	TweenMax.to(lg+"43", dur, { rotation: 180 })
	TweenMax.to(lg+"54", dur, { rotation: -75 })
}
function L() {
	var first = -1;
	var last = 38;
	var startArr = linkArr(0, first, l);
	TweenMax.to(startArr, dur, { autoAlpha: 0 })
	TweenMax.to(lg+last, dur, { autoAlpha: 0 })
	
	TweenMax.to(lg+"0", dur, { rotation: 90 } )
	TweenMax.to(lg+"9", dur, { rotation: -180 } )
	TweenMax.to(lg+"18", dur, { rotation: 90 } )
}
function M() {
	var first = -1;
	var last = 60;
	var startArr = linkArr(0, first, l);
	TweenMax.to(startArr, dur, { autoAlpha: 0 })
	TweenMax.to(lg+last, dur, { autoAlpha: 0 })
	
	TweenMax.to(lg+"20", dur, { rotation: 150 })
	TweenMax.to(lg+"30", dur, { rotation: -120 })
	TweenMax.to(lg+"40", dur, { rotation: 150 })
}
function N() {
	var first = -1;
	var last = 62;
	var startArr = linkArr(0, first, l);
	TweenMax.to(startArr, dur, { autoAlpha: 0 })
	TweenMax.to(lg+last, dur, { autoAlpha: 0 })
	
	TweenMax.to(lg+"20", dur, { rotation: 155 })
	TweenMax.to(lg+"42", dur, { rotation: -155 })
}
function O() {
	var first = 4;
	var last = 57;
	var startArr = linkArr(0, first, l);
	TweenMax.to(startArr, dur, { autoAlpha: 0 })
	TweenMax.to(lg+last, dur, { autoAlpha: 0 })
	
	var c1 = linkArr(5, 12);
	var c2 = linkArr(23, 38);
	var c3 = linkArr(49, 56);

	TweenMax.to(lg+0, dur, { rotation: 90 });
	TweenMax.to(lg+4, dur, { rotation: -180 });
	TweenMax.to(c1, dur, { rotation: 90/c1.length });
	TweenMax.to(c2, dur, { rotation: 180/c2.length });
	TweenMax.to(c3, dur, { rotation: 90/c3.length });
}
function P() {
	var first = -1;
	var last = 45;
	var startArr = linkArr(0, first, l);
	TweenMax.to(startArr, dur, { autoAlpha: 0 })
	TweenMax.to(lg+last, dur, { autoAlpha: 0 })
	
	var c1 = linkArr(25, 40);

	TweenMax.to(lg+20, dur, { rotation: 90 } )
	TweenMax.to(c1, dur, { rotation: 180/c1.length } )
}
function Q() {
	var first = 4;
	var last = 68;
	var startArr = linkArr(0, first, l);
	TweenMax.to(startArr, dur, { autoAlpha: 0 })
	TweenMax.to(lg+last, dur, { autoAlpha: 0 })
	
	var c1 = linkArr(5, 12);
	var c2 = linkArr(23, 38);
	var c3 = linkArr(49, 59);

	TweenMax.to(lg+0, dur, { rotation: 90 });
	TweenMax.to(c1, dur, { rotation: -90/c1.length });
	TweenMax.to(c2, dur, { rotation: -180/c2.length });
	TweenMax.to(c3, dur, { rotation: -90/c1.length });
	TweenMax.to(lg+60, dur, { rotation: -105 });
	TweenMax.to(lg+63, dur, { rotation: 180 });
}
function R() {
	var first = -1;
	var last = 61;
	var startArr = linkArr(0, first, l);
	TweenMax.to(startArr, dur, { autoAlpha: 0 })
	TweenMax.to(lg+last, dur, { autoAlpha: 0 })
	
	var c1 = linkArr(25, 40);

	TweenMax.to(lg+20, dur, { rotation: 90 } )
	TweenMax.to(c1, dur, { rotation: 180/c1.length } )
	TweenMax.to(lg+45, dur, { rotation: 180 } )
	TweenMax.to(lg+50, dur, { rotation: 66 } )
}

function S() {
	var first = 4;
	var last = 67;
	var startArr = linkArr(0, first, l);
	TweenMax.to(startArr, dur, { autoAlpha: 0 })
	TweenMax.to(lg+last, dur, { autoAlpha: 0 })
	
	var c1 = linkArr(5, 12);
	var c2 = linkArr(18, 40);
	var c3 = linkArr(43, 65);

	TweenMax.to(lg+0, dur, { rotation: 90 });
	TweenMax.to(lg+4, dur, { rotation: -180 });
	TweenMax.to(c1, dur, { rotation: 90/c1.length });
	TweenMax.to(lg+15, dur, { rotation: 180 });
	TweenMax.to(c2, dur, { rotation: -259.25/(c2.length) });
	TweenMax.to(c3, dur, { rotation: 259.25/c3.length });
}
function T() {
	var first = 3;
	var last = 42;
	var startArr = linkArr(0, first, l);
	TweenMax.to(startArr, dur, { autoAlpha: 0 })
	TweenMax.to(lg+last, dur, { autoAlpha: 0 })

	TweenMax.to(lg+0, dur, { rotation: 90 });
	TweenMax.to(lg+4, dur, { rotation: -90 });
	TweenMax.to(lg+24, dur, { rotation: -90 });
	TweenMax.to(lg+30, dur, { rotation: 180 });
}

function U() {
	var first = 4;
	var last = 73;
	var startArr = linkArr(0, first, l);
	TweenMax.to(startArr, dur, { autoAlpha: 0 })
	TweenMax.to(lg+last, dur, { autoAlpha: 0 })
	
	var c1 = linkArr(6, 13);
	var c2 = linkArr(43, 58);

	TweenMax.to(lg+0, dur, { rotation: 90 });
	TweenMax.to(lg+5, dur, { rotation: -180 });
	TweenMax.to(c1, dur, { rotation: 90/c1.length });
	TweenMax.to(lg+28, dur, { rotation: 180 });
	TweenMax.to(c2, dur, { rotation: -180/c2.length });
}

function V() {
	var first = 3;
	var last = 67;
	var startArr = linkArr(0, first, l);
	TweenMax.to(startArr, dur, { autoAlpha: 0 })
	TweenMax.to(lg+last, dur, { autoAlpha: 0 })

	TweenMax.to(lg+0, dur, { rotation: 90 });
	TweenMax.to(lg+4, dur, { rotation: -105 });
	TweenMax.to(lg+25, dur, { rotation: 180 });
	TweenMax.to(lg+46, dur, { rotation: -150 });
}
function W() {
	var first = 2;
	var last = 72;
	var startArr = linkArr(0, first, l);
	TweenMax.to(startArr, dur, { autoAlpha: 0 })
	TweenMax.to(lg+last, dur, { autoAlpha: 0 })

	TweenMax.to(lg+0, dur, { rotation: 90 });
	TweenMax.to(lg+2, dur, { rotation: -100 });
	TweenMax.to(lg+22, dur, { rotation: 180 });
	TweenMax.to(lg+42, dur, { rotation: -140 });
	TweenMax.to(lg+47, dur, { rotation: 120 });
	TweenMax.to(lg+52, dur, { rotation: -140 });
}
function X() {
	var first = -1;
	var last = 64;
	var startArr = linkArr(0, first, l);
	TweenMax.to(startArr, dur, { autoAlpha: 0 })
	TweenMax.to(lg+last, dur, { autoAlpha: 0 })

	TweenMax.to(lg+0, dur, { rotation: 25 });
	TweenMax.to(lg+22, dur, { rotation: 180 });
	TweenMax.to(lg+32, dur, { rotation: 130 });
	TweenMax.to(lg+42, dur, { rotation: -180 });
}
function Y() {
	var first = 3;
	var last = 52;
	var startArr = linkArr(0, first, l);
	TweenMax.to(startArr, dur, { autoAlpha: 0 })
	TweenMax.to(lg+last, dur, { autoAlpha: 0 })

	var c1 = linkArr(15, 22);
	var c2 = linkArr(32, 47);

	TweenMax.to(lg+0, dur, { rotation: 90 });
	TweenMax.to(lg+4, dur, { rotation: -90 });
	TweenMax.to(lg+14, dur, { rotation: -90 });
	TweenMax.to(c1, dur, { rotation: 90/c1.length });
	TweenMax.to(lg+27, dur, { rotation: 180 });
	TweenMax.to(c2, dur, { rotation: -180/c2.length });
}
function Z() {
	var first = -1;
	var last = 51;
	var startArr = linkArr(0, first, l);
	TweenMax.to(startArr, dur, { autoAlpha: 0 })
	TweenMax.to(lg+last, dur, { autoAlpha: 0 })
	
	TweenMax.to(lg+0, dur, { rotation: 90 })
	TweenMax.to(lg+10, dur, { rotation: -180 })
	TweenMax.to(lg+20, dur, { rotation: 115 })
	TweenMax.to(lg+42, dur, { rotation: -115 })
}

function DOT() {
	var first = 5;
	var last = 15;
	var startArr = linkArr(0, first, l);
	TweenMax.to(startArr, dur, { autoAlpha: 0 })
	TweenMax.to(lg+last, dur, { autoAlpha: 0 })
	
	var c1 = linkArr(6, 15);

	TweenMax.to(lg+0, dur, { rotation: 90 } )
	TweenMax.to(lg+5, dur, { rotation: -90 } )
	TweenMax.to(c1, dur, { rotation: 1000/c1.length } )
}

function SPACE() {
	var first = -1;
	var last = 0;
	var startArr = linkArr(0, first, l);
	TweenMax.to(startArr, dur, { autoAlpha: 0 })
	TweenMax.to(lg+last, dur, { autoAlpha: 0 })
	
	TweenMax.to(lg+0, dur, { rotation: 90 })
}

function DASH() {
	var first = 10;
	var last = 20;
	var startArr = linkArr(0, first, l);
	TweenMax.to(startArr, dur, { autoAlpha: 0 })
	TweenMax.to(lg+last, dur, { autoAlpha: 0 })
	
	TweenMax.to(lg+10, dur, { rotation: 90 })
}

function SCORE() {
	var first = -1;
	var last = 11;
	var startArr = linkArr(0, first, l);
	TweenMax.to(startArr, dur, { autoAlpha: 0 })
	TweenMax.to(lg+last, dur, { autoAlpha: 0 })
	
	TweenMax.to(lg+0, dur, { rotation: 90 })
}




// Show production controls true/false & execute
var showControls = false;
showCtrls();

// Use panel true/false & execute
var showInfoPanel = true;
showPanel();

// Reveal info buttom after seconds, or use as callback
var revealInfoButtonAfterSeconds = 5;
revealInfoIcon();

// Customize panel styles to match pen & execute
var upperPanelColor = "hsla(200, 50%, 15%, 1)",
	lowerPanelColor = "hsla(200, 50%, 5%, 1)",
	rectStroke = "hsla(200, 50%, 40%, 1)",
	iconFill = "hsla(200, 50%, 30%, 0.8)",
	iconStroke = rectStroke;
setPanelColors();
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console