<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720">
<defs>
<style>
.cls-1 {
fill: #d5cae5;
}
.cls-2 {
fill: #333;
}
</style>
</defs>
<rect id="bg" class="cls-1" width="1280" height="720"/>
<g id="robot">
<g id="face">
<g id="Layer0_0_MEMBER_0_FILL" data-name="Layer0 0 MEMBER 0 FILL">
<path class="cls-2" d="M762.55,68.49q0-7.39-10-7.4h-225q-10,0-10,7.4V212.73q0,7.4,10,7.4h225q10,0,10-7.4Z" transform="translate(0 0)"/>
</g>
<g id="Layer0_0_MEMBER_1_FILL" data-name="Layer0 0 MEMBER 1 FILL">
<path class="cls-2" d="M612,219.1a8,8,0,0,0,8,8h40a8,8,0,0,0,0-16H620a8,8,0,0,0-8,8Z" transform="translate(0 0)"/>
</g>
</g>
<g id="armLeft">
<g id="Layer0_1_MEMBER_0_FILL" data-name="Layer0 1 MEMBER 0 FILL">
<path class="cls-2" d="M506.05,249.6v27q0,10,10,10h27q10,0,10-10v-27q0-10-10-10h-27Q506,239.6,506.05,249.6Z" transform="translate(0 0)"/>
</g>
<g id="Layer0_1_MEMBER_1_FILL" data-name="Layer0 1 MEMBER 1 FILL">
<path class="cls-2" d="M495.35,247.85A6.32,6.32,0,0,0,489,254.2V272a6.08,6.08,0,0,0,1.85,4.45,6.15,6.15,0,0,0,4.5,1.9h0a6.49,6.49,0,0,0,6.35-6.35V254.2a6.15,6.15,0,0,0-1.9-4.5,6.08,6.08,0,0,0-4.45-1.85Z" transform="translate(0 0)"/>
</g>
<g id="Layer0_1_MEMBER_2_FILL" data-name="Layer0 1 MEMBER 2 FILL">
<path class="cls-2" d="M480.35,247.85A6.32,6.32,0,0,0,474,254.2V272a6.08,6.08,0,0,0,1.85,4.45,6.15,6.15,0,0,0,4.5,1.9h0a6.49,6.49,0,0,0,6.35-6.35V254.2a6.15,6.15,0,0,0-1.9-4.5,6.08,6.08,0,0,0-4.45-1.85Z" transform="translate(0 0)"/>
</g>
<g id="Layer0_1_MEMBER_3_FILL" data-name="Layer0 1 MEMBER 3 FILL">
<path class="cls-2" d="M464.85,247.85a6.32,6.32,0,0,0-6.35,6.35V272a6.08,6.08,0,0,0,1.85,4.45,6.15,6.15,0,0,0,4.5,1.9h0a6.49,6.49,0,0,0,6.35-6.35V254.2a6.15,6.15,0,0,0-1.9-4.5,6.08,6.08,0,0,0-4.45-1.85Z" transform="translate(0 0)"/>
</g>
<g id="Layer0_1_MEMBER_4_FILL" data-name="Layer0 1 MEMBER 4 FILL">
<path class="cls-2" d="M449.6,247.85a6.32,6.32,0,0,0-6.35,6.35V272a6.08,6.08,0,0,0,1.85,4.45,6.15,6.15,0,0,0,4.5,1.9h0A6.49,6.49,0,0,0,456,272V254.2a6.15,6.15,0,0,0-1.9-4.5,6.08,6.08,0,0,0-4.45-1.85Z" transform="translate(0 0)"/>
</g>
<g id="Layer0_1_MEMBER_5_FILL" data-name="Layer0 1 MEMBER 5 FILL">
<path class="cls-2" d="M433.55,247.85a6.32,6.32,0,0,0-6.35,6.35V272a6.08,6.08,0,0,0,1.85,4.45,6.15,6.15,0,0,0,4.5,1.9h.05A6.49,6.49,0,0,0,440,272V254.2a6.15,6.15,0,0,0-1.9-4.5,6.08,6.08,0,0,0-4.45-1.85Z" transform="translate(0 0)"/>
</g>
<g id="Layer0_1_MEMBER_6_FILL" data-name="Layer0 1 MEMBER 6 FILL">
<path class="cls-2" d="M374,249.6v27q0,10,10,10h27q10,0,10-10v-27q0-10-10-10H384Q374,239.6,374,249.6Z" transform="translate(0 0)"/>
</g>
<g id="Layer0_1_MEMBER_7_FILL" data-name="Layer0 1 MEMBER 7 FILL">
<path class="cls-2" d="M410.25,360.45a6.32,6.32,0,0,0-6.35-6.35H386.1a6.08,6.08,0,0,0-4.45,1.85,6.15,6.15,0,0,0-1.9,4.5v.05a6.49,6.49,0,0,0,6.35,6.35h17.8a6.15,6.15,0,0,0,4.5-1.9,6.08,6.08,0,0,0,1.85-4.45Z" transform="translate(0 0)"/>
</g>
<g id="Layer0_1_MEMBER_8_FILL" data-name="Layer0 1 MEMBER 8 FILL">
<path class="cls-2" d="M410.25,345.45a6.32,6.32,0,0,0-6.35-6.35H386.1a6.08,6.08,0,0,0-4.45,1.85,6.15,6.15,0,0,0-1.9,4.5v.05a6.49,6.49,0,0,0,6.35,6.35h17.8a6.15,6.15,0,0,0,4.5-1.9,6.08,6.08,0,0,0,1.85-4.45Z" transform="translate(0 0)"/>
</g>
<g id="Layer0_1_MEMBER_9_FILL" data-name="Layer0 1 MEMBER 9 FILL">
<path class="cls-2" d="M410.25,330a6.32,6.32,0,0,0-6.35-6.35H386.1a6.08,6.08,0,0,0-4.45,1.85,6.15,6.15,0,0,0-1.9,4.5V330a6.49,6.49,0,0,0,6.35,6.35h17.8a6.15,6.15,0,0,0,4.5-1.9,6.08,6.08,0,0,0,1.85-4.45Z" transform="translate(0 0)"/>
</g>
<g id="Layer0_1_MEMBER_10_FILL" data-name="Layer0 1 MEMBER 10 FILL">
<path class="cls-2" d="M410.25,314.7a6.32,6.32,0,0,0-6.35-6.35H386.1a6.08,6.08,0,0,0-4.45,1.85,6.15,6.15,0,0,0-1.9,4.5v.05a6.49,6.49,0,0,0,6.35,6.35h17.8a6.15,6.15,0,0,0,4.5-1.9,6.08,6.08,0,0,0,1.85-4.45Z" transform="translate(0 0)"/>
</g>
<g id="Layer0_1_MEMBER_11_FILL" data-name="Layer0 1 MEMBER 11 FILL">
<path class="cls-2" d="M410.25,298.65a6.32,6.32,0,0,0-6.35-6.35H386.1a6.08,6.08,0,0,0-4.45,1.85,6.15,6.15,0,0,0-1.9,4.5v.05a6.49,6.49,0,0,0,6.35,6.35h17.8a6.15,6.15,0,0,0,4.5-1.9,6.08,6.08,0,0,0,1.85-4.45Z" transform="translate(0 0)"/>
</g>
<g id="Layer0_1_MEMBER_12_FILL" data-name="Layer0 1 MEMBER 12 FILL">
<path class="cls-2" d="M419.65,374.5a7.7,7.7,0,0,0-5.65-2.35H376a8,8,0,0,0,0,16h38a8,8,0,0,0,5.65-13.65Z" transform="translate(0 0)"/>
</g>
<g id="Layer0_1_MEMBER_13_MEMBER_0_FILL" data-name="Layer0 1 MEMBER 13 MEMBER 0 FILL">
<path class="cls-2" d="M375.85,392.35a6.32,6.32,0,0,0-6.35,6.35v17.8a6.08,6.08,0,0,0,1.85,4.45,6.15,6.15,0,0,0,4.5,1.9h0a6.49,6.49,0,0,0,6.35-6.35V398.7a6.15,6.15,0,0,0-1.9-4.5,6.08,6.08,0,0,0-4.45-1.85Z" transform="translate(0 0)"/>
</g>
<g id="Layer0_1_MEMBER_13_MEMBER_1_FILL" data-name="Layer0 1 MEMBER 13 MEMBER 1 FILL">
<path class="cls-2" d="M414.1,392.35a6.32,6.32,0,0,0-6.35,6.35v17.8A6.08,6.08,0,0,0,409.6,421a6.15,6.15,0,0,0,4.5,1.9h0a6.49,6.49,0,0,0,6.35-6.35V398.7a6.15,6.15,0,0,0-1.9-4.5,6.08,6.08,0,0,0-4.45-1.85Z" transform="translate(0 0)"/>
</g>
</g>
<g id="armRight">
<g id="Layer0_2_MEMBER_0_FILL" data-name="Layer0 2 MEMBER 0 FILL">
<path class="cls-2" d="M770.5,276.75v-27q0-10-10-10h-27q-10,0-10,10v27q0,10,10,10h27Q770.5,286.75,770.5,276.75Z" transform="translate(0 0)"/>
</g>
<g id="Layer0_2_MEMBER_1_FILL" data-name="Layer0 2 MEMBER 1 FILL">
<path class="cls-2" d="M781.2,278.5a6.32,6.32,0,0,0,6.35-6.35v-17.8a6.08,6.08,0,0,0-1.85-4.45,6.15,6.15,0,0,0-4.5-1.9h-.05a6.49,6.49,0,0,0-6.35,6.35v17.8a6.15,6.15,0,0,0,1.9,4.5,6.08,6.08,0,0,0,4.45,1.85Z" transform="translate(0 0)"/>
</g>
<g id="Layer0_2_MEMBER_2_FILL" data-name="Layer0 2 MEMBER 2 FILL">
<path class="cls-2" d="M796.2,278.5a6.32,6.32,0,0,0,6.35-6.35v-17.8a6.08,6.08,0,0,0-1.85-4.45,6.15,6.15,0,0,0-4.5-1.9h-.05a6.49,6.49,0,0,0-6.35,6.35v17.8a6.15,6.15,0,0,0,1.9,4.5,6.08,6.08,0,0,0,4.45,1.85Z" transform="translate(0 0)"/>
</g>
<g id="Layer0_2_MEMBER_3_FILL" data-name="Layer0 2 MEMBER 3 FILL">
<path class="cls-2" d="M811.7,278.5a6.32,6.32,0,0,0,6.35-6.35v-17.8a6.08,6.08,0,0,0-1.85-4.45,6.15,6.15,0,0,0-4.5-1.9h-.05a6.49,6.49,0,0,0-6.35,6.35v17.8a6.15,6.15,0,0,0,1.9,4.5,6.08,6.08,0,0,0,4.45,1.85Z" transform="translate(0 0)"/>
</g>
<g id="Layer0_2_MEMBER_4_FILL" data-name="Layer0 2 MEMBER 4 FILL">
<path class="cls-2" d="M827,278.5a6.32,6.32,0,0,0,6.35-6.35v-17.8a6.08,6.08,0,0,0-1.85-4.45A6.15,6.15,0,0,0,827,248h-.05a6.49,6.49,0,0,0-6.35,6.35v17.8a6.15,6.15,0,0,0,1.9,4.5,6.08,6.08,0,0,0,4.45,1.85Z" transform="translate(0 0)"/>
</g>
<g id="Layer0_2_MEMBER_5_FILL" data-name="Layer0 2 MEMBER 5 FILL">
<path class="cls-2" d="M843,278.5a6.32,6.32,0,0,0,6.35-6.35v-17.8a6.08,6.08,0,0,0-1.85-4.45A6.15,6.15,0,0,0,843,248h0a6.49,6.49,0,0,0-6.35,6.35v17.8a6.15,6.15,0,0,0,1.9,4.5A6.08,6.08,0,0,0,843,278.5Z" transform="translate(0 0)"/>
</g>
<g id="Layer0_2_MEMBER_6_FILL" data-name="Layer0 2 MEMBER 6 FILL">
<path class="cls-2" d="M902.55,276.75v-27q0-10-10-10h-27q-10,0-10,10v27q0,10,10,10h27Q902.56,286.75,902.55,276.75Z" transform="translate(0 0)"/>
</g>
<g id="Layer0_2_MEMBER_7_FILL" data-name="Layer0 2 MEMBER 7 FILL">
<path class="cls-2" d="M866.3,165.9a6.32,6.32,0,0,0,6.35,6.35h17.8a6.08,6.08,0,0,0,4.45-1.85,6.15,6.15,0,0,0,1.9-4.5v-.05a6.49,6.49,0,0,0-6.35-6.35h-17.8a6.15,6.15,0,0,0-4.5,1.9,6.08,6.08,0,0,0-1.85,4.45Z" transform="translate(0 0)"/>
</g>
<g id="Layer0_2_MEMBER_8_FILL" data-name="Layer0 2 MEMBER 8 FILL">
<path class="cls-2" d="M866.3,180.9a6.32,6.32,0,0,0,6.35,6.35h17.8a6.08,6.08,0,0,0,4.45-1.85,6.15,6.15,0,0,0,1.9-4.5v-.05a6.49,6.49,0,0,0-6.35-6.35h-17.8a6.15,6.15,0,0,0-4.5,1.9,6.08,6.08,0,0,0-1.85,4.45Z" transform="translate(0 0)"/>
</g>
<g id="Layer0_2_MEMBER_9_FILL" data-name="Layer0 2 MEMBER 9 FILL">
<path class="cls-2" d="M866.3,196.4a6.32,6.32,0,0,0,6.35,6.35h17.8a6.08,6.08,0,0,0,4.45-1.85,6.15,6.15,0,0,0,1.9-4.5v-.05a6.49,6.49,0,0,0-6.35-6.35h-17.8a6.15,6.15,0,0,0-4.5,1.9,6.08,6.08,0,0,0-1.85,4.45Z" transform="translate(0 0)"/>
</g>
<g id="Layer0_2_MEMBER_10_FILL" data-name="Layer0 2 MEMBER 10 FILL">
<path class="cls-2" d="M866.3,211.65a6.32,6.32,0,0,0,6.35,6.35h17.8a6.08,6.08,0,0,0,4.45-1.85,6.15,6.15,0,0,0,1.9-4.5v-.05a6.49,6.49,0,0,0-6.35-6.35h-17.8a6.15,6.15,0,0,0-4.5,1.9,6.08,6.08,0,0,0-1.85,4.45Z" transform="translate(0 0)"/>
</g>
<g id="Layer0_2_MEMBER_11_FILL" data-name="Layer0 2 MEMBER 11 FILL">
<path class="cls-2" d="M866.3,227.7a6.32,6.32,0,0,0,6.35,6.35h17.8a6.08,6.08,0,0,0,4.45-1.85,6.15,6.15,0,0,0,1.9-4.5v0a6.49,6.49,0,0,0-6.35-6.35h-17.8a6.15,6.15,0,0,0-4.5,1.9,6.08,6.08,0,0,0-1.85,4.45Z" transform="translate(0 0)"/>
</g>
<g id="Layer0_2_MEMBER_12_FILL" data-name="Layer0 2 MEMBER 12 FILL">
<path class="cls-2" d="M856.9,151.85a7.7,7.7,0,0,0,5.65,2.35h38a8,8,0,0,0,0-16h-38a8,8,0,0,0-5.65,13.65Z" transform="translate(0 0)"/>
</g>
<g id="Layer0_2_MEMBER_13_MEMBER_0_FILL" data-name="Layer0 2 MEMBER 13 MEMBER 0 FILL">
<path class="cls-2" d="M900.7,134a6.32,6.32,0,0,0,6.35-6.35v-17.8a6.08,6.08,0,0,0-1.85-4.45,6.15,6.15,0,0,0-4.5-1.9h-.05a6.49,6.49,0,0,0-6.35,6.35v17.8a6.15,6.15,0,0,0,1.9,4.5,6.08,6.08,0,0,0,4.45,1.85Z" transform="translate(0 0)"/>
</g>
<g id="Layer0_2_MEMBER_13_MEMBER_1_FILL" data-name="Layer0 2 MEMBER 13 MEMBER 1 FILL">
<path class="cls-2" d="M862.45,134a6.32,6.32,0,0,0,6.35-6.35v-17.8A6.08,6.08,0,0,0,867,105.4a6.15,6.15,0,0,0-4.5-1.9h-.05a6.49,6.49,0,0,0-6.35,6.35v17.8a6.15,6.15,0,0,0,1.9,4.5A6.08,6.08,0,0,0,862.4,134Z" transform="translate(0 0)"/>
</g>
</g>
<g id="legs">
<g id="Layer0_3_MEMBER_0_FILL" data-name="Layer0 3 MEMBER 0 FILL">
<path class="cls-2" d="M562.5,486v27q0,10,10,10h27q10,0,10-10V486q0-10-10-10h-27Q562.5,476,562.5,486Z" transform="translate(0 0)"/>
</g>
<g id="Layer0_3_MEMBER_1_FILL" data-name="Layer0 3 MEMBER 1 FILL">
<path class="cls-2" d="M601.25,595.3A6.32,6.32,0,0,0,594.9,589H577.1a6.08,6.08,0,0,0-4.45,1.85,6.15,6.15,0,0,0-1.9,4.5v.05a6.49,6.49,0,0,0,6.35,6.35h17.8a6.15,6.15,0,0,0,4.5-1.9,6.08,6.08,0,0,0,1.85-4.45Z" transform="translate(0 0)"/>
</g>
<g id="Layer0_3_MEMBER_2_FILL" data-name="Layer0 3 MEMBER 2 FILL">
<path class="cls-2" d="M601.25,580.3A6.32,6.32,0,0,0,594.9,574H577.1a6.08,6.08,0,0,0-4.45,1.85,6.15,6.15,0,0,0-1.9,4.5v.05a6.49,6.49,0,0,0,6.35,6.35h17.8a6.15,6.15,0,0,0,4.5-1.9,6.08,6.08,0,0,0,1.85-4.45Z" transform="translate(0 0)"/>
</g>
<g id="Layer0_3_MEMBER_3_FILL" data-name="Layer0 3 MEMBER 3 FILL">
<path class="cls-2" d="M601.25,564.8a6.32,6.32,0,0,0-6.35-6.35H577.1a6.08,6.08,0,0,0-4.45,1.85,6.15,6.15,0,0,0-1.9,4.5v.05a6.49,6.49,0,0,0,6.35,6.35h17.8a6.15,6.15,0,0,0,4.5-1.9,6.08,6.08,0,0,0,1.85-4.45Z" transform="translate(0 0)"/>
</g>
<g id="Layer0_3_MEMBER_4_FILL" data-name="Layer0 3 MEMBER 4 FILL">
<path class="cls-2" d="M601.25,549.55a6.32,6.32,0,0,0-6.35-6.35H577.1a6.08,6.08,0,0,0-4.45,1.85,6.15,6.15,0,0,0-1.9,4.5v.05A6.49,6.49,0,0,0,577.1,556h17.8a6.15,6.15,0,0,0,4.5-1.9,6.08,6.08,0,0,0,1.85-4.45Z" transform="translate(0 0)"/>
</g>
<g id="Layer0_3_MEMBER_5_FILL" data-name="Layer0 3 MEMBER 5 FILL">
<path class="cls-2" d="M601.25,533.5a6.32,6.32,0,0,0-6.35-6.35H577.1a6.08,6.08,0,0,0-4.45,1.85,6.15,6.15,0,0,0-1.9,4.5v0a6.49,6.49,0,0,0,6.35,6.35h17.8a6.15,6.15,0,0,0,4.5-1.9,6.08,6.08,0,0,0,1.85-4.45Z" transform="translate(0 0)"/>
</g>
<g id="Layer0_3_MEMBER_6_FILL" data-name="Layer0 3 MEMBER 6 FILL">
<path class="cls-2" d="M610.65,609.35A7.7,7.7,0,0,0,605,607H567a8,8,0,0,0,0,16h38a8,8,0,0,0,5.65-13.65Z" transform="translate(0 0)"/>
</g>
<g id="Layer0_3_MEMBER_7_FILL" data-name="Layer0 3 MEMBER 7 FILL">
<path class="cls-2" d="M664.5,486v27q0,10,10,10h27q10,0,10-10V486q0-10-10-10h-27Q664.5,476,664.5,486Z" transform="translate(0 0)"/>
</g>
<g id="Layer0_3_MEMBER_8_FILL" data-name="Layer0 3 MEMBER 8 FILL">
<path class="cls-2" d="M703.25,595.3A6.32,6.32,0,0,0,696.9,589H679.1a6.08,6.08,0,0,0-4.45,1.85,6.15,6.15,0,0,0-1.9,4.5v.05a6.49,6.49,0,0,0,6.35,6.35h17.8a6.15,6.15,0,0,0,4.5-1.9,6.08,6.08,0,0,0,1.85-4.45Z" transform="translate(0 0)"/>
</g>
<g id="Layer0_3_MEMBER_9_FILL" data-name="Layer0 3 MEMBER 9 FILL">
<path class="cls-2" d="M703.25,580.3A6.32,6.32,0,0,0,696.9,574H679.1a6.08,6.08,0,0,0-4.45,1.85,6.15,6.15,0,0,0-1.9,4.5v.05a6.49,6.49,0,0,0,6.35,6.35h17.8a6.15,6.15,0,0,0,4.5-1.9,6.08,6.08,0,0,0,1.85-4.45Z" transform="translate(0 0)"/>
</g>
<g id="Layer0_3_MEMBER_10_FILL" data-name="Layer0 3 MEMBER 10 FILL">
<path class="cls-2" d="M703.25,564.8a6.32,6.32,0,0,0-6.35-6.35H679.1a6.08,6.08,0,0,0-4.45,1.85,6.15,6.15,0,0,0-1.9,4.5v.05a6.49,6.49,0,0,0,6.35,6.35h17.8a6.15,6.15,0,0,0,4.5-1.9,6.08,6.08,0,0,0,1.85-4.45Z" transform="translate(0 0)"/>
</g>
<g id="Layer0_3_MEMBER_11_FILL" data-name="Layer0 3 MEMBER 11 FILL">
<path class="cls-2" d="M703.25,549.55a6.32,6.32,0,0,0-6.35-6.35H679.1a6.08,6.08,0,0,0-4.45,1.85,6.15,6.15,0,0,0-1.9,4.5v.05A6.49,6.49,0,0,0,679.1,556h17.8a6.15,6.15,0,0,0,4.5-1.9,6.08,6.08,0,0,0,1.85-4.45Z" transform="translate(0 0)"/>
</g>
<g id="Layer0_3_MEMBER_12_FILL" data-name="Layer0 3 MEMBER 12 FILL">
<path class="cls-2" d="M703.25,533.5a6.32,6.32,0,0,0-6.35-6.35H679.1a6.08,6.08,0,0,0-4.45,1.85,6.15,6.15,0,0,0-1.9,4.5v0a6.49,6.49,0,0,0,6.35,6.35h17.8a6.15,6.15,0,0,0,4.5-1.9,6.08,6.08,0,0,0,1.85-4.45Z" transform="translate(0 0)"/>
</g>
<g id="Layer0_3_MEMBER_13_FILL" data-name="Layer0 3 MEMBER 13 FILL">
<path class="cls-2" d="M712.65,609.35A7.7,7.7,0,0,0,707,607H669a8,8,0,0,0,0,16h38a8,8,0,0,0,5.65-13.65Z" transform="translate(0 0)"/>
</g>
</g>
<g id="torso">
<g id="Layer0_4_MEMBER_0_FILL" data-name="Layer0 4 MEMBER 0 FILL">
<path class="cls-2" d="M730.1,232.81q0-8.67-10-8.66H556.05q-10,0-10,8.66V474.53q0,8.67,10,8.66H720.1q10,0,10-8.66Z" transform="translate(0 0)"/>
</g>
</g>
<g id="clickme">
<path class="cls-1" d="M560.39,342.74c-2.15-2.06-3.22-5-3.22-8.68q0-5.87,3.13-9t9.29-3.13a20.08,20.08,0,0,1,3.69.31,22.75,22.75,0,0,1,3.33.88v5.08a17,17,0,0,0-6.59-1.3q-3.6,0-5.28,1.73t-1.67,5.43q0,3.49,1.75,5.17c1.16,1.12,2.92,1.67,5.27,1.67a17,17,0,0,0,6.55-1.26v5.11a21.37,21.37,0,0,1-7,1.08Q563.61,345.83,560.39,342.74Z" transform="translate(0 0)"/>
<path class="cls-1" d="M580.28,322.29h5.79V341H597v4.47H580.28Z" transform="translate(0 0)"/>
<path class="cls-1" d="M599.93,322.29h5.8v23.19h-5.8Z" transform="translate(0 0)"/>
<path class="cls-1" d="M612.59,342.74c-2.15-2.06-3.22-5-3.22-8.68q0-5.87,3.13-9t9.29-3.13a19.9,19.9,0,0,1,3.68.31,22.11,22.11,0,0,1,3.33.88v5.08a16.9,16.9,0,0,0-6.58-1.3q-3.6,0-5.28,1.73t-1.67,5.43q0,3.49,1.74,5.17a7.37,7.37,0,0,0,5.28,1.67,17,17,0,0,0,6.55-1.26v5.11a21.37,21.37,0,0,1-7,1.08Q615.8,345.83,612.59,342.74Z" transform="translate(0 0)"/>
<path class="cls-1" d="M632.48,322.29h5.79v9l8-9h6.63l-8.28,9.47,8.78,13.72H647.2l-6.19-10-2.74,3v7h-5.79Z" transform="translate(0 0)"/>
<path class="cls-1" d="M670.31,322.29H676l6.3,12.85,6.26-12.85h5.69v23.19h-5.8V332.16l-4.57,9.36h-3.2l-4.61-9.36v13.32h-5.8Z" transform="translate(0 0)"/>
<path class="cls-1" d="M698.64,322.29h17.1v4.46h-11.3v4.87h10v4.53h-10V341h11.3v4.47h-17.1Z" transform="translate(0 0)"/>
</g>
</g>
</svg>
html, body{
width:100%;
height:100%;
overflow:hidden;
margin:0;
}
body {
display:flex;
justify-content:center;
background:#d5cae5;
}
svg {
overflow:hidden;
width: 100%;
}
function snapPart(part, axis, value) {
let duration = 0.5
let tl = gsap.timeline()
tl.from(part, {x:(axis == "x") ? value : 0, y:(axis == "y") ? value : 0, duration:duration})
.from(part, {opacity:0, duration:0.1}, 0)
return tl
}
let offset = "-=0.08"
let distance = 80
let master = gsap.timeline()
master.add(snapPart("#face", "y", -distance), offset)
master.add(snapPart("#armLeft", "x", -distance), offset)
master.add(snapPart("#armRight", "x", distance), offset)
master.add(snapPart("#legs", "y", distance), offset).pause()
document.addEventListener("click", click)
function click() {
master.restart()
}
External CSS
This Pen doesn't use any external CSS resources.