#main
#userInput
.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')
.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
View Compiled
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;
var l;
var lg;
var letg;
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); }
function setAttributes(el, attrs) {
for(var key in attrs) {
el.setAttribute(key, attrs[key]);
}
}
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;
}
$(initScene( createLetters, positionLetters, createInputs ));
function initScene (x,y,z) {
var newSVG = document.createElementNS( svgns, "svg");
setAttributes(newSVG, {
"id": "kineticType",
"xmlns": svgns,
"viewBox": viewBox,
"width": SVGWidth,
"height": SVGHeight
})
var newDefs = document.createElementNS( svgns, "defs");
var newPathTemplate = document.createElementNS( svgns, "path");
setAttributes(newPathTemplate, {
"id": "link",
"d": "M0 0h" + linkLength,
"stroke-linecap": "round",
"stroke-width": strokeWidth
})
var mainGroup = document.createElementNS( svgns, "g");
setAttributes(mainGroup, {
"id": "mainGroup"
})
main.appendChild(newSVG);
newSVG.appendChild(newDefs);
newDefs.appendChild(newPathTemplate);
newSVG.appendChild(mainGroup);
x();
y();
z();
}
function createLetters() {
for (var i = 0; i < numLetters; i++) {
var newLetterGroup = document.createElementNS( svgns, "g");
setAttributes(newLetterGroup, {
"id": "letterGroup" + i,
"class": "letterGroup",
"stroke": "hsla(330, 40%, " + random(40,60) + "%, 1)",
"opacity": "0"
})
var prevLinkGroup;
for (var j = 0; j < numLinks; j++) {
var newLinkGroup = document.createElementNS( svgns, "g");
setAttributes(newLinkGroup, {
"id": "linkGroup" + i + "-" + j,
"class": "linkGroup"
})
var newLink = document.createElementNS( svgns, "use");
newLink.setAttributeNS(xlink, "xlink:href", "#link");
setAttributes(newLink, {
"class": "link",
"id": "link" + i + "-" + j,
"x": j*linkLength
})
newLinkGroup.appendChild(newLink);
if ( j == 0 ) {
newLetterGroup.appendChild(newLinkGroup);
} else {
prevLinkGroup.appendChild(newLinkGroup);
}
prevLinkGroup = newLinkGroup;
}
mainGroup.appendChild(newLetterGroup);
}
}
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 })
}
}
function createInputs() {
for (var i = 0; i < numLetters; i++) {
var inputGroupWidth = document.getElementById("userInput").clientWidth;
var newInput = document.createElement("input");
var margin = (inputGroupWidth-(numLetters*inputWidth))/(numLetters*2);
setAttributes(newInput, {
"id": "index" + i,
"class": "input",
"data-index": i,
"maxlength": "1",
"style": "margin: 0 " + margin + "px; width: " + inputWidth + "px; height: " + inputHeight + "px;"
})
inputDiv.appendChild(newInput);
}
initInputs();
}
function initInputs() {
$(".input").on("focus",function(){ highlightText(this); });
$(".input").keyup(function (e) { checkInput(this, e); });
entrySequence();
}
function checkInput(elem, event) {
var key = event.which;
if ($.inArray(key, validKeys) != -1) {
animationSetup(elem);
moveToNext(elem);
} else {
highlightText(elem);
}
if ( key == 8 ) {
moveToPrev(elem);
}
if ($.inArray(elem.value.toLowerCase(), validInputs) == -1) {
$(elem).addClass("error");
} else {
$(elem).removeClass("error");
}
}
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);
}
function animationSetup(elem) {
var i = elem.dataset.index;
var input = elem.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);
}
}
function highlightText(elem) {
if (window.innerWidth > 400) {
$(elem).select();
} else {
elem.value = "";
}
}
function moveToNext(elem) {
var $next = $(elem).next('.input');
if ($next.length) {
$(elem).next('.input').focus();
} else {
$(".input").first().focus();
}
}
function moveToPrev(elem) {
var $prev = $(elem).prev('.input');
if ($prev.length) {
$(elem).prev('.input').focus();
elem.value = "";
} else {
$(".input").last().focus();
elem.value = "";
}
}
function animate(index, letter, seconds) {
var letter = letter.toUpperCase();
letg = "#letterGroup" + index;
lg = "#linkGroup" + index + "-";
l = "#link" + index + "-";
dur = (seconds == undefined) ? 1 : seconds;
reset(window[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();
}
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 })
}
var showControls = false;
showCtrls();
var showInfoPanel = true;
showPanel();
var revealInfoButtonAfterSeconds = 5;
revealInfoIcon();
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();
