Skip to content

Instantly share code, notes, and snippets.

@mariogarcia-ar

mariogarcia-ar/gsap-3-intro-animation.markdown

Created September 17, 2023 14:54
Show Gist options
  • Save mariogarcia-ar/31ddddfc80808896f5ececdb0e98e25b to your computer and use it in GitHub Desktop.
Save mariogarcia-ar/31ddddfc80808896f5ececdb0e98e25b to your computer and use it in GitHub Desktop.
Download ZIP
GSAP 3 Intro Animation
Raw
index.html
<main>
<div id="force-2-1-aspect-ratio"></div>
<div id="squares">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<h3 id="text-features">Over 50+ new features</h3>
<h3 id="text-half">Half the size</h3>
<h3 id="text-api">Simplified API</h3>
<h3 id="text-motionpath">New MotionPathPlugin</h3>
<h3 id="text-inheritance">Inheritance</h3>
<h3 id="text-utility">Utility methods</h3>
<h3 id="text-staggers">Advanced staggers</h3>
<h4 id="text-utils-animation">
<div class="left">gsap.utils</div>
<div class="right">&nbsp;
<span>.random()</span>
<span>.snap()</span>
<span>.cycle()</span>
<span>.toArray()</span>
<span>.distribute()</span>
<span>.getUnit()</span>
<span>.clamp()</span>
<span>.mapRange()</span>
<span>.interpolate()</span>
<span>.splitColor()</span>
</div>
</h4>
<div id="intro-svg" class="svg-holder">
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 400">
<path id="tb-drop-shadow" class="toolbox" fill="none" stroke="#1C1819" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="16" d="M170 280h460"/>
<!-- text cursors -->
<path id="text-cursor" opacity="0" fill="none" stroke="#FFF" stroke-miterlimit="10" stroke-width="2" d="M236 178c0-2.5 3.5-3 8-3M236 178c0-2.5-3.5-3-8-3M236 224c0 2.5 3.5 3 8 3M236 224c0 2.5-3.5 3-8 3M236 178v46M238.5 201h-5"/>
<path id="caret" opacity="0" fill="none" stroke="#FFF" stroke-miterlimit="10" stroke-width="3" d="M236 178v46"/>
<!-- motion path -->
<g stroke="#8165CF" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10">
<path opacity="0" id="motion-path-visual" fill="none" stroke-width="4" d="M100.8 149.2s74.8-114.7 185.3-85.4 56.5 157.9 165.2 200.9c132.5 52.4 247.8-144 247.8-144"/>
<path opacity="0" id="anchor-1" class="anchor" fill="#DBD3F0" stroke-width="3" d="M91.9 140h18v18h-18z"/>
<path opacity="0" id="anchor-2" class="anchor" fill="#DBD3F0" stroke-width="3" d="M276.9 55h18v18h-18z"/>
<path opacity="0" id="anchor-3" class="anchor" fill="#DBD3F0" stroke-width="3" d="M445.9 256h18v18h-18z"/>
<path opacity="0" id="anchor-4" class="anchor" fill="#DBD3F0" stroke-width="3" d="M690.1 111.7h18v18h-18z"/>
</g>
<!-- sock back -->
<g id="sock-back" class="sock" opacity="0" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="6">
<path fill="#3D7D0A" stroke="#344F00" d="M51 104.5c13.5 8.2 44.4 8.9 61 0-16.6-8.9-47.4-8.2-61 0z"/>
<path stroke="#000" d="M51 104.5c13.5 8.2 44.4 8.9 61 0l-10.1 53.7c-.9 5 2.4 9.8 7.4 10.6L140 174c6.2 1 11 6.4 11 12.7 0 7.1-5.9 12.8-13 12.8H79c-10 0-18.9-8.1-20-18l-8-77z" opacity="0"/>
</g>
<!-- colored socks -->
<g id="sock-red" class="colored-sock" opacity="0">
<path class="red-base" fill="#C22121" d="M245.5 212.4l4 38.5c.5 4.9 5 9 10 9H289c3.5 0 6.5-2.9 6.5-6.4 0-3.1-2.4-5.8-5.5-6.3l-15.4-2.6c-2.5-.4-4.2-2.8-3.7-5.3l5.1-26.8c-10.2 1.9-20.4 1.9-30.5-.1z"/>
<path class="red-stroke red-shadow" fill="#A11515" stroke="#5E0707" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="3" d="M245.5 212.4c6.8 4.1 22.2 4.5 30.5 0-8.3-4.5-23.7-4.1-30.5 0z"/>
<path class="red-shadow" fill="#AD1515" d="M249.5 248.5c10.5-.6 14.3 4.2 14.3 11.3 0 0-13.8 2.3-14.3-11"/>
<path fill="#FFF" d="M294.4 251.7l-19-3.1c-4-.7-6.8-4.5-6.1-8.5l.2-1.2 2.8 5.7 20.2 4.3 1.9 2.8zM245.5 213.9c6.8 4.1 22.2 4.5 30.5 0v3c-8.3 4.5-23.7 4.1-30.5 0v-3z" opacity=".15"/>
<path class="red-shadow" fill="#AD1515" d="M282.6 259.6c1.7-8.4 12.2-6.5 12.2-6.5s1.4 7.1-12.2 6.5z"/>
<path class="red-stroke" fill="none" stroke="#5E0707" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="3" d="M245.5 212.4c6.8 4.1 22.2 4.5 30.5 0l-5.1 26.8c-.5 2.5 1.2 4.9 3.7 5.3l15.4 2.6c3.1.5 5.5 3.2 5.5 6.3 0 3.5-3 6.4-6.5 6.4h-29.5c-5 0-9.5-4.1-10-9l-4-38.4zM273.9 220.9c-8 3.2-20.2 2.9-26.9-.2M273 226.2c-7.8 2.7-19.1 2.4-25.6-.4"/>
</g>
<g id="sock-blue" class="colored-sock" opacity="0">
<path class="blue-base" fill="#214FC2" d="M375 212.4l4 38.5c.5 4.9 5 9 10 9h29.5c3.5 0 6.5-2.9 6.5-6.4 0-3.1-2.4-5.8-5.5-6.3l-15.4-2.6c-2.5-.4-4.2-2.8-3.7-5.3l5.1-26.8c-10.2 1.9-20.4 1.9-30.5-.1z"/>
<path class="blue-stroke blue-shadow" fill="#0D3494" stroke="#0E2457" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="3" d="M375 212.4c6.8 4.1 22.2 4.5 30.5 0-8.3-4.5-23.7-4.1-30.5 0z"/>
<path class="blue-shadow" fill="#1841A8" d="M379 248.5c10.5-.6 14.3 4.2 14.3 11.3 0 0-13.8 2.3-14.3-11"/>
<path fill="#FFF" d="M423.9 251.7l-19-3.1c-4-.7-6.8-4.5-6.1-8.5l.2-1.2 2.8 5.7L422 249l1.9 2.7zM375 213.9c6.8 4.1 22.2 4.5 30.5 0v3c-8.3 4.5-23.7 4.1-30.5 0v-3z" opacity=".1"/>
<path class="blue-shadow" fill="#1841A8" d="M412.1 259.6c1.7-8.4 12.2-6.5 12.2-6.5s1.4 7.1-12.2 6.5z"/>
<path class="blue-stroke" fill="none" stroke="#0E2457" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="3" d="M375 212.4c6.8 4.1 22.2 4.5 30.5 0l-5.1 26.8c-.5 2.5 1.2 4.9 3.7 5.3l15.4 2.6c3.1.5 5.5 3.2 5.5 6.3 0 3.5-3 6.4-6.5 6.4H389c-5 0-9.5-4.1-10-9l-4-38.4zM403.4 220.9c-8 3.2-20.2 2.9-26.9-.2M402.5 226.2c-7.8 2.7-19.1 2.4-25.6-.4"/>
</g>
<g id="sock-yellow" class="colored-sock" opacity="0">
<path class="yellow-base" fill="#C7B40E" d="M501.1 212.4l4 38.5c.5 4.9 5 9 10 9h29.5c3.5 0 6.5-2.9 6.5-6.4 0-3.1-2.4-5.8-5.5-6.3l-15.4-2.6c-2.5-.4-4.2-2.8-3.7-5.3l5.1-26.8c-10.2 1.9-20.3 1.9-30.5-.1z"/>
<path class="yellow-stroke yellow-shadow" fill="#9E8E02" stroke="#403900" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="3" d="M501.1 212.4c6.8 4.1 22.2 4.5 30.5 0-8.3-4.5-23.7-4.1-30.5 0z"/>
<path class="yellow-shadow" fill="#B39F02" d="M505.1 248.5c10.5-.6 14.3 4.2 14.3 11.3 0 0-13.8 2.3-14.3-11"/>
<path fill="#FFF" d="M550 251.7l-19-3.1c-4-.7-6.8-4.5-6.1-8.5l.2-1.2 2.8 5.7 20.2 4.3 1.9 2.8zM501.1 213.9c6.8 4.1 22.2 4.5 30.5 0v3c-8.3 4.5-23.7 4.1-30.5 0v-3z" opacity=".2"/>
<path class="yellow-shadow" fill="#B39F02" d="M538.2 259.6c1.7-8.4 12.2-6.5 12.2-6.5s1.4 7.1-12.2 6.5z"/>
<path class="yellow-stroke" fill="none" stroke="#403900" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="3" d="M501.1 212.4c6.8 4.1 22.2 4.5 30.5 0l-5.1 26.8c-.5 2.5 1.2 4.9 3.7 5.3l15.4 2.6c3.1.5 5.5 3.2 5.5 6.3 0 3.5-3 6.4-6.5 6.4h-29.5c-5 0-9.5-4.1-10-9l-4-38.4zM529.5 220.9c-8 3.2-20.2 2.9-26.9-.2M528.6 226.2c-7.8 2.7-19.1 2.4-25.6-.4"/>
</g>
<!-- sock front -->
<g id="sock-front" class="sock" opacity="0">
<path fill="#57A818" d="M51 104.5l8 77c1.1 9.9 10 18 20 18h59c7.1 0 13-5.8 13-12.8 0-6.3-4.8-11.6-11-12.7l-30.7-5.2c-5-.8-8.4-5.6-7.4-10.6l10.1-53.7c-21.3 8.7-41.6 8.5-61 0z"/>
<path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="6" d="M51 104.5c13.5 8.2 44.4 8.9 61 0-16.6-8.9-47.4-8.2-61 0z" opacity="0"/>
<path fill="#499110" d="M59 176.9c21-1.1 28.6 8.4 28.6 22.6 0 0-27.7 4.6-28.6-22"/>
<path fill="#FFF" d="M148.7 183.3l-38.1-6.3c-8.1-1.3-13.5-9-12.1-17l.4-2.4 5.5 11.4 40.5 8.6 3.8 5.7zM51 107.5c13.5 8.2 44.4 8.9 61 0v6c-16.6 8.9-47.5 8.2-61 0v-6z" opacity=".15"/>
<path fill="#499110" d="M125.2 198.9c3.5-16.8 24.4-12.9 24.4-12.9s2.8 14.3-24.4 12.9z"/>
<path fill="none" stroke="#344F00" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="6" d="M51 104.5c13.5 8.2 44.4 8.9 61 0l-10.1 53.7c-.9 5 2.4 9.8 7.4 10.6L140 174c6.2 1 11 6.4 11 12.7 0 7.1-5.9 12.8-13 12.8H79c-10 0-18.9-8.1-20-18l-8-77zM107.7 121.5c-15.9 6.3-40.4 5.7-53.8-.4M106 132.2c-15.6 5.5-38.1 4.8-51.2-.7"/>
</g>
<path id="box-top-inner" fill="#365E1A" stroke="#344F00" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="6" d="M475 111H325l-20 14h190z"/>
<!-- hand -->
<g id="hand" opacity="0">
<path fill="#FFF" d="M430 204v4c0 14.1-11.4 25.6-25.6 25.6h-2.1c-4.3 0-8.1-1.7-10.9-4.5-.7-.7-1.3-1.5-1.9-2.3l-7.4-8L387 204"/>
<path fill="#FFF" stroke="#231F20" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="6" d="M387 206.7l-6-7.4c-2.3-2.8-6.4-3.4-9.4-1.3-1.8 1.3-2.2 3.8-.9 5.6l13.9 18.7"/>
<path fill="#FFF" stroke="#231F20" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="6" d="M397.7 204v-32.3c0-3-2.4-5.4-5.4-5.4-3 0-5.4 2.4-5.4 5.4v34.9M408.5 204v-16.1c0-3-2.4-5.4-5.4-5.4-3 0-5.4 2.4-5.4 5.4V204"/>
<path fill="#FFF" stroke="#231F20" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="6" d="M419.2 204v-13.4c0-3-2.4-5.4-5.4-5.4-3 0-5.4 2.4-5.4 5.4V204M430 204v-10.8c0-3-2.4-5.4-5.4-5.4-3 0-5.4 2.4-5.4 5.4V204"/>
<path fill="none" stroke="#231F20" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="6" d="M430 204v4c0 14.1-11.4 25.6-25.6 25.6-9.3 0-17.7-8.3-19.7-11.4"/>
</g>
<!-- toolbox -->
<g class="toolbox">
<path id="tb-handle" fill="none" stroke="#365E1A" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="16" d="M458 124V98.9c0-11-8.9-19.9-19.9-19.9H362c-11 0-19.9 8.9-19.9 19.9V124"/>
<!-- boxes -->
<path id="box-shadow-4" class="box-shadow" fill="none" stroke="#1C1819" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="16" d="M590 265h180"/>
<path id="box-shadow-3" class="box-shadow"fill="none" stroke="#1C1819" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="16" d="M404 265h180"/>
<path id="box-shadow-2" class="box-shadow" fill="none" stroke="#1C1819" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="16" d="M216 265h180"/>
<path id="box-shadow-1" class="box-shadow" fill="none" stroke="#1C1819" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="16" d="M30 265h180"/>
<g id="box-5">
<path id="box-top-r" class="box-top" fill="#41850B" stroke="#344F00" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="6" d="M475 124.9h-75v.1h95z"/>
<path id="box-top-l" class="box-top" fill="#41850B" stroke="#344F00" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="6" d="M325 124.9h75v.1h-95z"/>
<path id="box-5-body" fill="#57A818" stroke="#344F00" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="6" d="M305 125h190v150H305z"/>
<text transform="translate(361.12 207.27)" font-size="32" fill="#fff" font-family="SignikaNegative-Bold, Signika Negative" font-weight="700">GSAP</text>
</g>
<g id="box-4" class="box">
<path fill="#57A818" stroke="#344F00" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="6" d="M320 138h160v124H320z"/>
<text transform="translate(351.11 202.93)" font-size="18" fill="#fff" font-family="SignikaNegative-Bold, Signika Negative" font-weight="700" letter-spacing="-0.07em">TimelineLite</text>
</g>
<g id="box-3" class="box">
<path fill="#57A818" stroke="#344F00" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="6" d="M320 138h160v124H320z"/>
<text transform="translate(349.83 202.93)" font-size="18" fill="#fff" font-family="SignikaNegative-Bold, Signika Negative" font-weight="700" letter-spacing="-0.07em">TimelineMax</text>
</g>
<g id="box-2" class="box">
<path fill="#57A818" stroke="#344F00" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="6" d="M320 138h160v124H320z"/>
<text transform="translate(360.29 202.93)" font-size="18" fill="#fff" font-family="SignikaNegative-Bold, Signika Negative" font-weight="700" letter-spacing="-0.07em">TweenLite</text>
</g>
<g id="box-1" class="box">
<path fill="#57A818" stroke="#344F00" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="6" d="M320 138h160v124H320z"/>
<text transform="translate(359.01 202.93)" font-size="18" fill="#fff" font-family="SignikaNegative-Bold, Signika Negative" font-weight="700" letter-spacing="-0.07em">TweenMax</text>
</g>
<path id="tb-body-side-bg" class="tb-body-side" opacity="0" fill="#41850B" d="M305 185h190v90H305z"/>
<path id="tb-lid-side-bg" class="tb-lid-side" opacity="0" fill="#41850B" d="M300 125h200v60H300z"/>
<path id="tb-body-inner" fill="#365E1A" stroke="#344F00" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="6" d="M600 184.8H200l10 .2h380z"/>
<path id="tb-body-bg" class="tb-body" fill="#57A818" d="M210 185h380v90H210z"/>
<path id="tb-body-latch-r" class="tb-body-latch" fill="#365E1A" d="M488 185h20v20h-20z"/>
<path id="tb-body-latch-l" class="tb-body-latch" fill="#365E1A" d="M292 185h20v20h-20z"/>
<path id="tb-shadow" fill="#231F20" d="M210 185h380v14H210z" opacity=".15"/>
<path id="tb-body-border" class="tb-body" fill="none" stroke="#344F00" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="6" d="M210 185h380v90H210z"/>
<path id="tb-body-side-border" class="tb-body-side" opacity="0" fill="none" stroke="#344F00" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="6" d="M305 185h190v90H305z"/>
<path id="tb-lid-inner" fill="#41850B" stroke="#344F00" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" d="M200 184h400v1H200z"/>
<path id="tb-lid-bg" class="tb-lid" fill="#57A818" d="M200 125h400v60H200z"/>
<path id="tb-highlight" fill="#FFF" d="M200 125h400v14H200z" opacity=".15"/>
<path id="tb-lid-side-border" class="tb-lid-side" opacity="0" fill="none" stroke="#344F00" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="6" d="M300 125h200v60H300z"/>
<path id="tb-lid-border" class="tb-lid" fill="none" stroke="#344F00" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="6" d="M200 125h400v60H200z"/>
<path id="tb-lid-latch-r" class="tb-lid-latch" fill="#365E1A" d="M486 170h24v22h-24z"/>
<path id="tb-lid-latch-l" class="tb-lid-latch" fill="#365E1A" d="M290 170h24v22h-24z"/>
<g id="tb-sparkle-1" class="tb-sparkle" fill="none" stroke="#FFF" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2">
<path d="M531 119v9"/>
<path d="M522 128h9"/>
<path d="M540 128h-9"/>
<path d="M531 137v-9"/>
</g>
<g id="tb-sparkle-2" class="tb-sparkle" fill="none" stroke="#FFF" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="3">
<path d="M601 177h-12"/>
<path d="M589 189v-12"/>
<path d="M589 165v12"/>
<path d="M577 177h12"/>
</g>
<g id="tb-sparkle-3" class="tb-sparkle" fill="none" stroke="#FFF" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="4">
<path d="M249 186v-15"/>
<path d="M249 156v15"/>
<path d="M234 171h15"/>
<path d="M264 171h-15"/>
</g>
</g>
<!-- colors -->
<g id="colors" opacity="0" clip-path="url(#logo-mask-main)">
<path fill="none" stroke="#18B3F5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="20" d="M282 17v213"/>
<path fill="none" stroke="#FFAA3B" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="20" d="M482.5 17.5v213"/>
<path fill="none" stroke="#18B3F5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="20" d="M486 17v213"/>
<path fill="none" stroke="#FCE644" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="20" d="M508.5 17.5v213"/>
<path fill="none" stroke="#FFAA3B" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="20" d="M335.5 17.5v213"/>
<path fill="none" stroke="#FFAA3B" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="20" d="M445 18v213"/>
<path fill="none" stroke="#8512FF" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="20" d="M464.5 17.5v213"/>
<path fill="none" stroke="#8512FF" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="20" d="M406 18v213"/>
<path fill="none" stroke="#EE3DF7" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="20" d="M529.5 17.5v213"/>
<path fill="none" stroke="#EE3DF7" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="20" d="M360 18v213"/>
<path fill="none" stroke="#F73D3D" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="20" d="M424.5 17.5v213"/>
<path fill="none" stroke="#F73D3D" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="20" d="M309 18v213"/>
<path fill="none" stroke="#2C48F5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="20" d="M383.5 17.5v213"/>
<path fill="none" stroke="#18B3F5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="20" d="M536 17v213"/>
<path fill="none" stroke="#18B3F5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="20" d="M332 17v213"/>
<path fill="none" stroke="#FCE644" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="20" d="M309.5 17.5v213"/>
<path fill="none" stroke="#8512FF" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="20" d="M406 18v213"/>
<path fill="none" stroke="#FFAA3B" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="20" d="M482.5 17.5v213"/>
<path fill="none" stroke="#FFAA3B" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="20" d="M373 18v213"/>
<path fill="none" stroke="#8512FF" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="20" d="M353.5 17.5v213"/>
<path fill="none" stroke="#8512FF" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="20" d="M412 18v213"/>
<path fill="none" stroke="#EE3DF7" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="20" d="M288.5 17.5v213"/>
<path fill="none" stroke="#EE3DF7" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="20" d="M458 18v213"/>
<path fill="none" stroke="#8512FF" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="20" d="M406 18v213"/>
<path fill="none" stroke="#F73D3D" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="20" d="M393.5 17.5v213"/>
<path fill="none" stroke="#F73D3D" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="20" d="M509 18v213"/>
<path fill="none" stroke="#FFAA3B" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="20" d="M335.5 17.5v213"/>
<path fill="none" stroke="#2C48F5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="20" d="M434.5 17.5v213"/>
</g>
<!-- gsap 3 logo -->
<defs>
<clipPath id="logo-mask-main">
<path id="logo-mask-main-path" fill="#FFF" d="M0 0h800v582H0z"/>
</clipPath>
<mask id="logo-3-mask">
<path id="mask-3" fill="#fff" d="M637.37,113.04l-17.08,13.32c-1.84,1.41-3.95,2.82-6.33,4.22c7.82,0.97,13.38,4.14,16.66,9.5
c3.28,5.36,3.58,12.43,0.89,21.2c-3.32,10.83-9.71,19.39-19.17,25.67c-9.46,6.28-19.6,9.42-30.43,9.42
c-13.97,0-24.26-3.9-30.85-11.7c3.02-5.95,8.04-11.21,15.07-15.76c5.09,5.31,11.31,7.96,18.68,7.96c5.2,0,9.82-1.49,13.88-4.47
c4.05-2.98,6.82-6.88,8.3-11.7c1.48-4.82,1.22-8.55-0.78-11.21c-2-2.65-4.87-3.98-8.61-3.98c-3.74,0-7.27,0.65-10.59,1.95
c-1.68-0.86-2.99-2.52-3.92-4.96c-0.93-2.44-1.35-5.06-1.24-7.88l20.96-16.41c6.79-5.2,11.5-8.55,14.14-10.07l-0.3-1.14
c-4.84,1.3-10.38,0.81-16.77,0.81h-23.14c-0.22-2.82,0.26-6.15,1.44-9.99c1.18-3.84,2.94-7.28,5.28-10.32h61.32
c1.42,5.96,1.52,11.84,0.44,15.35C644.12,106.41,641.51,109.79,637.37,113.04z"/>
</mask>
</defs>
<g clip-path="url(#logo-mask-main)">
<g id="gsap-3-logo" opacity="0">
<g class="logo-guy">
<path class="guy-outline" d="M232.84,262.26c-4-2.07-8.41-3.29-12.49-5.22c-2.85-1.35-5.58-2.92-8.19-4.69c-1.36-0.93-2.7-1.85-4.12-2.7
c-1.05-0.63-2.35-1.27-3.14-2.24c-1.02-1.26-0.79-3.5-0.84-5.02c-0.1-3.04-0.08-6.09-0.04-9.14c0.08-6.15,0.9-12.06,2.11-18.08
c0.55-2.74,1.54-5.76,1.47-8.58c-0.06-2.2-1.44-2.41-3.3-2.05c0.36-1.59,0.66-3.21,1.08-4.79c0.43-1.61,1.37-3.09,1.85-4.72
c0.71-2.41,1-4.96,0.82-7.47c-0.05-0.66-0.25-1.35-0.26-2.01c-0.01-0.6,0.05-0.62,0.46-1.2c1.25-1.77,2.19-3.73,2.91-5.77
c3.14-8.95,2.54-19.11,1.3-28.35c-0.54-4.02-1.27-8.01-2.19-11.96c2.59,1.23,5.41,2.22,8.29,2.38c0.59,0.03,2.22,0.23,2.74-0.19
c4.07-2.24,6.59-6.69,8.31-10.9c0.23-0.58,0.41-1.19,0.66-1.76c0.29-0.66,0.77-1.06,1.28-1.61c2.04-2.22,3.83-4.69,5.22-7.37
c2.57-4.97,3.75-10.94,1.51-16.25c-0.55-1.3-1.28-2.52-2.15-3.63c-0.43-0.54-0.89-1.06-1.37-1.55c-0.27-0.27-0.74-0.58-0.95-0.89
c-0.41-0.17-0.46-0.43-0.17-0.8c0.1-0.33,0.2-0.66,0.28-1c0.74-3.08,0.5-6.33-0.67-9.28c-0.42-1.05-0.94-2.07-1.59-3
c-0.14-0.21-0.65-0.65-0.69-0.89c-0.07-0.45,0.54-1.51,0.67-1.99c0.66-2.43,0.84-5,0.49-7.49c-0.43-3.09-1.7-6.02-3.62-8.49
c-0.98-1.26-2.11-2.42-3.39-3.38c-1.36-1.01-3.58-1.51-4.48-2.89c-1.29-1.97-2.39-3.91-5.04-3.64c-0.22,0.02-0.5,0.12-0.71,0.11
c-0.62-0.03-0.34-0.01-0.79-0.42c-0.34-0.3-0.56-0.75-0.88-1.08c-0.78-0.83-1.61-1.12-2.75-0.97c-0.32,0.04-1.44,0.5-1.64,0.39
c-0.23-0.13-0.5-0.89-0.65-1.11c-0.92-1.34-2.34-2.33-3.71-3.18c-1.34-0.83-2.83-1.45-4.4-1.7c-0.84-0.13-1.7-0.16-2.55-0.07
c-0.54,0.05-1.93,0.55-2.2,0.3c-0.56-0.54-0.31-2.72-0.33-3.35c-0.05-1.76-0.12-3.52-0.19-5.28c-0.12-2.92,0.09-5.66,0.39-8.56
c0.58-5.6,1.44-11.28,1.23-16.91c-0.09-2.39-0.24-5.3-1.7-7.31c-1.05-1.43-2.73-2.31-4.35-2.92c-4.24-1.6-9.08-1.81-13.55-1.42
c-3.54,0.31-8.26,0.93-10.91,3.59c-1.05,1.05-1.24,2.64-1.48,4.05c-0.43,2.64-0.62,5.32-0.69,7.99c-0.14,4.9,0.32,9.88,1.27,14.69
c0.26,1.33-0.03,2.67-0.2,4.01c-0.13,1-0.27,2.01-0.43,3.01c-0.12,0.74-0.13,2.2-0.53,2.83c-0.55,0.88-2.31,1.06-3.21,1.29
c-0.97,0.25-1.46,0.4-2.4,0.11c-0.96-0.3-1.87-0.54-2.87-0.31c-1.33,0.3-2.43,1.23-3.52,1.98c-0.62,0.43-1.19,1-1.88,0.86
c-0.5-0.1-1.06-0.48-1.54-0.65c-1.15-0.39-2.56-0.76-3.76-0.4c-1.53,0.46-2.84,1.77-4.22,2.54c-0.32,0.18-0.68,0.42-1.03,0.52
c-0.68,0.19-0.39,0.08-0.99-0.03c-0.57-0.1-1.09-0.37-1.68-0.41c-1.49-0.12-2.93,0.52-4.25,1.15c-1.46,0.69-2.84,1.55-4.09,2.56
c-1.45,1.17-3.53,1.35-5.34,1.84c-13.27,3.56-26.3,8.06-39.1,13.04c-7.27,2.82-14.26,5.85-21.16,9.47
c-10.64,5.58-21.59,11.27-31.17,18.58c-10.28,7.86-19.11,18.35-25.06,29.84c-2.71,5.23-4.76,10.81-5.89,16.59
c-0.26,1.32-2.05,10.28,1.2,9.92c1.22-0.13,2.11-1.65,2.88-2.46c1.2-1.27,2.5-2.45,3.81-3.62c3.66-3.27,7.48-6.38,11.35-9.4
c3.96-3.09,7.99-6.1,12.18-8.87c2.62-1.73,5.41-3.09,8.1-4.7c0.62-0.37,1.22-0.77,1.83-1.16c0.6-0.38,1.19-0.76,1.79-1.14
c0.35-0.22,1.96-1.57,2.38-1.49c0.73,0.13,2.06,2.18,2.51,2.77c0.84,1.1,1.59,2.27,2.25,3.48c2.87,5.3,4.15,11.35,5.08,17.25
c0.97,6.14,1.36,12.22,4.02,17.93c2.16,4.64,5.43,8.68,9.49,11.8c4.06,3.11,8.8,5.26,13.72,6.58c5.76,1.55,11.51,1.65,17.41,1.92
c9.7,0.44,19.58,2.08,26.86,9c3.57,3.39,5.96,8.46,10.76,10.24c-4.5,8.34-4.41,17.95-4.53,27.16c-0.06,4.41-0.07,8.81-0.18,13.22
c-0.08,3.08,0.07,6.38-0.53,9.42c-0.37,1.86-1.66,3.4-2.21,5.23c-0.64,2.13-1.1,4.05-2.32,5.95c-1.2,1.87-2.4,3.69-2.96,5.88
c-0.93,3.6-0.31,7.47,2.88,9.67c2.88,1.99,6.43,3.05,9.87,3.47c3.88,0.47,8.06,0.12,11.87-0.79c1.95-0.47,3.6-1.33,3.97-3.45
c0.43-2.54-0.23-5.4-0.93-7.84c-0.46-1.59-0.92-3.21-1.07-4.87c-0.14-1.55,0.52-2.91,0.42-4.43c-0.06-0.86-0.27-1.7-0.49-2.52
c-0.15-0.54-0.55-1.32-0.51-1.9c0.03-0.32,0.2-0.45,0.35-0.75c0.35-0.73,0.48-1.63,0.61-2.42c0.47-2.81,0.17-5.74,0.41-8.58
c0.15-1.82,0.38-3.66,0.9-5.41c0.49-1.65,1.29-3.22,1.95-4.81c0.99-2.39,1.85-4.88,3.13-7.13c1.11-1.96,2.09-4,2.85-6.12
c1.11-3.08,1.72-6.45,2.06-9.7c0.11-1.06,0.17-2.12,0.2-3.19c0.01-0.58,0.01-1.16,0.01-1.74c-0.01-0.59-0.28-1.81-0.1-2.36
c0.11-0.34,0.58-0.72,0.8-0.99c0.49-0.61,0.96-1.24,1.35-1.92c0.44-0.76,0.8-1.58,1.05-2.42c0.16-0.55,0.15-1.78,0.45-2.2
c0.26-0.37,1.14-0.7,1.51-0.95c2.61-1.79,4.95-3.98,6.99-6.39c1.5-1.77,2.84-3.67,4-5.68c0.81,2.76,1.77,5.48,2.48,8.28
c0.29,1.15,0.54,2.32,0.66,3.5c0.05,0.53,0.08,1.06,0.08,1.59c-0.01,1-0.3,1.08-1.08,1.72c-3.35,2.77-6.63,6.08-7.73,10.43
c-3.97-1.86-3.89,2.9-3.81,5.45c0.14,4.4,0.83,8.89,2.04,13.12c0.67,2.33,1.72,4.52,2.57,6.79c0.98,2.61,1.76,5.29,2.32,8.02
c0.63,3.06,1.01,6,0.58,9.11c-0.39,2.83-1.2,5.59-2.14,8.28c-1.07,3.06-2.38,5.88-1.43,9.19c1.21,4.22,5.15,5.19,8.99,5.65
c9.36,1.12,18.8-0.15,28.17,0.91c6.14,0.69,12.97,2.07,19,0.05c1.85-0.62,4.27-1.78,4.77-3.89
C236.07,264.62,234.42,263.09,232.84,262.26z M149.95,135.22c-0.68-0.34-0.46-0.43-0.59-0.95c-0.18-0.72-0.55-0.99-1.17-1.45
c-1.4-1.02-2.87-2.05-3.89-3.47c-0.92-1.28-1.29-2.77-1.22-4.34c0.02-0.48,0.09-0.95,0.17-1.42c0.09-0.51,0.14-0.51-0.15-0.9
c-0.51-0.69-1.59-1.24-2.28-1.74c-6.17-4.43-13.12-7.59-19.6-11.51c-2.85-1.72-5.68-3.6-8.03-5.99c-2.39-2.44-3.68-5.34-4.65-8.59
c-0.88-2.92-1.19-5.84,0.87-8.31c2.71-3.27,4.34-6.76,5.42-10.85c0.89-3.36,1.64-6.9,5.04-8.57c4.28-2.1,8.18,0.94,10.61,4.33
c-0.8-3.11-2.8-5.42-5.47-7.1c-1.03-0.65-0.97-0.86-0.77-2.21c0.28-1.86,1.03-3.62,2.12-5.14c2.26-3.16,5.8-5.3,9.47-6.42
c3.76-1.15,8.23-1.75,12.09-0.78c0.86,0.22,1.63,0.68,2.46,0.97c1.19,0.42,2.43,0.68,3.67,0.88c2.49,0.4,5.04,0.52,7.56,0.48
c2.49-0.04,4.95-0.49,7.44-0.44c1.97,0.05,3.89,0.32,5.8,0.78c4.25,1.03,8.63,2.8,13.07,2.19c2.13-0.29,4.16-1.09,6.24-1.62
c2.15-0.55,4.62-1.26,6.78-0.44c2.98,1.13,5.77,2.19,8.46,3.93c1.19,0.77,2.44,1.55,3.5,2.5c1.28,1.15,2.18,2.68,2.95,4.21
c1.04,2.08,1.76,4.32,2.11,6.62c0.28,1.82,0.8,4.7-0.52,6.24c-1.87,2.18-6.06-0.82-8.02-1.6c-9.05-3.6-18.97-3.44-28.45-1.67
c-4.18,0.78-8.24,2.41-12.51,2.66c-2.8,0.16-5.18-0.74-7.56-2.14c-1.87-1.1-3.67-2.34-5.44-3.6c-0.89-0.63-1.77-1.27-2.64-1.92
c-0.5-0.37-0.97-0.97-1.39-0.72c-0.54,0.32-1.03,1.79-1.36,2.33c-0.47,0.78-0.78,1.23-0.88,2.13c-0.18,1.66-0.56,3.29-1.05,4.88
c-1.9,6.03-8.09,15.85-15.57,11.22c-1.84-1.14-3.87-1.97-5.89-2.76c4.01,3.23,7.57,6.79,9.9,11.44c2.14,4.26,3.71,8.7,6.22,12.78
c1.61,2.62,3.45,5.09,5.48,7.39c0.61,0.69,0.8,1.08,1.63,1.22c0.59,0.1,1.22,0.05,1.82,0.12c1.48,0.16,2.95,0.48,4.33,1.02
c2.61,1.01,4.56,2.91,6.54,4.82c0.68,0.66,1.67,1.56,1.63,2.61c-0.04,1.11-1.18,2.2-1.86,2.98c-1.47,1.69-3.06,3.11-4.83,4.47
c-0.85,0.65-1.72,1.52-2.64,2.03C153.33,136.71,151.45,135.96,149.95,135.22z M150.7,136.43c-2.16-0.09-2.9-1.85-4.72-2.57
C146.55,133.39,150.22,136.05,150.7,136.43z M158.28,113.65c-0.18,1.23-0.31,2.46-0.42,3.69c-1.86-0.67-3.83-1.04-5.79-1.26
c-0.43-0.05-1.18,0.04-1.57-0.14c-0.77-0.35-1.77-2.2-2.27-2.86c-1.98-2.64-3.76-5.45-5.1-8.47c-1.74-3.93-2.42-8.31-4.79-11.94
c1.36-0.5,2.52-1.42,3.84-1.94c0.59-0.23,0.28-0.27,0.79,0.12c0.32,0.25,0.6,0.67,0.88,0.97c0.58,0.62,1.17,1.22,1.79,1.81
c2.21,2.13,4.64,4.02,7.16,5.75c1.03,0.71,2.69,1.38,3.52,2.31c0.65,0.73,0.72,2.52,0.91,3.52c0.54,2.8,0.98,5.63,1.51,8.43
C158.6,113.65,158.42,113.68,158.28,113.65z M163.18,109.97c-0.55-2.84-1.03-5.71-1.33-8.59c-0.08-0.72-0.15-0.89,0.52-1.26
c0.54-0.3,1.08-0.6,1.6-0.94c1.14-0.75,2.15-1.65,3.1-2.63c-3.15,0.5-6.07,0.65-8.97-0.82c-2.93-1.48-5.38-3.96-7.61-6.32
c-0.58-0.62-1.15-1.24-1.71-1.89c-0.27-0.32-0.7-0.69-0.89-1.07c-0.29-0.59-0.36-0.41,0.08-1c0.97-1.3,1.77-2.71,2.36-4.22
c0.67-1.69,1.08-3.48,1.23-5.29c0.08-0.94,0.1-1.88,0.05-2.82c-0.02-0.41-0.23-1.11-0.12-1.5c0.14-0.5,0.83-1.16,1.13-1.61
c2.49,3.65,7.18,5.99,11.15,7.58c2.85,1.14,5.39,1.58,8.41,0.94c2.82-0.6,5.6-1.35,8.45-1.85c5.73-1,11.6-1.42,17.41-0.83
c2.81,0.29,5.6,0.82,8.31,1.64c1.32,0.4,2.63,0.86,3.9,1.39c0.58,0.24,1.28,0.45,1.8,0.8c0.57,0.39,0.51,0.6,0.58,1.31
c0.43,4.75-1.02,8.9-3.03,13.11c-1.54,3.23-2.79,6.56-3.56,10.06c-0.52,2.38-0.84,4.81-0.99,7.24c-0.08,1.35-0.12,2.71-0.11,4.07
c0,0.49,0.23,1.63,0.05,2.08c-0.16,0.41-0.11,0.22-0.58,0.35c-1.45,0.39-3.18,0.33-4.66,0.45c-2.21,0.17-4.42,0.3-6.64,0.36
c-4.78,0.14-9.55,0.09-14.15-1.34c-3.03-0.94-5.98-2.16-8.86-3.5C167.84,112.83,164.99,111.75,163.18,109.97z M218.89,118.28
c-1.5,0.89-3.52,0.59-5.17,0.46c-2.23-0.18-3.76,0.02-5.5,1.55c0.5-5.84,0.73-11.55,2.63-17.17c1.07,0.97,2.44,1.53,3.83,1.87
c-1.34,2.84-1.37,5.8,0.43,8.42C216.21,115,218.31,116.37,218.89,118.28z M227.39,81.52c2.7,3.1,4.42,7.32,4.11,11.46
c-0.15,2.05-0.46,3.74-2.27,4.79c-2,1.16-3.7,2.4-4.92,4.42c2.39-1.36,5.61-2.92,8.42-1.99c2.59,0.86,3.57,3.75,3.86,6.21
c0.76,6.65-3.13,13.51-7.44,18.28c-0.08-0.16-0.16-0.32-0.23-0.48c-0.54,2.24-1.16,4.42-2.21,6.48c-1.32,2.61-3.47,6.23-6.32,7.35
c-2.73,1.08-6.21-0.42-8.56-1.84c-0.62-0.37-1.33-0.72-1.88-1.18c-0.64-0.53-0.59-1.14-0.77-2c-0.3-1.47-0.67-2.95-0.84-4.45
c-0.05-0.46-0.06-0.9-0.07-1.36c-0.02-0.6-0.3-1.7-0.09-2.21c0.23-0.57,1.24-1.31,1.72-1.8c0.68-0.71,1.5-1.32,2.41-1.7
c1.48-0.62,3.08-0.36,4.64-0.49c1.29-0.11,2.76-0.26,3.93-0.85c0.93-0.48,0.63-1.31,0.38-2.22c-0.42-1.5-1.44-2.68-2.33-3.93
c-1.28-1.79-2.03-3.69-2.03-5.92c0-1.13-0.06-3.01,0.6-3.97c0.65-0.94,2.31-1.12,3.31-1.2c-1.63-0.31-3.32-0.57-4.86-1.22
c-0.67-0.28-1.3-0.65-1.9-1.07c-0.37-0.26-0.72-0.55-1.07-0.85c-0.62-0.53-0.65-0.49-0.29-1.3c1.59-3.54,4.04-6.85,4.45-10.79
c0.15-1.48,0.11-3-0.1-4.47c-0.02-0.15-0.22-0.73-0.15-0.88c0.18-0.4,2.24-0.99,2.72-1.24c1.87-1,2.26-2.09,2.53-4.18
c0.26-2.02,0.1-4.08-0.4-6.06c-1.12-4.44-3.85-8.4-7.14-11.52c6.09-0.51,11.29,2.63,13.68,8.31
C230.18,72.21,229.18,77.11,227.39,81.52z M166.05,41.07c0.37-1.97,0.62-3.92,0.76-5.92c1.04,1.05,2.07,2.09,3.14,3.11
c0.76,0.73,1.55,1.63,2.5,2.11c1.98,1,4.68,0.69,6.82,0.69c2.17,0,4.93,0.55,7.01-0.19c2.29-0.81,4.41-2.92,6.13-4.56
c0.17,2.41,0.34,4.83,0.23,7.24c-0.04,0.83-0.13,1.67-0.1,2.5c0.01,0.26,0.09,0.55,0.07,0.81c-0.04,0.59,0.13,0.45-0.5,0.82
c-1.62,0.95-3.28,2.07-5.12,2.56c-1.29,0.35-2.51-0.07-3.77-0.37c-3.37-0.8-6.72-1.72-9.97-2.92c-1.32-0.49-3.11-0.97-4.2-1.89
c-0.76-0.64-1.38-1.76-2.04-2.54C166.76,42.23,165.96,41.53,166.05,41.07z M191.97,7.78c0.95,3.33,0.66,7.07,0.41,10.46
c-0.26,3.5-0.46,7-1.16,10.45c-0.69,3.35-1.34,8.7-5.26,9.94c-3.31,1.05-7.61,0.79-10.99,0.21c-0.96-0.16-2-0.45-2.76-1.09
c-0.78-0.65-1.3-1.87-1.73-2.79c-0.98-2.04-1.37-4.15-1.62-6.38c-0.22-1.93-0.74-3.82-0.94-5.75c-0.21-2-0.2-4.06-0.23-6.07
c-0.02-1.18,0.05-2.34,0.15-3.52c0.16-1.77,0.14-3.76,0.58-5.48c0.43-1.69,2.36-2.55,3.86-3.05c4.18-1.38,9.24-1.33,13.52-0.44
C187.66,4.68,191.34,5.56,191.97,7.78z M147.55,44.99c2.53,0.49,5.13,2.51,6.5,4.17c-0.36-1.25-1.06-2.45-1.99-3.37
c1.15-0.79,2.14-1.88,3.44-2.45c1.46-0.63,3.21-0.23,4.71,0.07c2.36,0.47,4.36,1.36,6.3,2.75c2.05,1.47,5.16,2.04,7.57,2.73
c2.63,0.76,5.29,1.44,7.96,2.07c2.15,0.5,3.96,0.92,6.14,0.22c2.56-0.83,4.62-2.47,7.02-3.6c2.66-1.25,5.83-0.7,8.3,0.74
c1.17,0.68,2.1,1.55,2.95,2.6c0.35,0.43,0.72,0.88,1.04,1.34c0.1,0.14,0.25,0.48,0.39,0.61c0.05,0.44,0.26,0.52,0.63,0.23
c0.27-0.08,0.54-0.15,0.82-0.2c1.21-0.2,2.21,0.06,3.07,0.93c0.4,0.4,0.67,0.98,1.1,1.34c0.12,0.1,0.28,0.47,0.41,0.51
c0.28,0.07,1.31-0.54,1.65-0.63c2.13-0.55,2.85,0.48,3.49,2.27c-1.23,0-2.46,0.07-3.69,0.19c-0.69,0.07-1.57,0.36-2.24,0.26
c-0.58-0.08-0.88-0.55-1.36-0.95c-2.12-1.75-4.76-3.13-7.38-3.92c-1.22-0.37-2.23-1-3.39-1.48c-1.6-0.67-3.13-0.41-4.79-0.11
c-2.33,0.42-4.55,1.2-6.85,1.75c-5.25,1.26-10.12-0.92-15.17-2.09c-4.68-1.08-9.15-0.13-13.84,0c-3.19,0.09-6.72-0.06-9.69-1.36
c-3.09-1.35-5.99-2.16-9.42-2.14C143.69,46.18,145.31,44.56,147.55,44.99z M3.97,142.44c2.87-18.65,13.85-34.34,28.48-45.82
c6.15-4.82,12.84-8.93,19.61-12.8c11.01-6.3,22.5-11.75,34.32-16.38c11.93-4.67,24.18-8.48,36.51-11.93
c-1.54,2.15-2.47,4.67-2.76,7.3c-0.12,1.09-0.09,0.96-1.02,1.12c-0.5,0.09-1,0.18-1.49,0.32c-3.28,0.93-5.49,3.52-6.86,6.55
c-1.14,2.54-1.66,5.31-2.59,7.93c-0.27,0.78-0.52,1.93-1.05,2.59c-0.3,0.37-0.62,0.47-1.08,0.68c-2.87,1.25-5.73,2.53-8.59,3.81
c-10.54,4.75-21.01,9.68-31.35,14.85c-11.33,5.67-22.42,11.38-33.04,18.24C22.63,125.65,12.33,133.18,3.97,142.44z M135.25,190.08
c-4.85-6.97-11.63-12.06-19.85-14.33c-8.9-2.46-18.06-0.94-27.09-2.23c-8.15-1.16-16.15-4.37-21.23-11.12
c-5.09-6.76-6-14.89-7.05-23.01c-1.15-8.92-3.49-18.84-9.85-25.57c14.18-7.74,28.45-15.51,43.25-22.03
c2.85-1.25,5.78-2.2,8.66-3.36c-0.9,2.8,0.58,6.15,1.63,8.7c1,2.43,2.05,4.77,3.69,6.83c3.11,3.91,7.5,6.52,11.9,8.74
c4.77,2.4,9.73,4.42,14.38,7.06c1.13,0.64,2.23,1.31,3.31,2.03c1.07,0.71,2.66,1.53,3.45,2.56c0.43,0.56,0.23,1.31,0.3,2.06
c0.07,0.78,0.23,1.57,0.52,2.3c0.46,1.18,1.32,2.15,2.18,3.05c0.4,0.41,2.11,1.56,2.23,2.11c0.06,0.24-0.33,0.88-0.36,1.27
c-0.04,0.68,0.12,0.86,0.65,1.31c1.55,1.33,3.79,2.17,5.84,2.23c-2.75,7.87-5.17,15.91-6.26,24.2c-0.57,4.32-0.77,8.69-0.5,13.05
c0.14,2.2,0.4,4.4,0.79,6.57c0.17,0.96,0.71,2.23,0.67,3.19c-0.05,0.88-1.24,1.97-1.83,2.7c-0.77,0.96-1.57,1.9-2.34,2.85
c-0.48,0.59-1.46,2.33-2.11,2.42c-0.72,0.1-2.06-0.89-2.62-1.27C136.7,191.75,135.88,190.99,135.25,190.08z M137.49,248.84
c-0.22-0.26,2.73-0.44,2.94-0.44c1.9,0,3.86,0.1,5.73,0.5c0.43,0.09,1.4,0.2,1.69,0.59c0.41,0.53,0.44,1.93,0.68,2.63
c0.32,0.93,1.16,2.48,0.79,3.49c-0.41,1.13-1.5-0.37-2.22-0.58c0.58,4.15,1.63,8.33,3.23,12.21c0.56,1.35,1.26,2.9,0.42,4.3
c-0.77,1.29-2.59,1.87-3.99,2.04c-2.37,0.29-4.94,0.09-7.32-0.1c-2.26-0.18-4.66-0.3-6.66-1.4c-2.85-1.57-4.95-3.28-4.34-6.79
c0.82-4.74,6.44-8,10.09-10.44c-1.26,0.05-2.63,0.91-3.85,0.79c-1.28-0.13-0.69-1.6-0.41-2.47
C134.89,251.25,136.62,250.52,137.49,248.84z M187.77,195.87c-0.1-3.59-0.52-7.17-1.55-10.62c-0.82-2.74-2-5.35-3.09-7.99
c-0.28-0.69-0.65-1.4-0.85-2.12c-0.27-0.95,0.32-1.79,0.67-2.73c0.68-1.81,1.22-3.67,1.66-5.55c0.84-3.63,1.3-7.34,1.82-11.02
c0.68-4.83,1.5-9.63,2.78-14.35c-1.15,1.21-1.81,2.91-2.4,4.44c-0.86,2.25-1.53,4.58-2.15,6.91c-1.21,4.53-2.11,9.14-3.54,13.61
c-1.44,4.54-3.47,8.89-6.29,12.73c-1.54,2.09-3.29,4.01-5.21,5.75c-0.99,0.9-2.02,1.75-3.09,2.55c-0.43,0.32-1.53,0.83-1.82,1.3
c-0.29,0.48-0.14,1.67-0.29,2.28c-0.56,2.37-1.98,4.14-3.62,5.86c-1.8,1.89-3.08,3.82-3.59,6.43c0.54-0.76,1.21-1.48,1.94-2.07
c0.17-0.13,0.53-0.5,0.75-0.51c0.41-0.02,0.12-0.16,0.3,0.28c0.31,0.76-0.08,2.34-0.13,3.18c-0.05,0.86-0.07,1.74-0.18,2.57
c-0.56,3.99-1.74,8.06-3.2,11.84c-2.25,5.86-5.7,11.18-6.35,17.53c-0.31,3.02-0.3,6.05-0.5,9.07c-0.05,0.77,0.06,1.26-0.62,1.54
c-1.58,0.65-4.16,0.18-5.8-0.02c-1.72-0.22-3.44-0.56-5.1-1.06c-0.41-0.12-1.35-0.27-1.67-0.6c-0.46-0.47,0.02-2.05,0.11-2.81
c0.5-4.32,0.66-8.66,0.87-13c0.43-9.09,1.06-18.62,4.23-27.18c1.36-3.66,3.42-6.8,5.82-9.86c1.38-1.76,3.09-3.45,4.28-5.34
c0.44-0.7,0.08-1.25-0.15-2.05c-2.81-9.44-2.53-19.3-0.87-28.94c0.75-4.33,1.76-8.6,2.95-12.83c0.34-1.19,0.69-2.38,1.05-3.57
c0.18-0.58,0.26-1.31,0.7-1.68c0.3-0.25,0.8-0.39,1.15-0.61c1.28-0.81,2.65-1.68,3.82-2.63c1.95-1.6,3.48-3.67,5.34-5.38
c1.34-1.23,1.84-2.53,0.83-4.18c-0.97-1.59-2.76-2.49-3.75-4.01c-0.34-0.52-0.25-0.6-0.03-1.19c0.15-0.41,0.25-0.68,0.32-1.06
c0.22-1.23,0.28-2.52,0.45-3.76c0.8,0.71,2.02,1.07,2.99,1.42c3.05,1.11,6.21,2.01,9.36,2.77c7.02,1.7,14.42,1.84,21.6,1.45
c2.31-0.13,4.63-0.32,6.92-0.61c-0.47,3.45,0.33,7.01,0.93,10.43c0.62,3.58,1.62,7.09,2.22,10.64c1.31,7.61,2.6,15.29,2.69,23.04
c0.08,6.73-0.69,14.05-4.67,19.71c-0.33,0.47-1.28,1.25-1.42,1.79c-0.17,0.62,0.34,2,0.39,2.68c0.18,2.18,0.05,4.39-0.34,6.54
c-0.4,2.2-1.13,4.25-1.91,6.33c-0.4,1.07-0.53,2.31-0.98,3.34c-0.19,0.45,0.01,0.32-0.39,0.54c-0.18,0.1-0.61,0.08-0.81,0.1
c-0.7,0.08-1.39,0.16-2.09,0.24c-6.79,0.7-13.99,1-20.69-0.6C179.05,200.19,182.44,195.76,187.77,195.87z M175.36,220.25
c-0.68-2.46-1.31-4.95-1.76-7.47c-0.29-1.62-0.74-3.61-0.3-5.24c0.35-1.3,1.4-0.57,2.35-0.29c1.55,0.46,3.15,0.73,4.75,0.92
c4.47,0.53,8.99,0.38,13.46-0.03c1.97-0.18,3.93-0.41,5.88-0.7c1.26-0.19,2.53-0.57,3.79-0.71c2.11-0.23,0.58,2.35,0.33,3.48
c-0.31,1.46-0.51,2.96-0.75,4.44c-0.64,4.04-1.48,8.11-1.79,12.19c-0.54,7.12-0.53,14.47,0.05,21.59c0.09,1.07,0.29,1.34,1.17,1.94
c1.1,0.75,2.29,1.37,3.45,2c2.92,1.58,5.92,3.06,8.73,4.84c1.23,0.78,2.36,1.69,3.67,2.36c1.64,0.84,3.38,1.49,5.12,2.09
c1.71,0.6,3.45,1.13,5.16,1.72c1.14,0.4,2.51,0.78,3.41,1.63c3.26,3.08-6.24,3.99-7.55,4.06c-3.43,0.18-6.85-0.28-10.24-0.74
c-4.76-0.65-9.5-1.36-14.3-1.63c-4.47-0.25-8.95-0.21-13.42-0.25c-3.53-0.03-8.99-0.29-8.82-5.06c0.14-3.95,3.01-7.22,3.78-11.04
c0.66-3.28,0.14-6.77-0.14-10.06c-0.39-4.56-1.39-8.8-3.23-12.99C177.15,224.97,176.03,222.7,175.36,220.25z"/>
<path class="st0" d="M112.28,175.01c-0.78-0.15-1.59-0.28-2.41-0.4C110.69,174.73,111.5,174.86,112.28,175.01z"/>
<path class="st0" d="M114.62,175.54c-0.48-0.12-0.98-0.23-1.48-0.34C113.64,175.3,114.13,175.42,114.62,175.54z"/>
<path class="st0" d="M116.83,176.17c-0.39-0.12-0.78-0.24-1.18-0.35C116.06,175.93,116.45,176.05,116.83,176.17z"/>
<path class="st0" d="M109.08,174.52c-0.62-0.08-1.25-0.14-1.89-0.2C107.83,174.38,108.46,174.45,109.08,174.52z"/>
<path class="st0" d="M218.89,118.28c-0.89-2.89-7.8-5.69-4.22-13.29c-1.73-0.43-2.94-1.06-3.83-1.87
c-1.24,3.68-2.2,8.01-2.24,12.92c-0.12,1.01-0.26,2.65-0.39,4.24c1.07-0.94,2.39-1.75,3.73-1.68
C214.71,118.76,217.24,119.26,218.89,118.28z"/>
<path class="st0" d="M106.21,174.25c-0.64-0.04-1.3-0.08-1.97-0.1C104.91,174.17,105.57,174.21,106.21,174.25z"/>
<path class="st0" d="M121.64,178.07c-0.23-0.11-0.47-0.21-0.7-0.32C121.17,177.86,121.41,177.96,121.64,178.07z"/>
<path class="st0" d="M131.58,185.51c-0.07-0.07-0.13-0.14-0.2-0.22C131.45,185.37,131.51,185.44,131.58,185.51z"/>
<path class="st0" d="M128.99,182.98c-0.07-0.06-0.15-0.12-0.22-0.19C128.84,182.85,128.92,182.92,128.99,182.98z"/>
<path class="st0" d="M135.02,189.77c-0.23-0.32-0.46-0.64-0.7-0.95C134.56,189.13,134.79,189.45,135.02,189.77z"/>
<path class="st0" d="M123.43,179.02c-0.2-0.12-0.41-0.23-0.62-0.34C123.01,178.79,123.22,178.9,123.43,179.02z"/>
<path class="st0" d="M97.84,174.15c-6.55-0.02-12.08-0.77-16.72-2.23C85.76,173.39,91.3,174.14,97.84,174.15z"/>
<path class="st0" d="M133.72,188.02c-0.13-0.17-0.27-0.33-0.41-0.5C133.45,187.69,133.59,187.85,133.72,188.02z"/>
<path class="st0" d="M125.04,180c-0.15-0.1-0.31-0.2-0.46-0.3C124.73,179.8,124.89,179.9,125.04,180z"/>
<path class="st0" d="M118.92,176.9c-0.34-0.13-0.68-0.26-1.03-0.39C118.24,176.64,118.58,176.77,118.92,176.9z"/>
<path class="st0" d="M59.79,137.69c-0.09-0.59-0.18-1.18-0.28-1.76C59.61,136.51,59.7,137.1,59.79,137.69z"/>
<path class="st0" d="M100.35,174.12c1.02-0.03,2.01-0.02,2.99,0C102.36,174.1,101.37,174.1,100.35,174.12z"/>
<path class="st0" d="M60.08,139.83c-0.07-0.59-0.15-1.19-0.23-1.78C59.93,138.65,60,139.24,60.08,139.83z"/>
<path class="st0" d="M59.46,135.68c-0.11-0.63-0.22-1.25-0.35-1.87C59.24,134.43,59.35,135.06,59.46,135.68z"/>
<path class="st0" d="M50.17,113.81c4.11,4.34,6.83,10.76,8.49,17.91c-1.66-7.16-4.38-13.58-8.48-17.92
C50.18,113.81,50.18,113.81,50.17,113.81z"/>
<path class="st0" d="M59.09,133.71c-0.13-0.66-0.27-1.32-0.43-1.97C58.82,132.39,58.96,133.05,59.09,133.71z"/>
<path class="st0" d="M130.06,183.97c0.11,0.1,0.21,0.2,0.32,0.31C130.27,184.17,130.16,184.07,130.06,183.97z"/>
<path class="st0" d="M81.12,171.92c-2.32-0.73-4.42-1.64-6.31-2.72C76.7,170.28,78.8,171.19,81.12,171.92z"/>
<path class="st0" d="M60.35,142.32c-0.07-0.71-0.14-1.42-0.23-2.12C60.21,140.91,60.29,141.61,60.35,142.32z"/>
<path class="st1" d="M145.98,133.86c0.3,0.12,1.94,1.44,2.63,1.99c0.69,0.55,2.08,0.58,2.08,0.58c-1.79-1.4-3.29-1.95-4.58-2.68
C146.08,133.78,146.04,133.81,145.98,133.86z"/>
<path class="st2" d="M204.42,206.76c0.13-0.64,0.21-1.01,0.21-1.01c-0.01,0-0.02,0-0.03,0.01c-0.04,0.17-0.1,0.51-0.2,1
C204.4,206.76,204.41,206.76,204.42,206.76z"/>
<path class="st2" d="M201.34,226.83c0,0.05-0.01,0.1-0.01,0.14c0.1-1,0.22-2,0.33-2.97c-0.01,0.06-0.02,0.11-0.03,0.17
C201.53,225.05,201.43,225.94,201.34,226.83z"/>
<path class="st2" d="M180.26,253.73c-1.74,2.32-3.16,6.13-2.79,8.47c0.07,0.46,0.21,0.87,0.44,1.2
C176.82,261.25,178.18,256.5,180.26,253.73z"/>
<path class="st2" d="M201.64,224.17c0.01-0.06,0.02-0.11,0.03-0.17c0.95-7.9,2.25-14.75,2.75-17.24c-0.01,0-0.02,0-0.02-0.01
C203.87,209.38,202.57,216.28,201.64,224.17z"/>
<path class="st2" d="M200.61,239.41c0-4.01,0.3-8.3,0.72-12.43c0-0.05,0.01-0.1,0.01-0.14
C200.91,231.01,200.61,235.35,200.61,239.41z"/>
<path class="st2" d="M177.57,204.8c-1.48-0.38-2.31-0.67-2.31-0.67s0.83,0.29,2.3,0.69C177.57,204.82,177.57,204.81,177.57,204.8z"
/>
<path class="st2" d="M177.89,204.91c0.21,0.05,0.45,0.1,0.69,0.15c-0.36-0.09-0.7-0.17-1.01-0.25c0,0.01,0,0.01-0.01,0.02
C177.67,204.85,177.78,204.88,177.89,204.91z"/>
<path class="st2" d="M178.39,264c-0.06-0.09-0.11-0.17-0.16-0.26c-0.13-0.11-0.24-0.22-0.33-0.35
C178.01,263.62,178.19,263.81,178.39,264z"/>
<path class="st2" d="M178.58,205.06c-0.24-0.05-0.47-0.1-0.69-0.15c4.72,1.23,15.24,3.28,26.7,0.85c0.02-0.08,0.03-0.14,0.03-0.14
c-0.11,0.02-0.23,0.04-0.34,0.07C193.47,207.9,183.54,206.24,178.58,205.06z"/>
<path class="st2" d="M201.33,248.84c-0.52-2.75-0.73-5.99-0.73-9.43C200.6,242.85,200.81,246.08,201.33,248.84z"/>
<path class="st2" d="M193.99,265.1L193.99,265.1c-6.7,0-13.76,0.25-15.76-1.36c0.05,0.09,0.1,0.18,0.16,0.26
C180.48,265.96,187.22,266.25,193.99,265.1z"/>
<path class="st2" d="M201.34,226.83c0.09-0.9,0.19-1.78,0.3-2.66c-0.01,0.06-0.02,0.13-0.03,0.19
C201.5,225.02,201.41,225.87,201.34,226.83z"/>
<path class="st2" d="M201.34,226.83c0.09-0.9,0.19-1.78,0.3-2.66c-0.01,0.06-0.02,0.13-0.03,0.19
C201.5,225.02,201.41,225.87,201.34,226.83z"/>
<path class="st2" d="M177.57,204.83c0.11,0.03,0.21,0.05,0.33,0.08C177.78,204.88,177.67,204.85,177.57,204.83
C177.57,204.83,177.57,204.83,177.57,204.83z"/>
<path class="st2" d="M177.57,204.83c0.11,0.03,0.21,0.05,0.33,0.08C177.78,204.88,177.67,204.85,177.57,204.83
C177.57,204.83,177.57,204.83,177.57,204.83z"/>
<path class="st2" d="M216.22,258.22c4.06,3.11,13.12,4.88,15.42,6.44c0.35,0.24,0.61,0.48,0.8,0.72c-1.12-3.54-8.38-5.39-8.38-5.39
c-18.06-6.64-22.02-10.34-22.64-11.03c0.01,0.13,0.03,0.26,0.04,0.38C201.61,250.56,212.4,255.29,216.22,258.22z"/>
<path class="st2" d="M216.22,258.22c4.06,3.11,13.12,4.88,15.42,6.44c0.35,0.24,0.61,0.48,0.8,0.72c-1.12-3.54-8.38-5.39-8.38-5.39
c-18.06-6.64-22.02-10.34-22.64-11.03c0.01,0.13,0.03,0.26,0.04,0.38C201.61,250.56,212.4,255.29,216.22,258.22z"/>
<path class="st2" d="M177.9,263.4c0.09,0.12,0.2,0.24,0.33,0.35c-1.09-2.01-0.18-4.94,1.32-8.08c0.46-0.97,0.84-1.8,1.14-2.57
c-0.13,0.21-0.28,0.42-0.44,0.64C178.18,256.5,176.82,261.25,177.9,263.4z"/>
<path class="st2" d="M177.9,263.4c0.09,0.12,0.2,0.24,0.33,0.35c-1.09-2.01-0.18-4.94,1.32-8.08c0.46-0.97,0.84-1.8,1.14-2.57
c-0.13,0.21-0.28,0.42-0.44,0.64C178.18,256.5,176.82,261.25,177.9,263.4z"/>
<path class="st2" d="M177.89,204.91c-0.11-0.03-0.22-0.05-0.33-0.08c0,0,0-0.01,0-0.01c-1.47-0.39-2.3-0.69-2.3-0.69
c-0.4,0.87-0.69,1.77-0.88,2.7c0.97,0.32,3.12,1.16,8.28,1.54c7.58,0.55,17.72-0.89,20.43-1.55c0.65-0.16,1.06-0.17,1.3-0.07
c0.1-0.49,0.17-0.83,0.2-1C193.14,208.19,182.62,206.14,177.89,204.91z"/>
<path class="st2" d="M177.89,204.91c-0.11-0.03-0.22-0.05-0.33-0.08c0,0,0-0.01,0-0.01c-1.47-0.39-2.3-0.69-2.3-0.69
c-0.4,0.87-0.69,1.77-0.88,2.7c0.97,0.32,3.12,1.16,8.28,1.54c7.58,0.55,17.72-0.89,20.43-1.55c0.65-0.16,1.06-0.17,1.3-0.07
c0.1-0.49,0.17-0.83,0.2-1C193.14,208.19,182.62,206.14,177.89,204.91z"/>
<path class="st2" d="M181.16,237.79c-0.46-3.81-1.37-6.62-2.37-9.06C179.74,231.71,180.62,234.75,181.16,237.79z"/>
<path class="st2" d="M181.16,237.79c-0.46-3.81-1.37-6.62-2.37-9.06C179.74,231.71,180.62,234.75,181.16,237.79z"/>
<path class="st2" d="M200.61,239.41c0-4.05,0.3-8.4,0.73-12.57c0.07-0.97,0.16-1.81,0.27-2.47c0.01-0.06,0.02-0.13,0.03-0.19
c0.93-7.89,2.23-14.79,2.76-17.42c-0.24-0.1-0.64-0.09-1.3,0.07c-2.71,0.67-12.85,2.11-20.43,1.55c-5.16-0.38-7.3-1.22-8.28-1.54
c-1.29,6.26,1.83,13.88,4.4,21.9c1,2.44,1.91,5.24,2.37,9.06c0.31,1.75,0.51,3.5,0.56,5.25c0.12,5.11,0.67,7.39-1.02,10.06
c-0.31,0.77-0.68,1.6-1.14,2.57c-1.5,3.14-2.41,6.07-1.32,8.08c1.99,1.61,9.06,1.36,15.76,1.36h0l0,0
c7.04-1.19,17.4,1.88,28.15,2.16c10.75,0.28,10.47-0.68,10.47-0.68c0.04-0.42-0.03-0.82-0.15-1.2c-0.19-0.24-0.45-0.48-0.8-0.72
c-2.3-1.55-11.37-3.33-15.42-6.44c-3.82-2.92-14.61-7.66-14.75-8.88c-0.01-0.12-0.03-0.25-0.04-0.38c-0.07-0.08-0.1-0.12-0.1-0.12
C200.81,246.08,200.6,242.85,200.61,239.41z"/>
<g>
<path class="st3" d="M185.45,50.38c1.57,0.32,4.32-1.31,6.33-2.5c0.33-0.2,0.65-0.38,0.95-0.56c-0.45-1.22,0.03-3.12-0.06-6.18
c-0.05-1.46-0.14-3.15-0.26-4.83c-1.88,1.79-4.12,3.57-5.9,4.46c-1.14,0.57-3.65,0.3-6.57,0.29c-3.11-0.02-6.64,0.17-8.1-1.07
c-1.5-1.28-3.32-3.12-5.03-4.84c-0.02,0.36-0.05,0.71-0.08,1.07c-0.16,2.05-0.38,3.28-0.68,4.85c-0.09,0.48,1.36,1.74,3,4.01
C173.12,47.48,182.4,49.75,185.45,50.38z"/>
<path class="st3" d="M236.12,104.18c-1.47-4.76-5.4-5.63-11.81-1.98c2.53-4.21,5.9-4.23,6.45-5.77
c2.49-6.92-1.63-12.92-3.37-14.91c2.08-5.12,3.99-12.49-2.8-19.09c-2.88-2.8-6.64-3.36-10-3.08c5.11,4.84,9.37,12.38,6.99,20.12
c-0.27,0.86-2.43,1.99-4.71,2.84c0,0,1.25,5.46-0.97,9.78c-0.88,1.72-2.24,4.13-3.54,7.14c0.04,0.04,0.09,0.09,0.13,0.13
c2.74,2.55,4.48,2.85,8.31,3.57c-2.55,0.21-3.36,1.05-3.47,1.52c-2.11,9.36,3.92,9.68,4.15,14.93c0,0.11,0.02,0.21,0.02,0.33v0.05
c-0.9,0.84-4.04,1.41-7.03,1.32c-3.05-0.1-5.12,2.75-5.12,2.75c-0.44,0.41-0.83,0.8-1.17,1.18c0.06,1.17,0.1,2.25,0.1,2.8
c0,1.22,0.8,4.48,1.23,6.94c2.55,1.57,3.79,2.55,6.27,3.18c1.52,0.38,2.81,0.63,4.08,0.29c0.95-0.25,1.88-0.82,2.88-1.9
c4.3-4.62,5.42-8.94,6.02-11.44c0.06-0.24,0.11-0.47,0.16-0.67c0.08,0.16,0.16,0.33,0.23,0.48
C233.41,119.97,238.34,111.38,236.12,104.18z"/>
<path class="st3" d="M207.43,139.12c-0.01,0-0.01,0.01-0.01,0.01c-0.36-2.37-1.26-5-1.87-8.66c-0.43-2.56-1.06-5.49-1.13-9.43l0,0
c0.06-0.14,0.12-0.43,0.17-0.81c0.01-0.06,0.02-0.12,0.03-0.18c-3.06,0.39-17.8,2.01-29.39-1.05c-8.54-2.26-10.89-3.43-11.49-3.97
c-0.08,0.58-0.17,1.23-0.25,1.9c-0.09,0.71-0.17,1.44-0.23,2.11l0.02,0c-0.22,0.53-0.42,1.07-0.61,1.62
c0.1,0.12,0.2,0.24,0.32,0.38c1.34,1.52,4.33,3.62,4.34,5.75c0,0.2-0.01,0.39-0.07,0.59c-0.35,1.27-1.15,1.54-2.28,2.75
c-0.51,0.54-3.97,4.26-4.74,4.74c-0.53,0.33-1.05,0.79-1.64,1.11c-0.46,0.25-1.87,1.34-2.36,1.58c-0.3,0.14-0.57,0.27-0.84,0.39
c-9.33,29.5-4.98,42.48-3.12,48.55c-5.13,6.52-8.73,10.23-10.63,16.22c-0.01,0-0.02-0.01-0.03-0.01c-0.07,0.23-0.13,0.45-0.2,0.67
c-4.81,15.41-3.07,28.61-5.03,41.62c1.86,0.95,8.7,2.63,13.17,1.73c0.61-0.14,0.02-10.99,1.8-15.81
c2.46-6.66,6.49-12.14,8.47-23.94c0.01,0,0.02,0,0.03,0c0.01-0.11,0.02-0.22,0.03-0.34c0.01-0.08,0.03-0.15,0.04-0.22
c-0.01,0-0.02,0-0.02,0c0.14-1.66,0.23-3.5,0.29-5.62c0.01-0.45-1.82,0.91-3,2.56c0.97-4.97,3.62-5.88,5.71-8.89
c0.93-1.34,1.72-3.19,1.79-5.67c11.04-7.53,15.16-16.87,17.6-26.54c1.71-6.81,4.01-17.72,6.9-20.77
c-0.72,2.66-1.26,5.13-1.69,7.48c-1.82,9.84-1.77,17.3-5.44,25.62c2.77,7.31,5.43,10.98,5.7,21.29c-5.58-0.11-8.85,4.51-10.2,8.93
c0,0.01,0,0.01-0.01,0.02c0,0,0,0.01,0,0.01c0.11,0.03,0.21,0.05,0.33,0.08c0.21,0.05,0.45,0.1,0.69,0.15
c3.83,0.78,11.17,1.53,22.85,0c0.34-1.53,0.75-3.02,1.27-4.28c0.89-2.17,1.45-4.22,1.78-6.13c0.63-3.63,0.39-6.72-0.09-9.01
C213.85,175.15,210.15,154.88,207.43,139.12z"/>
<path class="st3" d="M212.5,79.9c-11.86-5.85-25.55-5.04-38.45-1.82c-2.68,0.67-5.17,1.3-8.12,0.3
c-6.29-2.13-10.84-5.3-12.91-7.82c-0.15-0.19-0.28-0.37-0.4-0.55c-0.35,0.53-0.72,1.07-1.13,1.61c0.69,6.31-1.25,11.01-3.96,14.39
c2.65,3.39,7.22,7.89,9.95,9.39c2.94,1.62,4.79,1.92,9.59,1.15c-1.78,1.85-3.03,2.71-5.31,3.9c0.18,2.09,0.67,5.61,1.43,9.52
c0.8,0.79,3.36,2.24,6.5,3.72c4.01,1.89,8.97,3.84,12.44,4.51c6.28,1.23,19.07,0.13,22.72-0.35c0-0.01,0-0.02,0-0.03
c0.05,0,0.1,0.01,0.16,0.01c-0.56-13.4,2.93-20.36,5.58-25.73C213.02,87.13,212.87,82.32,212.5,79.9z"/>
<path class="st3" d="M168.92,29.13c0.33,3.45,1.31,5.78,3.08,8.5c0.74,0.49,1.46,0.91,2.18,1.07c3.1,0.69,8.76,0.73,11.78-0.06
c0,0,0,0,0,0c1.78-0.4,3.98-3.56,4.49-6.15c0.63-3.36,1.29-5.79,1.39-7.85c0.27-2.06,0.53-6.69,0.67-7.95
c0.28-2.07,0-5.16-0.25-7.11c-0.12-0.95-0.24-1.63-0.28-1.79c-0.42-1.48-3.91-4.04-12.13-4.03c-8.71,0.02-11.25,2.66-11.44,4.07
c-0.02,0.15-0.1,0.79-0.19,1.65c-0.2,1.8-0.49,4.58-0.54,5.96c-0.01,0.06-0.01,2.58,0.16,6.41
C167.95,24.38,168.6,25.83,168.92,29.13z"/>
<path class="st3" d="M147.11,255.03c1.06,0.3,1.83,1.61,2.15,0.83c0.59-1.44-1.19-4.07-1.3-6.09c-0.01-0.22-0.01,0.01-0.01-0.22
c-1.41-1.28-11.1-1.45-10.46-0.72c-1.11,2.14-2.89,1.68-3.57,5.8c-0.34,2.06,2.27,0.31,4.61,0.21c-4.26,2.85-9.2,6.53-9.94,9.72
c-1.02,4.38,0.64,5.66,5.33,8.12c0,0,0.01,0,0.01,0c4.07,0.92,8.99,1.08,12.84,0.89c0,0,0.01,0,0.01,0
c4.22-0.74,5.12-2.8,3.82-5.74C148.73,263.61,147.53,258.03,147.11,255.03z"/>
<path class="st3" d="M143.25,123.6c-0.88,4.73,1.42,6.76,5.28,9.47c1.81,1.27-0.11,1.41,1.42,2.16c1.62,0.8,3.37,1.46,4.99,0.6
c0.48-0.26,1.2-1.05,1.65-1.32c0.58-0.34,2.74-2.1,3.37-2.61c0.63-0.51,1.97-2.01,2.45-2.57c0.81-0.88,1.74-2.2,1.82-2.69
c0.37-1.64-2.18-3.29-3.78-4.92c-2.76-2.82-6.83-3.92-10.96-3.94c-0.02,0-0.05,0-0.07,0c-6.85-7.34-9.64-14.13-11.75-19.12
c-2.49-5.88-5.32-9.17-10.95-13.71c2.91,1.14,5.04,2.15,6.4,3.11c1.46,1.03,3.5,1.03,5.35,0.51c6.79-2.27,10.45-11.84,10.84-17.83
c0.67-0.9,1.74-2.94,2.3-3.8c0.02-0.04,0.1,0.03,0.2,0.16c0.36,0.28,1.22,0.92,2.34,1.73c2.29,1.67,5.65,4.01,7.96,5.22
c3.82,2,6.37,2.09,14.87-0.26c6.11-1.69,13.37-2.17,18.86-2.11c5.6,0.06,10.46,1.48,15.15,3.5c2.28,0.98,6.28,3.67,7.2-0.72
c0.38-5.51-1.59-10.91-4.52-14.7c-0.14-0.08-0.29-0.21-0.41-0.37c-0.61-0.76-5.61-4.14-7.45-4.91c-0.37-0.16-0.77-0.34-1.16-0.53
c-0.07-0.02-0.14-0.03-0.2-0.06c-0.06-0.02-0.14-0.04-0.24-0.06c-0.44-0.11-1.17-0.29-2.11-0.71l-0.33-0.15
c-0.56-0.25-1.06-0.47-1.6-0.61c-0.49-0.12-1.01-0.18-1.63-0.11c-0.71,0.08-1.37,0.18-1.98,0.29c-1.92,0.34-3.4,0.79-4.74,1.19
c-1.92,0.58-3.58,1.08-5.75,1.08c-1.18,0-2.52-0.15-4.12-0.52c-1.9-0.43-3.41-0.84-4.75-1.2c-3.47-0.93-5.59-1.5-10.12-1.38
c-0.86,0.13-1.83,0.25-2.93,0.32c-2.94,0.2-6.16,0.14-9.03-0.22c-2.1-0.27-4.02-0.7-5.47-1.33c-0.43-0.18-0.76-0.35-1.03-0.49
c-2.88-0.87-5.79-0.84-10.47,0.03c-7.05,1.31-13.92,6.39-14.01,13.67c0,0.46,4.86,1.94,6.36,7.76c-2.35-3.28-6.47-7.05-11.48-3.83
c-5.16,3.32-2.51,10.98-9.59,18.93c-2.37,2.65-2.02,5.9,0.54,12.2c3.96,9.77,22.61,15.16,33.44,24.18
C143.34,123.17,143.29,123.38,143.25,123.6z"/>
</g>
<g>
<path class="st4" d="M142.62,90.45c-1.61,1.07-3.14,1.8-4.28,2.22c4.07,6.23,1.92,10.98,12.16,23.27c0,0,0,0,0,0
c1.32,0.08,4.53,0.37,7.36,1.39c0.1-1.2,0.21-2.24,0.42-3.69l0.46,0c-0.98-5.18-1.32-7.95-2.24-11.83
C151.84,98.86,147.04,95.59,142.62,90.45z"/>
<path class="st4 cape-1" d="M145.37,135.86c-0.06-0.34-0.09-0.71-0.03-1.05c0.04-0.23,0.4-0.8,0.38-0.91c-0.07-0.37-1.29-1.16-1.56-1.42
c-1.73-1.68-3.1-3.37-3.39-5.84c-0.06-0.48,0.17-1.62-0.03-2.04c-0.17-0.37-0.89-0.73-1.22-0.99c-1.02-0.8-2.09-1.54-3.18-2.25
c-2.01-1.29-4.12-2.44-6.25-3.51c-7.83-3.92-17.21-6.87-22.8-14.02c-1.64-2.09-2.68-4.47-3.67-6.91c-1.02-2.5-2.42-5.76-1.54-8.49
c-2.47,0.99-5.01,1.78-7.46,2.84c-3.01,1.3-5.98,2.69-8.94,4.11c-7.66,3.68-15.22,7.57-22.73,11.54
c-4.27,2.26-8.53,4.55-12.76,6.89c4.15,4.39,6.49,10.27,8.01,16.03c1.54,5.86,1.79,11.84,2.88,17.77
c1.02,5.58,2.98,11.11,6.59,15.55c3.83,4.71,9.23,7.66,15.03,9.22c6.29,1.7,12.69,1.72,19.16,1.72c6.23,0,12.53,0.83,18.29,3.29
c5.83,2.5,10.67,6.65,14.41,11.73c0.86,1.17,1.68,2.26,2.87,3.12c0.58,0.42,1.21,0.78,1.86,1.06c0.2,0.08,0.56,0.28,0.75,0.28
c0.58,0.02,0.59-0.2,0.95-0.66c0.98-1.29,2.03-2.53,3.06-3.79c0.53-0.65,1.06-1.3,1.58-1.96c0.23-0.29,0.65-0.68,0.79-1.03
c0.21-0.55-0.08-1.2-0.21-1.81c-3.3-15.51,0.49-31.02,5.6-45.67C149.49,138.6,146.95,137.56,145.37,135.86z"/>
<path class="st4 cape-2" d="M107,81.58c0.86-1.72,1.6-3.89,2.55-7.35c2.71-9.79,8.15-10.06,10.51-10.46c0.17-3.29,1.23-6.03,2.84-8.27
c-24.63,6.9-50.22,15.43-78.16,32.66c-11.66,7.19-36.01,23.36-40.76,54.26c6.93-7.67,17.37-16.08,30.49-24.43l0-0.01
c0.15-0.09,0.29-0.18,0.44-0.27c3.68-2.33,7.56-4.66,11.64-6.96c0.04,0.03,0.09,0.06,0.13,0.09c6.34-3.52,13.08-7.02,19.67-10.31
C85.64,90.9,103.71,83.01,107,81.58z"/>
<path class="st4" d="M232.45,265.38c-0.19-0.24-0.45-0.48-0.8-0.72c-2.3-1.55-11.37-3.33-15.42-6.44
c-3.82-2.92-14.61-7.66-14.75-8.88c-0.01-0.12-0.03-0.25-0.04-0.38c-0.39-4.11-0.56-15.66-0.1-21.98c0-0.05,0.01-0.1,0.01-0.14
c0.07-0.97,0.16-1.81,0.27-2.47c0.01-0.06,0.02-0.13,0.03-0.19c0.01-0.06,0.02-0.11,0.03-0.17c0.8-5.08,1.85-12.01,2.24-13.96
c0.3-1.5,1.22-2.94,0.51-3.28c-0.01,0-0.02,0-0.02-0.01c-0.24-0.1-0.64-0.09-1.3,0.07c-2.71,0.67-12.85,2.11-20.43,1.55
c-5.16-0.38-7.3-1.22-8.28-1.54c-0.12-0.04-0.22-0.07-0.31-0.09c-0.25-0.06-0.38-0.05-0.48,0.08c-1.12,1.53,0.14,7.55,1.76,13.43
c0.85,3.07,2.2,5.5,3.43,8.48c1,2.44,1.91,5.24,2.37,9.06c0.06,0.47,0.11,0.94,0.15,1.45c0.67,7.91,0.88,10.11-0.61,13.86
c-0.31,0.77-0.68,1.6-1.14,2.57c-1.5,3.14-2.41,6.07-1.32,8.08c0.05,0.09,0.1,0.18,0.16,0.26c0.74,1.12,2.17,1.91,4.58,2.25
c0.75,0.1,1.59,0.17,2.54,0.18c9.47,0.11,14.48-0.11,23.95,1.22c7.11,1,10.79,1.56,14.41,1.45c1.2-0.04,2.4-0.15,3.72-0.34
c3.36-0.49,5.01-1.39,5.18-2.38C232.82,266.05,232.71,265.71,232.45,265.38z"/>
<path class="st4" d="M198.39,51c1.79-0.21,3.15,0.71,4.4,1.35c0.95,0.48,2.2,0.65,3.22,1.13c0.05,0.02,0.11,0.04,0.16,0.07
c0,0,0.03,0.01,0.05,0.01c2.21,1.06,4.91,2.49,6.45,4.13c0,0,0,0,0,0c0.06,0.04,0.11,0.09,0.17,0.13c2.73-0.39,4.81-0.49,6.2-0.49
c-0.44-1.22-0.72-3.72-5.14-1.64c-1.66-1.97-2.22-3.68-5.85-2.44c-0.22-0.54-0.48-0.94-0.77-1.23c-0.04-0.07-0.09-0.13-0.14-0.2
c-0.32-0.45-0.74-0.98-1.26-1.58c-2.32-2.65-7.47-4.73-11.43-2.24c-2.25,1.41-6.79,4.17-9.68,3.58
c-2.74-0.56-11.96-2.73-17.42-4.9c-0.16-0.06-0.3-0.12-0.45-0.19c-1.81-1.6-4.45-3.03-9.55-3.47c-2.15-0.19-3.6,1.61-5.28,2.77
c0.82,0.82,1.6,2.05,1.99,3.37c-1.37-1.66-3.97-3.68-6.5-4.17c-2.24-0.43-3.87,1.19-6.34,2.49c2.89-0.02,5.44,0.43,7.59,1.28
c0.01,0,0.02,0,0.02,0c0.02,0.01,0.05,0.02,0.07,0.04c0.61,0.24,1.19,0.52,1.74,0.83c4.94,1.96,10.97,1.3,13.4,1.14
c0.19-0.01,0.99-0.13,1.99-0.29l0,0c0.23-0.02,0.44-0.03,0.67-0.04c6.73-0.38,8.58,1.08,15.27,2.6
C188.87,54.62,190.47,51.93,198.39,51z"/>
</g>
<g>
<path class="st5" d="M188.75,258.11c-3.11,0-7.04-1-9.74-2.22l-2.36,3.35l0.29,6.54c0,0,14.25,3.99,12.49,0.77
C187.67,263.32,188.75,258.11,188.75,258.11z"/>
<path class="st5" d="M222.04,259.77c-2.84,0.11-0.95,0.67,1.22,3.33s0.41,5.55-2.16,6.33l7.43,0.47l6.33-3.67
C234.86,266.23,224.88,259.66,222.04,259.77z"/>
<path class="st5" d="M203.62,212.14c-4.57,1.5-11.77,2.16-16.54,2.33c-4.77,0.17-10.35-0.25-14-1.5l-0.13,3.93
c0,0,3.45,1.3,15.02,1.5c9.74,0.17,15.83-2.16,15.83-2.16l1.24-1.67C205.03,214.57,208.18,210.64,203.62,212.14z"/>
<path class="st5" d="M203.12,220.63c-4.53,1.6-10.93,1.67-15.7,1.83c-4.77,0.17-10.35-0.25-14-1.5l1.19,4.18
c0,0,1.06,0.71,12.63,0.91c9.74,0.17,15.92-2.03,15.92-2.03l0.78-1.39C203.93,222.63,204.96,219.98,203.12,220.63z"/>
</g>
<g>
<path class="st6 cape-shadow-1" d="M105.52,94.33c0.57-0.92-0.82-5.08,1.44-9.01c2.92-5.06,8.58-7.23,0.57-3.97
c-14.21,5.78-50.71,23.88-60.98,29.41c0.01,0.01,0.01,0.01,0.02,0.02c8.52,5.46,12.53,18.39,13.79,31.57
c0.12,1.23,0.27,2.41,0.45,3.57c0.21,1.09,0.36,1.93,0.45,2.46c0.04,0.2,0.07,0.4,0.11,0.59C70.7,123.46,104.2,96.43,105.52,94.33
z"/>
<path class="st6 cape-shadow-2" d="M151.15,142.44c-9.55,10.68-33.57,30.57-50.8,31.69c24.26-0.61,33.89,11.47,41.09,27.08
c7.38-14.61,7.39-28.62,7.28-44.99C148.67,149.34,153.63,139.66,151.15,142.44z"/>
<path class="st6" d="M165.93,78.39L151.6,66.92c0,0-3.14,8.55-2.76,12.89s-5.03,7.53-2.48,9.98c2.55,2.45,8.99,6.99,11.07,9.53
s2.96,19.71,2.96,19.71l6.09,7.66c0,0,2.66-5.1,3.03-17.5c0.46-15.19-8.22-19.76-9.12-23.87
C159.48,81.22,162.25,76.91,165.93,78.39z"/>
<path class="st6" d="M188.09,146.05l-8.6,28.53c0,0,4.99,15.73,4.48,17.85c-0.5,2.12-9.27,13.17-9.27,13.17l10.94,0.96
c0,0,3.4-6.02,5.87-9.7c2.56-3.8,1.05-4.46,0-12.85S187.7,157.98,188.09,146.05z"/>
<path class="st6" d="M184.22,40.84l-12.29-2.23l-1.4-3.67l-3.56-0.15c2.15,4.9,4.94,7.08,9.13,8.62
c2.58,0.95,12.61,2.25,16.57-2.27c1.78-2.03,0.62-7.59,0.62-7.59L184.22,40.84z"/>
<path class="st6" d="M219.64,101.61c-2.43-2.22-3.8-6.76-4.22-9.18l-5.17,6.97l1.9,3.27c0,0,6.86,0.37,7.87,0.37
C220.96,103.03,220.8,102.66,219.64,101.61z"/>
</g>
</g>
<g class="logo-letters">
<g class="letter-G logo-letter">
<path class="letter-outline outline-G" d="M296.39,190.79c-12.56,0-22.18-4.36-28.59-12.95c-6.31-8.46-9.51-20.09-9.51-34.56
c0-14.54,4-26.05,11.88-34.2c7.9-8.16,17.69-12.3,29.11-12.3c11.31,0,21.7,3.23,30.87,9.61l0.73,0.51l-0.1,0.89
c-0.28,2.53-1.25,5.04-2.87,7.46c-1.6,2.37-3.39,4.23-5.34,5.53l-0.85,0.57l-0.84-0.59c-6.88-4.83-13.93-7.28-20.96-7.28
c-6.96,0-12.2,2.39-16.03,7.29c-3.87,4.95-5.83,12.93-5.83,23.72c0,20.27,7.13,30.12,21.8,30.12c4.04,0,8.31-0.46,12.71-1.38v-10.95
c0-2.91,0.05-5.21,0.14-6.95h-7.73c-3.05,0-5.28-0.64-6.8-1.96c-1.58-1.36-2.38-3.46-2.38-6.25c0-2.5,0.41-5,1.23-7.45l0.34-1.02
l21.18-0.13c8.18,0,12.51,4.1,12.51,11.87v34.46l-0.98,0.36C319.96,188.9,308.63,190.79,296.39,190.79z"/>
<path class="letter-G letter-face" d="M298.44,140.13l19.84-0.13c0.08,0,0.17,0,0.26,0c7.34,0,11.01,3.46,11.01,10.37v33.41
c-9.98,3.67-21.04,5.5-33.15,5.5c-12.12,0-21.25-4.12-27.39-12.35c-6.14-8.23-9.22-19.46-9.22-33.66s3.82-25.26,11.46-33.15
c7.64-7.89,16.98-11.84,28.03-11.84c11.05,0,21.06,3.12,30.02,9.34c-0.26,2.3-1.13,4.57-2.62,6.78c-1.49,2.22-3.14,3.93-4.93,5.12
c-7.17-5.03-14.44-7.55-21.82-7.55c-7.38,0-13.12,2.62-17.22,7.87c-4.1,5.25-6.14,13.46-6.14,24.64c0,21.08,7.76,31.62,23.3,31.62
c4.52,0,9.26-0.55,14.21-1.66v-12.16c0-3.84,0.08-6.66,0.26-8.45h-9.34c-2.65,0-4.59-0.53-5.82-1.6c-1.24-1.07-1.86-2.77-1.86-5.12
C297.29,144.76,297.67,142.44,298.44,140.13z"/>
</g>
<g class="letter-S logo-letter">
<path class="letter-outline outline-S" d="M369.54,190.79c-11.13,0-21.73-3.31-31.49-9.85l-0.76-0.51l0.11-0.91
c0.64-5.41,3.06-9.87,7.19-13.27l0.84-0.69l0.92,0.58c8.59,5.45,16.97,8.21,24.92,8.21c4.07,0,7.24-0.88,9.44-2.62
c2.12-1.68,3.14-3.81,3.14-6.5c0.15-4.45-2.91-7.96-9.34-10.79l-15.09-6.39c-12.42-5.54-18.71-13.67-18.71-24.17
c0-7.76,3.02-14.3,8.97-19.44c5.89-5.08,13.64-7.66,23.06-7.66c9.28,0,18.75,2.38,28.13,7.07l0.88,0.44l-0.05,0.98
c-0.27,5.41-2.33,9.97-6.1,13.55l-0.76,0.73l-0.94-0.47c-7.94-3.97-15.25-5.99-21.73-5.99c-3.79,0-6.76,0.89-8.82,2.65
c-2.01,1.72-2.99,3.71-2.99,6.09c0,3.51,2.84,6.49,8.43,8.86l15.1,6.4c13.35,5.79,20.12,14.47,20.12,25.83
c0,8.26-2.97,15.06-8.83,20.2C389.37,188.21,380.74,190.79,369.54,190.79z"/>
<path class="letter-S letter-face" d="M338.89,179.69c0.6-5.03,2.82-9.13,6.66-12.29c8.87,5.63,17.45,8.45,25.73,8.45
c4.44,0,7.89-0.98,10.37-2.94c2.47-1.96,3.71-4.52,3.71-7.68c0.17-5.03-3.24-9.09-10.24-12.16l-15.1-6.4
c-11.86-5.29-17.79-12.88-17.79-22.78c0-7.34,2.82-13.44,8.45-18.3s12.99-7.3,22.08-7.3s18.24,2.3,27.46,6.91
c-0.26,5.04-2.13,9.22-5.63,12.54c-8.19-4.1-15.66-6.14-22.4-6.14c-4.18,0-7.45,1-9.79,3.01c-2.35,2.01-3.52,4.42-3.52,7.23
c0,4.18,3.11,7.6,9.34,10.24l15.1,6.4c12.8,5.55,19.2,13.7,19.2,24.45c0,7.85-2.77,14.21-8.32,19.07c-5.55,4.86-13.76,7.3-24.64,7.3
S348.44,186.09,338.89,179.69z"/>
</g>
<g class="letter-A logo-letter">
<path class="letter-outline outline-A" d="M474.76,190.02c-3.61,0-6.19-0.73-7.9-2.23c-1.64-1.43-2.97-3.9-4.09-7.53l-3.51-11.34
l-5.53,0.11l-17.82,0l-5.43-0.11l-6.19,19.95l-0.82,0.2c-1.85,0.46-4.35,0.69-7.66,0.69c-3.34,0-6.07-0.43-8.12-1.26l-0.34-0.14
l-1.41-1.7l29.22-87.94l0.91-0.14c2.88-0.44,6.23-0.66,9.95-0.66c3.76,0,6.89,0.27,9.29,0.8l0.83,0.19l28.94,88.27l-1.09,0.6
C481.3,189.27,478.19,190.02,474.76,190.02z M450.76,152.71c0.26,0,1.11,0.02,2.54,0.06c0.38,0.01,0.73,0.02,1.06,0.03l-3.75-12.37
c-1.95-6.18-3.86-12.82-5.7-19.79c-1.07,4.48-2.58,9.86-4.48,16.08l-5.01,16.06l3.95-0.08H450.76z"/>
<path class="letter-A letter-face" d="M460.36,167.4l-6.66,0.13h-17.79l-6.53-0.13l-6.27,20.22c-1.71,0.43-4.14,0.64-7.3,0.64
c-3.16,0-5.68-0.38-7.55-1.15l-0.64-0.77l28.67-86.27c2.82-0.43,6.06-0.64,9.73-0.64c3.67,0,6.66,0.26,8.96,0.77l28.29,86.27
c-2.48,1.36-5.31,2.05-8.51,2.05s-5.5-0.62-6.91-1.86c-1.41-1.24-2.62-3.52-3.65-6.85L460.36,167.4z M433.35,154.34l6.02-0.13h11.39
c0.26,0,1.09,0.02,2.5,0.06c1.41,0.04,2.45,0.06,3.14,0.06l-4.35-14.34c-2.39-7.59-4.69-15.74-6.91-24.45h-0.64
c-1.02,5.21-2.86,12.12-5.5,20.74L433.35,154.34z"/>
</g>
<g class="letter-P logo-letter">
<path class="letter-outline outline-P" d="M502.98,189.63c-3.41,0-6.22-0.23-8.37-0.67l-1.19-0.25v-88.69l1.83-1.56l0.53-0.01
c13.67-0.34,22.73-0.51,27.69-0.51c9.39,0,17.07,2.65,22.83,7.88c5.81,5.27,8.75,12.92,8.75,22.74c0,9.82-2.94,17.51-8.74,22.86
c-5.76,5.32-13.45,8.01-22.84,8.01h-10.79v29.3l-1.21,0.24C509.24,189.41,506.38,189.63,502.98,189.63z M512.67,143.97
c5.02-0.14,8.22-0.21,9.76-0.21c4.79,0,8.02-1.39,9.88-4.24c1.96-3.02,2.96-6.67,2.96-10.83c0-4.16-0.99-7.78-2.95-10.76
c-1.85-2.82-4.98-4.19-9.56-4.19c-4.17,0-7.55-0.03-10.08-0.09V143.97z"/>
<path class="letter-P letter-face" d="M545.28,106.92c5.5,4.99,8.26,12.2,8.26,21.63c0,9.43-2.75,16.68-8.26,21.76c-5.5,5.08-12.78,7.62-21.82,7.62
h-12.29v29.57c-2.13,0.43-4.86,0.64-8.19,0.64s-6.02-0.21-8.06-0.64v-86.78l0.9-0.77c13.48-0.34,22.7-0.51,27.65-0.51
C532.5,99.43,539.78,101.93,545.28,106.92z M511.17,112.1v33.41c5.8-0.17,9.56-0.26,11.26-0.26c5.29,0,9-1.64,11.14-4.93
c2.13-3.28,3.2-7.17,3.2-11.65c0-4.48-1.07-8.34-3.2-11.58c-2.13-3.24-5.74-4.86-10.82-4.86
C517.68,112.23,513.82,112.19,511.17,112.1z"/>
</g>
</g>
<path class="logo-3-shadow" d="M657.72,92.37l-0.92-3.84h-4.69c1.14,6.18,1.07,12.17-0.23,16.41c-1.5,4.89-4.93,9.47-10.21,13.62l-12.75,9.94
c3.11,2.05,5.67,4.7,7.65,7.94c4.36,7.12,4.9,16.18,1.61,26.91c-3.8,12.37-11.19,22.28-21.98,29.44
c-10.58,7.03-22.12,10.59-34.3,10.59c-14.45,0-25.74-3.87-33.66-11.49c0,0.01-0.01,0.02-0.01,0.02l-1.5,2.96l2.14,2.53
c8.6,10.17,22.48,11.02,34.82,11.02c13.35,0,26.18-4.03,35.2-11.06c8.9-6.93,15.61-12.69,21.04-23.74
c3.57-7.27,7.25-22.72,4.55-31.65c-1.73-5.74-4.34-10.06-7.78-12.94l8.52-5.89l0.25-0.18c4.03-3.17,7.33-7.11,9.81-11.72
C656.72,108.56,659.86,101.31,657.72,92.37z"/>
<g class="logo-3-whole">
<path class="outline-3" d="M581.91,197.88c-14.37,0-25.13-4.11-32-12.23c-0.39-0.46-0.46-1.11-0.19-1.65
c3.13-6.17,8.37-11.67,15.59-16.34c0.25-0.16,0.53-0.24,0.81-0.24c0.4,0,0.79,0.16,1.08,0.46c4.83,5.04,10.59,7.5,17.59,7.5
c4.85,0,9.22-1.41,12.99-4.18c3.77-2.77,6.38-6.45,7.76-10.93c1.32-4.31,1.14-7.63-0.55-9.87c-1.72-2.28-4.14-3.38-7.41-3.38
c-3.53,0-6.91,0.62-10.04,1.85c-0.18,0.07-0.36,0.1-0.55,0.1c-0.24,0-0.47-0.06-0.69-0.17c-2.01-1.03-3.57-2.97-4.64-5.75
c-1-2.61-1.45-5.46-1.33-8.47c0.02-0.44,0.23-0.85,0.57-1.12l20.96-16.41c4.43-3.39,7.95-5.98,10.61-7.81
c-1.68,0.15-3.33,0.18-4.84,0.18c-1.2,0-2.43-0.02-3.69-0.04c-1.32-0.02-2.69-0.05-4.09-0.05h-23.14c-0.78,0-1.43-0.6-1.5-1.38
c-0.23-2.99,0.27-6.54,1.5-10.55c1.23-4,3.09-7.63,5.52-10.79c0.28-0.37,0.72-0.58,1.19-0.58h61.32c0.69,0,1.3,0.48,1.46,1.15
c1.45,6.07,1.61,12.26,0.42,16.14c-1.17,3.8-3.97,7.46-8.33,10.89l-17.09,13.33c-0.99,0.75-2.05,1.51-3.17,2.26
c6.27,1.52,10.92,4.71,13.86,9.5c3.5,5.72,3.85,13.27,1.04,22.42c-3.41,11.12-10.06,20.03-19.77,26.48
C603.51,194.63,592.99,197.88,581.91,197.88z"/>
<path class="outline-3-2" d="M581.91,197.88c-14.37,0-25.13-4.11-32-12.23c-0.39-0.46-0.46-1.11-0.19-1.65
c3.13-6.17,8.37-11.67,15.59-16.34c0.25-0.16,0.53-0.24,0.81-0.24c0.4,0,0.79,0.16,1.08,0.46c4.83,5.04,10.59,7.5,17.59,7.5
c4.85,0,9.22-1.41,12.99-4.18c3.77-2.77,6.38-6.45,7.76-10.93c1.32-4.31,1.14-7.63-0.55-9.87c-1.72-2.28-4.14-3.38-7.41-3.38
c-3.53,0-6.91,0.62-10.04,1.85c-0.18,0.07-0.36,0.1-0.55,0.1c-0.24,0-0.47-0.06-0.69-0.17c-2.01-1.03-3.57-2.97-4.64-5.75
c-1-2.61-1.45-5.46-1.33-8.47c0.02-0.44,0.23-0.85,0.57-1.12l20.96-16.41c4.43-3.39,7.95-5.98,10.61-7.81
c-1.68,0.15-3.33,0.18-4.84,0.18c-1.2,0-2.43-0.02-3.69-0.04c-1.32-0.02-2.69-0.05-4.09-0.05h-23.14c-0.78,0-1.43-0.6-1.5-1.38
c-0.23-2.99,0.27-6.54,1.5-10.55c1.23-4,3.09-7.63,5.52-10.79c0.28-0.37,0.72-0.58,1.19-0.58h61.32c0.69,0,1.3,0.48,1.46,1.15
c1.45,6.07,1.61,12.26,0.42,16.14c-1.17,3.8-3.97,7.46-8.33,10.89l-17.09,13.33c-0.99,0.75-2.05,1.51-3.17,2.26
c6.27,1.52,10.92,4.71,13.86,9.5c3.5,5.72,3.85,13.27,1.04,22.42c-3.41,11.12-10.06,20.03-19.77,26.48
C603.51,194.63,592.99,197.88,581.91,197.88z"/>
<path class="logo-3" d="M637.37,113.04l-17.08,13.32c-1.84,1.41-3.95,2.82-6.33,4.22c7.82,0.97,13.38,4.14,16.66,9.5
c3.28,5.36,3.58,12.43,0.89,21.2c-3.32,10.83-9.71,19.39-19.17,25.67c-9.46,6.28-19.6,9.42-30.43,9.42
c-13.97,0-24.26-3.9-30.85-11.7c3.02-5.95,8.04-11.21,15.07-15.76c5.09,5.31,11.31,7.96,18.68,7.96c5.2,0,9.82-1.49,13.88-4.47
c4.05-2.98,6.82-6.88,8.3-11.7c1.48-4.82,1.22-8.55-0.78-11.21c-2-2.65-4.87-3.98-8.61-3.98c-3.74,0-7.27,0.65-10.59,1.95
c-1.68-0.86-2.99-2.52-3.92-4.96c-0.93-2.44-1.35-5.06-1.24-7.88l20.96-16.41c6.79-5.2,11.5-8.55,14.14-10.07l-0.3-1.14
c-4.84,1.3-10.38,0.81-16.77,0.81h-23.14c-0.22-2.82,0.26-6.15,1.44-9.99c1.18-3.84,2.94-7.28,5.28-10.32h61.32
c1.42,5.96,1.52,11.84,0.44,15.35C644.12,106.41,641.51,109.79,637.37,113.04z"/>
<path class="waves-3" mask="url(#logo-3-mask)" d="M41.69,74.84c17.97,0,17.97-6.86,35.94-6.86c17.97,0,17.97,6.86,35.94,6.86
c17.96,0,17.96-6.86,35.92-6.86c17.97,0,17.97,6.86,35.93,6.86c17.97,0,17.97-6.86,35.94-6.86c17.97,0,17.97,6.86,35.93,6.86
c17.97,0,17.97-6.86,35.94-6.86c17.97,0,17.97,6.86,35.94,6.86c17.97,0,17.97-6.86,35.95-6.86c17.97,0,17.97,6.86,35.94,6.86
c17.97,0,17.97-6.86,35.94-6.86c17.97,0,17.97,6.86,35.94,6.86c17.97,0,17.97-6.86,35.95-6.86c17.97,0,17.97,6.86,35.94,6.86
c17.98,0,17.98-6.86,35.95-6.86c17.97,0,17.97,6.86,35.94,6.86c17.98,0,17.98-6.86,35.96-6.86v146.44H42.27L41.69,74.84z"/>
</g>
</g>
</g>
</svg>
</div>
</div>
</main>
Raw
script.js
console.clear();
var masterTl, sparkleTl, lidTl, shrinkTl, rotateTl, boxesSplitTl, boxesMergeTl, handPopTl, motionPathTl, inheritanceTl, utilityTl, utilityTextTl, writeInTl, staggerTl;
var lidInnerPath2 = "M230 55h340v100H230z";
var lidPath2 = "M230 55h340v1H230z";
var bodyInsidePath2 = "M570 155H230l-20 30h380z";
var lidHalf = "M300 125h200v60H300z";
var bodyHalf = "M305 185h190v90H305z";
var lidRotated = "M300 125h1v60h-1z";
var bodyRotated = "M305 185h1v90h-1z";
var boxMiddle = "M305 125h190v150H305z";
var boxShadowMiddle = "M262 280h276";
var boxMiddleSmall = "M320 138h160v124H320z";
var boxTopL2 = "M325 111h75v14h-95z";
var boxTopR2 = "M475 111h-75v14h95z";
var boxTopL3 = "M325 111l-43-39h-30l53 53z";
var boxTopR3 = "M475 111l43-39h30l-53 53z";
var handPath1 = "M403.1 260.2c-71.6-139.8-302.4-111.1-302.4-111.1S175.5 34.4 286 63.7s56.5 157.9 165.2 200.9C583.7 317 699 120.6 699 120.6";
var motionPathLine2 = "M100.8 149.2s59.7-66.8 185.3-85.4C366 52 442 52 523 63c90.6 12.3 144.4 34.8 176.1 57.7";
var greenFill = "#57A818";
var greenShadow = "#499110";
var greenStroke = "#344F00";
gsap.registerPlugin(DrawSVGPlugin, MorphSVGPlugin, MotionPathPlugin, SplitText);
gsap.set('.toolbox', {y: 400});
gsap.set('#colors path', {y: -40, strokeWidth: "random(12,20,1)", opacity: "random(.3, .6, .02)", drawSVG: "0% 0%"});
gsap.set('#colors', {opacity: 1});
gsap.set('#gsap-3-logo', {x: 60, y: 60, scale: .8, transformOrigin: "50% 50%"});
//gsap.set('#logo-mask-main-path', {y: 0});
gsap.set('.tb-sparkle', {scale: 0, transformOrigin: "50% 50%"});
gsap.set('#tb-sparkle-1', {opacity: .75});
gsap.set('#tb-sparkle-2', {opacity: .7});
gsap.set('#tb-sparkle-3', {opacity: .65});
gsap.set('#tb-lid-inner', {x: 0});
gsap.set('.box, #box-5, .box-top, #box-top-inner', {opacity: 0});
gsap.set('#box-5-body', {morphSVG: boxMiddleSmall});
gsap.set('.box path', {morphSVG: boxMiddle});
gsap.set('.box-shadow', {morphSVG: boxShadowMiddle, opacity: 0});
gsap.set('#hand', {x: 0, y: 0, xPercent: -34, yPercent: -10, transformOrigin: "36% 1%", rotation: "0deg"});
gsap.set('#motion-path-visual', {drawSVG: "0% 0%"});
gsap.set('.anchor', {transformOrigin: "50% 50%"});
gsap.set('.sock', {opacity: 1, transformOrigin: "33% 65%", xPercent: 20, scale: 0});
gsap.set('.colored-sock', {transformOrigin: "33% 65%"});
gsap.set('#text-utils-animation', {x:0,y:0});
var split = new SplitText('#text-features, #text-half, #text-api, #text-motionpath, #text-inheritance, #text-utility, #text-staggers', {type: "chars"});
split = new SplitText('#text-utils-animation .left', {type: "chars"});
gsap.set('h3', {opacity: 1});
staggerTl = gsap.timeline({paused: false, repeat: 0, repeatDelay: 1});
staggerTl
.to('#squares div', {rotation: "70deg",/*rotateY: "360deg",*/ scale: 0, yoyo: true, repeat: 1, duration: 1.5, ease: "power2.out", stagger: {amount:.5, grid: [5,10], from:"center", grid:"auto"}})
;
var logoFadesTl = gsap.timeline();
logoFadesTl
.to("#gsap-3-logo", {autoAlpha:1, duration:0.3})
.from(".logo-guy", {x:-10, y:3, ease: "power1", duration:3.2}, 5.7)
.from(".logo-guy", {autoAlpha: 0, duration: 2.5}, 5.5)
;
var logoLettersTl = gsap.timeline({defaults:{duration:0.5}});
logoLettersTl
.from(".letter-outline", {drawSVG:false, duration:1, stagger:0.2})
.addLabel("lettersIn", "-=0.9")
.from(".letter-face", {scale: 0.3, transformOrigin:"center center", ease:"power4", duration:1.3, stagger:0.13}, "lettersIn")
.to(".letter-face", {opacity:1, stagger:0.1}, "lettersIn")
.from(".letter-outline", {stroke:"#88CE02", stagger:0.1}, "lettersIn+=0.6")
;
var logoIntroTl = gsap.timeline();
logoIntroTl
.set(".outline-3", {stroke:"#88CE02", drawSVG:"50% 50%"})
.set(".outline-3-2", {drawSVG:"50% 50%"})
.to(".outline-3", {drawSVG:"0% 100%", ease:"power1.in", duration:1.8})
.fromTo("#mask-3", {x:-500, y:-130}, {x:0, y:0, duration:1.8, ease:"none"}, "-=0.2")
.fromTo(".waves-3", {x:500, y:130, autoAlpha:1}, {x:0, y:0, duration:1.8, ease:"none"}, "-=1.8")
.to(".outline-3-2", {drawSVG:"0% 100%", ease:"power1.in", duration:2}, 0.4)
;
var logoMoveTl = gsap.timeline();
logoMoveTl
.set(".logo-3-whole", {svgOrigin:"605 150"})
.from(".logo-3-whole", {x:-260, rotation:-360, duration:0.9, ease:"back.inOut"})
.to(".logo-3-whole", {y:-130, ease:"power1.inOut", duration:0.3}, 0.2)
.to(".logo-3-whole", {y:0, ease:"elastic", duration:1.1}, 0.5)
.to(".logo-3-shadow", {autoAlpha:1, duration:1.3}, "-=0.9")
;
var logoTl = gsap.timeline({paused: true});
logoTl
.add(logoIntroTl)
.add(logoMoveTl, "-=0.3")
.add(logoLettersTl, "-=1.3")
.add(logoFadesTl, 0)
;
//logoTl.timeScale(1.5);
logoTl.pause();
lidTl = gsap.timeline({paused: true});
lidTl
// lid bounce
.addLabel("lid-bounce", 0)
.to('.tb-lid', {scaleY: .8, y: 8, duration: .2, ease: Power1.easeOut, transformOrigin: "50% 100%"}, "lid-bounce")
.to('#tb-highlight, #tb-handle', {y: 20, duration: .2, ease: Power1.easeOut}, "lid-bounce")
.to('#tb-shadow', {y: 8, duration: .2, ease: Power1.easeOut}, "lid-bounce")
.to('#tb-lid-latch-l, #tb-lid-latch-r', {y: 8, duration: .2, ease: Power1.easeOut}, "lid-bounce")
.to('.tb-lid', {scaleY: 1, y: 0, duration: .2, ease: Power1.easeIn}, "lid-bounce+=.2")
.to('#tb-highlight, #tb-handle', {y: 0, duration: .2, ease: Power1.easeIn, transformOrigin: "50% 0%"}, "lid-bounce+=.2")
.to('#tb-shadow', {y: 0, duration: .2, ease: Power1.easeIn}, "lid-bounce+=.2")
.to('#tb-lid-latch-l, #tb-lid-latch-r', {y: 0, duration: .2, ease: Power1.easeIn}, "lid-bounce+=.2")
// lid open
.addLabel("lid-open", .4)
.to('#tb-lid-inner', {morphSVG: lidInnerPath2, duration: .4, ease: Quad.easeOut}, "lid-open")
.to('.tb-lid', {morphSVG: lidPath2, duration: .4, ease: Quad.easeOut}, "lid-open")
.to('#tb-body-inner', {morphSVG: {shape: bodyInsidePath2, shapeIndex: 0}, duration: .4, ease: Quad.easeOut}, "lid-open")
.to('.tb-lid-latch', {y: -124, scaleY: .5, duration: .4, ease: Quad.easeOut}, "lid-open")
.to('#tb-highlight', {y: -70, scaleX: .85, scaleY: 0, duration: .4, ease: Quad.easeOut}, "lid-open")
.to('#tb-handle', {y: 20, scaleY: .75, duration: .4, ease: Quad.easeOut}, "lid-open")
;
lidTl.progress(1);
//lidTl.play();
shrinkTl = gsap.timeline({paused: false, defaults: {ease: "back.out(4)"}});
shrinkTl
.addLabel("shrink", 1)
.to('#tb-lid-inner, #tb-body-inner', {duration: 0, opacity: 0}, "shrink")
.to('.tb-lid', {morphSVG: lidHalf, duration: .4, transformOrigin: "50% 50%"}, "shrink")
.to('.tb-body', {morphSVG: bodyHalf, duration: .4, transformOrigin: "50% 50%"}, "shrink")
.to('#tb-shadow, #tb-highlight', {scaleX: .5, duration: .4, transformOrigin: "50% 50%"}, "shrink")
//.to('.tb-lid, .tb-body, #tb-shadow, #tb-highlight', {scaleX: .5, duration: .4, transformOrigin: "50% 50%"}, "shrink")
.to('#tb-handle', {scale: .5, duration: .4, transformOrigin: "50% 100%"}, "shrink")
.to('#tb-lid-latch-l, #tb-body-latch-l', {x: 98, duration: .4, ease: "expo.out"}, "shrink")
.to('#tb-lid-latch-r, #tb-body-latch-r', {x: -98, duration: .4, ease: "expo.out"}, "shrink")
.to('#tb-drop-shadow', {drawSVG: "20% 80%", duration: .4}, "shrink")
.to('#tb-drop-shadow', {duration: 0, opacity: 0}, "shrink+=.4")
.to('.box-shadow', {duration: 0, opacity: 1}, "shrink+=.4")
;
//shrinkTl.play();
//shrinkTl.progress(.99);
rotateTl = gsap.timeline({paused: true, repeat: -1, repeatDelay: 2, defaults: {ease: "expo.in", duration: .75}});
rotateTl
.addLabel("rotate", .1)
.to('#tb-lid-latch-l, #tb-body-latch-l', {duration: 0, opacity: 0}, "rotate")
.to('.tb-body-side, .tb-lid-side', {duration: 0, opacity: 1}, "rotate")
.to('.tb-body', {morphSVG: bodyRotated}, "rotate")
.to('.tb-body', {duration: 0, opacity: 0}, "rotate+=.75")
.to('.tb-lid', {morphSVG: lidRotated}, "rotate")
.to('.tb-lid', {duration: 0, opacity: 0}, "rotate+=.75")
//.to('#tb-highlight, #tb-shadow', {scaleX: 0, transformOrigin: "0% 50%"}, "rotate")
.to('#tb-lid-latch-r, #tb-body-latch-r', {x: -195, duration: .75}, "rotate")
.to('#tb-lid-latch-r, #tb-body-latch-r', {scaleX: 0, transformOrigin: "50% 0%"}, "rotate")
.to('#tb-handle', {scaleX: -.5, duration: 1, ease: "power1.inOut"}, "rotate+=.15")
.to('#tb-handle', {duration: .6, y: 25, ease: "back.in(2.5)"}, "rotate+=.5")
.to('#tb-handle', {duration: 0, opacity: 0}, "rotate+=1.1")
.addLabel("rotate2", .85)
.to('.box', {duration: 0, opacity: 1}, "rotate2")
.to('.tb-body-side', {morphSVG: bodyRotated, ease: "none", duration: .25}, "rotate2")
.to('.tb-lid-side', {morphSVG: lidRotated, ease: "none", duration: .25}, "rotate2")
.to('.tb-body-side, .tb-lid-side', {duration: 0, opacity: 0}, "rotate2+=.25")
.to('#tb-highlight, #tb-shadow', {scaleX: 0, transformOrigin: "0% 50%", ease: "none", duration: .25}, "rotate2")
;
//rotateTl.seek(0);
//rotateTl.play();
sparkleTl = gsap.timeline({paused: true, defaults: {ease: Power1.easeInOut, duration: 2}, repeat: -1, repeatDelay: 1});
sparkleTl
.to('#tb-sparkle-1', {scale: 1.5, rotation: "60deg"}, "0")
.to('#tb-sparkle-1 path', {drawSVG: "0 0", duration: 1, ease: "none"}, "1")
.to('#tb-sparkle-3', {scale: 1.5, rotation: "90deg"}, "1")
.to('#tb-sparkle-3 path', {drawSVG: "0 0", duration: 1,ease: "none"}, "2")
.to('#tb-sparkle-2', {scale: 1.5, rotation: "-80deg"}, "2")
.to('#tb-sparkle-2 path', {drawSVG: "0 0", duration: 1, ease: "none"}, "3")
;
//sparkleTl.timeScale(2);
//sparkleTl.play();
boxesSplitTl = gsap.timeline({paused: false, defaults: {duration: .55, ease: "back.out(1.5)"}});
boxesSplitTl
.to('#box-1 path', {morphSVG: '#box-1 path'}, 0)
.to('#box-1', {x: -280}, 0)
.to('#box-2 path', {morphSVG: '#box-2 path'}, .15)
.to('#box-2', {x: -94}, .15)
.to('#box-3 path', {morphSVG: '#box-3 path'}, .22)
.to('#box-3', {x: 94}, .22)
.to('#box-4 path', {morphSVG: '#box-4 path'}, .25)
.to('#box-4', {x: 280}, .25)
.to('#box-shadow-1', {morphSVG: '#box-shadow-1'}, 0)
.to('#box-shadow-2', {morphSVG: '#box-shadow-2'}, .15)
.to('#box-shadow-3', {morphSVG: '#box-shadow-3'}, .22)
.to('#box-shadow-4', {morphSVG: '#box-shadow-4'}, .25)
;
boxesMergeTl = gsap.timeline({paused: false, defaults: {duration: .5, ease: "back.out(10)"}});
boxesMergeTl
.to('#box-1 path, #box-2 path, #box-3 path, #box-4 path', {morphSVG: boxMiddleSmall}, 0)
.to('#box-1, #box-2, #box-3, #box-4', {x: 0, ease: "back.in(2)"}, 0)
.to('.box-shadow', {morphSVG: boxShadowMiddle, ease: "back.in(2)"}, 0)
.to('.box text', {opacity: 0, ease: "none"}, 0)
.to('#box-5', {opacity: 1, duration: .01, ease: "none"}, .5)
.to('#tb-drop-shadow', {opacity: 1, duration: .01, ease: "none"}, .5)
.to('.box, .box-shadow', {opacity: 0, duration: .01, ease: "none"}, .5)
.to('#box-5-body', {morphSVG: '#box-5-body', ease: "back.out(3)"}, .5)
.to('#tb-drop-shadow', {drawSVG: "15% 85%", y: 5, duration: .2, ease: "expo.out"}, .5)
.to('#tb-drop-shadow', {drawSVG: "22% 78%", y: 0, duration: .3, ease: "quad.inOut"}, .7)
;
handPopTl = gsap.timeline({defaults: {ease: "expo.out"}});
handPopTl
// box moves down offscreen
.to('#box-5, #tb-drop-shadow, #box-top-inner', {y: 400, duration: 1.5, ease: "expo.in"}, 0)
// box top changes perspective
.to('.box-top', {opacity: 1, duration: .01, ease: "none"}, 0)
.to('#box-top-l', {morphSVG: boxTopL2, duration: .6, ease: "quad.out"}, .5)
.to('#box-top-r', {morphSVG: boxTopR2, duration: .6, ease: "quad.out"}, .5)
.to('#box-top-inner', {opacity: 1, duration: .01, ease: "none"}, 1.1)
.to('#hand', {x: 0, y: 0, opacity: 1, duration: .01, ease: "none"}, 1.1)
.to('#box-top-l', {morphSVG: {shape: boxTopL3, shapeIndex: 0}}, 1.1)
.to('#box-top-r', {morphSVG: {shape: boxTopR3, shapeIndex: 0}}, 1.1)
.to('#hand', {y: -150, duration: 1, ease: "power1.out"}, 1)
.to('#hand', {y: 80, duration: .75, ease: "cubic.inOut"}, 2)
;
motionPathTl = gsap.timeline({defaults: {}});
motionPathTl
// move hand to start of drawing path
.to('#hand', {motionPath: {path: [{x: -50, y: -10},{x: -265, y: -12}], curviness: 1.3}, ease: "power1.inOut"}, 0)
// draw path in and move hand along path
.to('#motion-path-visual', {opacity: 1, duration: .01, ease: "none"}, .5)
.to('#hand', {motionPath:{path: '#motion-path-visual', align: 'self'}, ease: "power1.inOut", duration: 2}, .5)
.to('#hand', {motionPath:{path: [{rotation: "-40deg"}, {rotation: "-10deg"}, {rotation: "-60deg"}], curviness: 2}, ease: "none", duration: 2}, .5)
.to('#motion-path-visual', {drawSVG: "0% 100%", ease: "power1.inOut", duration: 2}, .5)
// move hand away
.to('#hand', {duration: 1, ease: "power1.inOut", motionPath: {path:[{x:320,y:50},{x:295,y:100}], curviness: 1}}, 2.5)
.to('#hand', {duration: 1, rotation: "-10deg"}, 2.5)
// bring sock in and move it right along path
.to('.sock', {scale: 1, ease: "back.out(3)", duration: .5}, 1.5)
.to('.sock', {motionPath: {path: '#motion-path-visual', align: 'self', start: 0, end: 1}, duration: 2, ease: "power2.inOut"}, 2.15)
// drag anchor point to new position
.fromTo('.anchor', {opacity: 0, scale: 0}, {opacity: 1, scale: 1, ease: "back.out(3)", duration: .75, stagger: .4}, 3.25)
.to('#hand', {motionPath:{path:[{x:110,y:110},{x:83,y:105}], curviness: .5}, duration: .6, ease: "power1.inOut"}, 4.4)
.to('#hand', {scale: .85, duration: .1, ease: "none"}, 5.1)
.to('#hand', {scale: 1, duration: .1, ease: "none"}, 6.3)
.to('#anchor-3', {x: 71, y: -202, duration: 1, ease: "power1.inOut"}, 5.25)
.to('#hand', {x: 153, y: -96, duration: 1, ease: "power1.inOut"}, 5.25)
.to('#motion-path-visual', {morphSVG: motionPathLine2, duration: 1, ease: "power1.inOut"}, 5.25)
.to('#hand', {motionPath:{path:[{x:153,y:-96},{x:165,y:-40}], curviness: .5}, duration: .5, ease: "power1.out"}, 6.35)
.to('#hand', {rotation: "0deg", duration: .5, ease: "power1.out"}, 6.35)
// move sock left along new path
.set('.sock', {x:0,y:0}, 6.25) // move sock back to origin so we can tween it from right-to-left along the path in the next line
.to('.sock', {motionPath: {path: motionPathLine2, align: 'self', start: 1, end: 0}, duration: 1.25, ease: "power2.inOut"}, 6.25)
// transition line out
.to('#motion-path-visual', {drawSVG: "0% 0%", ease: "power1.inOut", duration: 1.15}, 7)
.to('.anchor', {opacity: 0, scale: 0, ease: "back.in(3)", duration: .75, stagger: -.3}, 7.2)
;
inheritanceTl = gsap.timeline({paused: false, defaults: {}});
inheritanceTl
// move sock to middle of frame
.to('.sock', {x: 300, y: -34, duration: .4, ease: "power2.easeInOut"}, 0)
.to('.sock', {x: 277.5, ease: "power1.easeInOut"}, .5)
.to('.sock', {motionPath:{path:[{rotation:"-5deg"},{rotation:"5deg"},{rotation:"-5deg"},{rotation:"5deg"},{rotation:"0deg"}], curviness: 2}}, .9)
// make colored socks visible and place them
.set('#sock-red', {x: 110, y: -130, scale: .5}, .8)
.set('#sock-blue', {x: -20, y: -130, scale: .5}, .8)
.set('#sock-yellow', {x: -145, y: -130, scale: .5}, .8)
.set('.colored-sock', {opacity: 1}, .8)
// socks pop out of sock
.to('#sock-red', {motionPath: {path: [{x: 75, y: -220}, {x: 0, y: 0}], curviness: 3}, duration: 1, ease: "power1.inOut"}, 1)
.to('#sock-red', {scale: 1, duration: .5}, 1.5)
.to('#sock-blue', {motionPath: {path: [{x: 75, y: -220}, {x: 0, y: 0}], curviness: 3}, duration: 1, ease: "power1.inOut"}, 1.2)
.to('#sock-blue', {scale: 1, duration: .5}, 1.6)
.to('#sock-yellow', {motionPath: {path: [{x: -100, y: -220}, {x: 0, y: 0}], curviness: 2}, duration: 1, ease: "power1.inOut"}, 1.4)
.to('#sock-yellow', {scale: 1, duration: .5}, 1.7)
// hand moves to sock and clicks
.to('#hand', {motionPath:{path:[{x:165,y:-40},{x:10,y:-45}], curviness: .5}, duration: .5, ease: "power2.inOut"}, 2.75)
.to('#hand', {rotation: "-30deg", duration: .5, ease: "power1.out"}, 2.75)
.to('#hand', {scale: .85, duration: .1, ease: "none"}, 3.3)
.to('#hand', {scale: 1, duration: .1, ease: "none"}, 3.4)
// socks change color
.to('.red-base', {fill: greenFill}, 3.5)
.to('.red-shadow', {fill: greenShadow}, 3.5)
.to('.red-stroke', {stroke: greenStroke}, 3.5)
.to('#sock-red', {motionPath:{path:[{scaleX:1.2,scaleY:1.2},{scaleX:1,scaleY:1}], curviness: 0}}, 3.5)
.to('.blue-base', {fill: greenFill}, 3.7)
.to('.blue-shadow', {fill: greenShadow}, 3.7)
.to('.blue-stroke', {stroke: greenStroke}, 3.7)
.to('#sock-blue', {motionPath:{path:[{scaleX:1.2,scaleY:1.2},{scaleX:1,scaleY:1}], curviness: 0}}, 3.7)
.to('.yellow-base', {fill: greenFill}, 3.9)
.to('.yellow-shadow', {fill: greenShadow}, 3.9)
.to('.yellow-stroke', {stroke: greenStroke}, 3.9)
.to('#sock-yellow', {motionPath:{path:[{scaleX:1.2,scaleY:1.2},{scaleX:1,scaleY:1}], curviness: 0}}, 3.9)
// hand moves away from sock
.to('#hand', {motionPath:{path:[{x:10,y:-45},{x:175,y:-60}], curviness: .5}, duration: .7, ease: "power1.inOut"}, 3.7)
.to('#hand', {rotation: "-5deg", duration: .7, ease: "power1.out"}, 3.7)
// colored socks go back into large sock
.to('#sock-red', {motionPath: {path: [{x: 75, y: -220},{x:110,y:-130}], curviness: 3}, duration: 1, ease: "power2.inOut"}, 5)
.to('#sock-red', {scale: .5, duration: .5}, 5.5)
.to('#sock-blue', {motionPath: {path: [{x: 75, y: -220},{x:-30,y:-130}], curviness: 3}, duration: 1, ease: "power2.inOut"}, 5.2)
.to('#sock-blue', {scale: .5, duration: .5}, 5.7)
.to('#sock-yellow', {motionPath: {path: [{x: 75, y: -220},{x:-155,y:-130}], curviness: 2}, duration: 1, ease: "power2.inOut"}, 5.3)
.to('#sock-yellow', {scale: .5, duration: .5}, 5.8)
.set('.colored-sock', {opacity: 0}, 6.3)
// sock disappears
.to('.sock', {scale: 0, ease: "back.in(2)", duration: .4}, 6.2)
;
writeInTl = gsap.timeline({paused: true});
writeInTl
.addLabel("writeIn", 0)
.set('#text-utils-animation .left div', {opacity: 0}, "writeIn")
.set('#text-utils-animation .left div:nth-of-type(1)', {opacity: 1}, "writeIn+=.1")
.set('#caret', {x: -50}, "writeIn+=.1")
.set('#text-utils-animation .left div:nth-of-type(2)', {opacity: 1}, "writeIn+=.2")
.set('#caret', {x: -27}, "writeIn+=.2")
.set('#text-utils-animation .left div:nth-of-type(3)', {opacity: 1}, "writeIn+=.3")
.set('#caret', {x: -2}, "writeIn+=.3")
.set('#text-utils-animation .left div:nth-of-type(4)', {opacity: 1}, "writeIn+=.4")
.set('#caret', {x: 23}, "writeIn+=.4")
.set('#text-utils-animation .left div:nth-of-type(5)', {opacity: 1}, "writeIn+=.5")
.set('#caret', {x: 45}, "writeIn+=.5")
.set('#text-utils-animation .left div:nth-of-type(6)', {opacity: 1}, "writeIn+=.6")
.set('#caret', {x: 70}, "writeIn+=.6")
.set('#text-utils-animation .left div:nth-of-type(7)', {opacity: 1}, "writeIn+=.7")
.set('#caret', {x: 95}, "writeIn+=.7")
.set('#text-utils-animation .left div:nth-of-type(8)', {opacity: 1}, "writeIn+=.8")
.set('#caret', {x: 120}, "writeIn+=.8")
.set('#text-utils-animation .left div:nth-of-type(9)', {opacity: 1}, "writeIn+=.9")
.set('#caret', {x: 145}, "writeIn+=.9")
.set('#text-utils-animation .left div:nth-of-type(10)', {opacity: 1}, "writeIn+=1")
.set('#caret', {x: 170}, "writeIn+=1")
;
utilityTl = gsap.timeline({paused: false, defaults: {}});
utilityTl
// move hand and turn into cursor
.set('#text-cursor', {x: 100, y: -15}, 0)
.to('#hand', {motionPath:{path:[{x:-10,y:-10},{x:-60,y:-10}], curviness: 1}, duration: .6, ease: "sine.in"}, 0)
.set("#hand", {opacity: 0}, .6)
.set('#text-cursor', {opacity: 1}, .6)
.to('#text-cursor', {x: -80, y: 5, ease: "sine.out", duration: .4}, .6)
// click cursor and show blinking caret
.to('#text-cursor', {scale: .85, transformOrigin: "50% 50%", duration: .1, ease: "none"}, 1.1)
//.to('#text-cursor', {scale: 1, duration: .1, ease: "none"}, 1.2)
.set('#text-cursor', {opacity: 0}, 1.2)
.set('#caret', {x: -80, y: 5, opacity: 1, scale: .85, transformOrigin: "50% 50%"}, 1.2)
.to('#caret', {scale: 1, duration: .1, ease: "none"}, 1.2)
.set('#caret', {opacity: 0}, 1.8)
.set('#caret', {opacity: 1}, 2.2)
.set('#caret', {opacity: 0}, 2.6)
.set('#caret', {opacity: 1}, 3)
// write gsap.utils in
.to(writeInTl, {time: .4, duration: .6, ease: "none"}, 3)
.to(writeInTl, {time: 1, duration: .7, ease: "none"}, 3.9)
.set('#caret', {opacity: 0}, 4.9)
// animate utility method text in
.fromTo('#text-utils-animation .right span', {y: 100, opacity: 0}, {y: 0, opacity: 1, stagger: {each: .5}, ease: "power2.out"}, 4.7)
.to('#text-utils-animation .right span', {y: -100, opacity: 0, stagger: {each: .5}, ease: "power2.out"}, 5.2)
// untype gsap.utils
.set('#caret', {opacity: 1}, 10)
.to(writeInTl, {time: 0, duration: .9, ease: "none"}, 10.1)
.set('#caret', {opacity: 0}, 11.2)
;
masterTl = gsap.timeline({paused: true, repeat: -1, repeatDelay: 1, defaults: {ease: "none"}});
masterTl
// logo animation
.addLabel("logo", 0)
//.to(logoTl, {progress: 1, duration: logoTl.duration()*.75, ease: "none"}, "logo")
.to(logoTl, {progress: 1, duration: .01, ease: "none"}, "logo")
.to('#gsap-3-logo', {scale: 0, duration: 1.75, ease: "power1.out"}, "logo+=3.5")
.to('#gsap-3-logo', {y: 400, duration: 1.5, ease: "power2.inOut"}, "logo+=3.5")
.to('.toolbox', {y: 0, duration: 1, ease: "power2.out"}, "logo+=3.5")
.to('#logo-mask-main-path', {y: -400, duration: 1, ease: "power2.out"}, "logo+=3.5")
// open toolbox lid
.addLabel("lid-open", "logo+=4")
//.to(lidTl, {progress: 1, duration: lidTl.duration()}, "lid-open")
//.set(lidTl, {progress: 1}, "lid-open")
// features text in
.fromTo('#text-features div', {opacity: 0, y: 50}, {opacity: 1, y: 0, duration: 1, stagger: {amount: .5}, ease: Expo.easeOut}, "lid-open+=1")
.fromTo('#colors path', {drawSVG: "-40% 0%"}, {drawSVG: "100% 140%", duration: .25, ease: "none", stagger: {amount: 2}}, "lid-open+=1.5")
//.to('#colors path', {drawSVG: "100% 140%", duration: .25, ease: "power1.inOut", stagger: {amount: 2}}, "lid-open+=1")
// close toolbox lid
.addLabel("lid-close", "lid-open+=3.5")
.to(lidTl, {progress: 0, duration: lidTl.duration() * .75}, "lid-close")
.to(sparkleTl, {progress: 1, duration: sparkleTl.duration()*.5}, "lid-close+=.5")
// features text out
.to('#text-features div', {opacity: 0, y: 50, duration: 1, stagger: {amount: .25}, ease: Expo.easeIn}, "lid-close")
// shrink toolbox
.addLabel("shrink", "lid-close+=2")
//.to(shrinkTl, {progress: 1, duration: shrinkTl.duration()}, "shrink")
.add(shrinkTl, "shrink")
// half text in
.fromTo('#text-half div', {opacity: 0, y: 50}, {opacity: 1, y: 0, duration: 1, stagger: {amount: .25}, ease: Expo.easeOut}, "shrink+=.25")
// half text out
.to('#text-half div', {opacity: 0, y: 50, duration: 1, stagger: {amount: .25}, ease: Expo.easeIn}, "shrink+=2")
// rotate toolbox
.addLabel("rotate", "shrink+=3")
.to(rotateTl, {progress: 1, duration: rotateTl.duration()}, "rotate")
// product boxes
.addLabel("boxes", "rotate+=1.1")
.add(boxesSplitTl, "boxes")
// api text in
.fromTo('#text-api div', {opacity: 0, y: 50}, {opacity: 1, y: 0, duration: 1, stagger: {amount: .25}, ease: Expo.easeOut}, "boxes+=1")
// merge boxes
.add(boxesMergeTl, "boxes+=2")
// api text out
.to('#text-api div', {opacity: 0, y: 50, duration: 1, stagger: {amount: .25}, ease: Expo.easeIn}, "boxes+=3")
// hand pop out
.addLabel("handPopout", "boxes+=3.4")
.add(handPopTl, "handPopout")
// motion path
.addLabel("motionPath", "handPopout+=3")
.add(motionPathTl, "motionPath")
// motion path text in
.fromTo('#text-motionpath div', {opacity: 0, y: 50}, {opacity: 1, y: 0, duration: 1, stagger: {amount: .25}, ease: Expo.easeOut}, "motionPath-=.5")
// motion path text out
.to('#text-motionpath div', {opacity: 0, y: 50, duration: 1, stagger: {amount: .25}, ease: Expo.easeIn}, "motionPath+=7.1")
// inheritance
.addLabel("inheritance", "motionPath+=8.5")
.add(inheritanceTl, "inheritance")
// inheritance text in
.fromTo('#text-inheritance div', {opacity: 0, y: 50}, {opacity: 1, y: 0, duration: 1, stagger: {amount: .25}, ease: Expo.easeOut}, "inheritance+=1.25")
// inheritance text out
.to('#text-inheritance div', {opacity: 0, y: 50, duration: 1, stagger: {amount: .25}, ease: Expo.easeIn}, "inheritance+=5")
// utility methods
.addLabel("utility", "inheritance+=7")
.add(utilityTl, "utility")
// utility text in
.fromTo('#text-utility div', {opacity: 0, y: 50}, {opacity: 1, y: 0, duration: 1, stagger: {amount: .25}, ease: Expo.easeOut}, "utility+=1")
// utility text out
.to('#text-utility div', {opacity: 0, y: 50, duration: 1, stagger: {amount: .25}, ease: Expo.easeIn}, "utility+=11")
// staggers
.addLabel("staggers", "utility+=13")
.add(staggerTl, "staggers")
// stagger text in
.fromTo('#text-staggers div', {opacity: 0, y: 50}, {opacity: 1, y: 0, duration: 1, stagger: {amount: .25}, ease: Expo.easeOut}, "staggers+=1")
// stagger text out
.to('#text-staggers div', {opacity: 0, y: 50, duration: 1, stagger: {amount: .25}, ease: Expo.easeIn}, "staggers+=5")
.addLabel("end", "staggers+=6")
.set('#gsap-3-logo', {scale: .8, y: 60}, "end")
.to('#logo-mask-main-path', {y: 0, duration: .01, ease: "none"}, "end")
.fromTo(logoTl, {progress: 0}, {progress: 1, duration: logoTl.duration()*.75, ease: "none"}, "end")
.to('body', {}, "end+=5")
;
//masterTl.seek("motionPath");
masterTl.play();
Raw
scripts
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomEase3.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin3.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin3.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MotionPathPlugin.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ScrambleTextPlugin3.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/SplitText3.min.js"></script>
Raw
style.scss
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:700|Signika+Negative:700&display=swap');
@mixin breakpoint($point) {
@media (max-width: $point + "px") { @content ; }
}
body {
background: #262626;
width: 100%; min-height: 100vh;
display: flex; flex-flow: row nowrap; justify-content: center; align-items: center;
}
main {
width: 100%; max-width: 800px;
position: relative;
font-family: 'Signika Negative', sans-serif; color: #FFF;
overflow: hidden;
#intro-svg {
width: 100%; max-width: 800px;
position: absolute; top: 0; left: 0;
div {padding-bottom: 50%;}
}
#force-2-1-aspect-ratio {width: 100%; padding-top: 50%;}
h3 {
position: absolute; bottom: 1em; opacity: 0;
font-size: 2.625em; font-weight: 700;
line-height: 100%;
width: 100%;
text-align: center;
div {display: inline-block; opacity: 0;}
}
h4 {
position: absolute; left: 20%; top: 45.5%;
opacity: 1;
font-size: 2.5em; font-weight: 700; font-family: 'Roboto Mono', monospace;
line-height: 100%;
display: block;
vertical-align: baseline;
.left {
display: inline-block;
color: #57A818;
div {opacity: 0;}
}
.right {
display: inline-block; position: relative; right: .5em;
span {
position: absolute; top: 0; left: 0;
opacity: 0;
}
}
}
#squares {
position: absolute; top: 0; left: 0;
width: 100%; height: 100%;
display: flex; flex-flow: row wrap;
justify-content: flex-start; align-items: flex-start;
&::after {
content: "";
width: 100%; height: 100%;
position: absolute; top: 0; left: 0;
z-index: -1;
background: #57A818;
}
div {
margin: 0; padding: 0;
width: 10%; height: 20%;
background: #262626;
border: solid 4px blue; border: none; box-sizing: border-box;
display: inline-block;
position: relative;
transform-style: preserve-3d;
backface-visibility: visible;
/*&::after {
content: '';
position: absolute; top: 0px; left: 0px;
width: 100%; height: 100%;
background: #57A818;
transform: rotateY(180deg);
transform-style: preserve-3d;
backface-visibility: hidden;
}*/
}
}
@include breakpoint(800) {
h3 {font-size: calc(1px + 5vw);}
h4 {font-size: calc(1px + 4.9vw);}
}
}
.svg-holder {
div {
position: relative;
width: 100%; height: 0;
padding-bottom: 100%;
svg {overflow: visible;
position: absolute; top: 0; left: 0;
width: 100%; height: 100%;
}
}
}
.st0{fill:none;}
.st1{fill:#001423;}
.st2{opacity:0;}
.st3{fill:#EFEFEF;}
.logo-3, .st4, .waves-3{fill:#88CE02;}
.st5{opacity:0.3;fill-rule:evenodd;clip-rule:evenodd;}
.st6{opacity:0.4;fill-rule:evenodd;clip-rule:evenodd;}
.logo-3-shadow{fill:#426C04;}
.logo-letter{fill:#FFFFFF;}
.letter-outline, .outline-3{fill:none;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.outline-3{stroke-width:4}
.outline-3-2{stroke-width:5; fill:none; stroke:#000}
.letter-face, .logo-3, .waves-3, .logo-3-shadow {opacity: 0;}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment