254 lines
No EOL
22 KiB
Svelte
254 lines
No EOL
22 KiB
Svelte
<script lang="ts">
|
|
import { onMount } from 'svelte';
|
|
import { gsap } from 'gsap';
|
|
import { ScrollTrigger } from 'gsap/dist/ScrollTrigger';
|
|
|
|
onMount(() => {
|
|
|
|
gsap.registerPlugin(ScrollTrigger);
|
|
|
|
gsap.set('#fingers *', { transformOrigin: '100% 66%' });
|
|
|
|
let introIsPlaying = true;
|
|
|
|
const keyPress = (key: HTMLElement) => {
|
|
let tl = gsap.timeline({ delay: Math.random() * 3, repeat: 0, paused: true});
|
|
tl.to( key, { duration: .3, yPercent: 20, zIndex: -1, ease: 'power3.in'})
|
|
.to( key, { duration: .3, yPercent: 0, ease: 'power3.in', onComplete: () => {
|
|
keyPress(key);
|
|
tl.kill();
|
|
} })
|
|
tl.play();
|
|
}
|
|
const initKeys = () => {
|
|
document.querySelectorAll("#keys path").forEach( key => {
|
|
keyPress(key as HTMLElement);
|
|
})
|
|
}
|
|
const fingerMove = (finger: HTMLElement) => {
|
|
gsap.to( finger, { duration: .2, rotateZ: Math.random() * 10 + 5, ease: 'power3.in', delay: Math.random(), repeat: -1, yoyo: true })
|
|
}
|
|
const moveHandToRandom = () => {
|
|
if (introIsPlaying) {
|
|
return
|
|
} else {
|
|
gsap.to( '#hand', {
|
|
duration: .6,
|
|
xPercent: Math.random() * -80,
|
|
yPercent: Math.random() * -20,
|
|
rotateZ: Math.random() * 20 - 10,
|
|
ease: 'power3.in',
|
|
onComplete: () => moveHandToRandom()
|
|
})
|
|
}
|
|
}
|
|
const initHand = () => {
|
|
document.querySelectorAll("#fingers *").forEach( finger => {
|
|
fingerMove(finger as HTMLElement);
|
|
})
|
|
moveHandToRandom();
|
|
}
|
|
|
|
let introTl = gsap.timeline( {
|
|
scrollTrigger: { trigger: '#hank', start: 'top 50%', end: 'top top' }
|
|
});
|
|
introTl.set('#hand', {
|
|
yPercent: -100,
|
|
rotateZ: 40,
|
|
autoAlpha: 0,
|
|
})
|
|
introTl.set('#keys path', {
|
|
y: 1000,
|
|
autoAlpha: 0,
|
|
})
|
|
introTl.to('#keys path', {
|
|
duration: .66,
|
|
y: 0,
|
|
autoAlpha: 1,
|
|
stagger: {
|
|
each: .0025,
|
|
from: 'random'
|
|
},
|
|
ease: 'power3.out',
|
|
onComplete: () => initKeys()
|
|
}, 0);
|
|
introTl.to('#hand', {
|
|
yPercent: 0,
|
|
rotateZ: 0,
|
|
autoAlpha: 1,
|
|
duration: 1,
|
|
ease: 'power4.inOut',
|
|
onComplete: () => {
|
|
introIsPlaying = false;
|
|
initHand();
|
|
}
|
|
}, 0);
|
|
|
|
return () => {
|
|
gsap.killTweensOf("#hand, #keys path, #fingers *");
|
|
introTl.kill();
|
|
ScrollTrigger.getAll().forEach( instance => instance.kill() );
|
|
introIsPlaying = true;
|
|
}
|
|
})
|
|
|
|
</script>
|
|
|
|
<svg id="hank" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 2000 1000" width="2000" height="1000">
|
|
<g id="keyboard">
|
|
<polygon id="back" class="st0" points="1986.2,933.8 21.4,933.8 198,468.4 1768.8,468.4 "/>
|
|
<g id="keys">
|
|
<path class="st1" d="M278.5,534.6c-0.5,1.6-2.8,3-5.1,3h-50.2c-2.3,0-3.7-1.3-3.1-3l12.5-35.1c0.6-1.6,2.8-2.8,5.1-2.8h49.1 c2.2,0,3.6,1.3,3.1,2.8L278.5,534.6z"/>
|
|
<path class="st1" d="M257.4,599.7c-0.6,1.7-2.9,3.2-5.3,3.2h-51.9c-2.4,0-3.8-1.4-3.2-3.2l13.3-37.5c0.6-1.7,3-3,5.3-3h50.7 c2.3,0,3.7,1.4,3.2,3L257.4,599.7z"/>
|
|
<path class="st1" d="M327.8,599.7c-0.5,1.7-2.8,3.2-5.2,3.2h-51.9c-2.4,0-3.8-1.4-3.3-3.2l12-37.5c0.5-1.7,2.8-3,5.1-3h50.7 c2.3,0,3.8,1.4,3.3,3L327.8,599.7z"/>
|
|
<path class="st1" d="M398.2,599.7c-0.4,1.7-2.7,3.2-5.1,3.2h-51.9c-2.4,0-3.9-1.4-3.4-3.2l10.7-37.5c0.5-1.7,2.7-3,5-3h50.7 c2.3,0,3.8,1.4,3.4,3L398.2,599.7z"/>
|
|
<path class="st1" d="M468.7,599.7c-0.4,1.7-2.6,3.2-5,3.2h-51.9c-2.4,0-3.9-1.4-3.5-3.2l9.3-37.5c0.4-1.7,2.6-3,4.9-3h50.7 c2.3,0,3.9,1.4,3.5,3L468.7,599.7z"/>
|
|
<path class="st1" d="M539.1,599.7c-0.3,1.7-2.5,3.2-4.9,3.2h-51.9c-2.4,0-4-1.4-3.6-3.2l8-37.5c0.4-1.7,2.5-3,4.8-3h50.7 c2.3,0,3.9,1.4,3.6,3L539.1,599.7z"/>
|
|
<path class="st1" d="M609.5,599.7c-0.3,1.7-2.4,3.2-4.7,3.2h-51.9c-2.4,0-4-1.4-3.7-3.2l6.7-37.5c0.3-1.7,2.4-3,4.7-3h50.7 c2.3,0,4,1.4,3.7,3L609.5,599.7z"/>
|
|
<path class="st1" d="M680,599.7c-0.2,1.7-2.3,3.2-4.6,3.2h-51.9c-2.4,0-4.1-1.4-3.8-3.2l5.3-37.5c0.2-1.7,2.3-3,4.6-3h50.7 c2.3,0,4,1.4,3.8,3L680,599.7z"/>
|
|
<path class="st1" d="M750.4,599.7c-0.1,1.7-2.2,3.2-4.5,3.2H694c-2.4,0-4.1-1.4-3.9-3.2l4-37.5c0.2-1.7,2.2-3,4.5-3h50.7 c2.3,0,4.1,1.4,4,3L750.4,599.7z"/>
|
|
<path class="st1" d="M820.9,599.7c-0.1,1.7-2.1,3.2-4.4,3.2h-51.9c-2.4,0-4.2-1.4-4.1-3.2l2.7-37.5c0.1-1.7,2.1-3,4.4-3h50.7 c2.3,0,4.1,1.4,4.1,3L820.9,599.7z"/>
|
|
<path class="st1" d="M891.3,599.7c0,1.7-1.9,3.2-4.3,3.2h-51.9c-2.4,0-4.2-1.4-4.2-3.2l1.3-37.5c0.1-1.7,2-3,4.3-3h50.7 c2.3,0,4.2,1.4,4.2,3L891.3,599.7z"/>
|
|
<path class="st1" d="M961.7,599.7c0.1,1.7-1.8,3.2-4.2,3.2h-51.9c-2.4,0-4.3-1.4-4.3-3.2l0-37.5c0-1.7,1.9-3,4.2-3h50.7 c2.3,0,4.2,1.4,4.3,3L961.7,599.7z"/>
|
|
<path class="st1" d="M1032.2,599.7c0.1,1.7-1.7,3.2-4.1,3.2h-51.9c-2.4,0-4.3-1.4-4.4-3.2l-1.3-37.5c-0.1-1.7,1.8-3,4.1-3h50.7 c2.3,0,4.3,1.4,4.4,3L1032.2,599.7z"/>
|
|
<path class="st1" d="M1102.6,599.7c0.2,1.7-1.6,3.2-4,3.2h-51.9c-2.4,0-4.4-1.4-4.5-3.2l-2.7-37.5c-0.1-1.7,1.7-3,4-3h50.7 c2.3,0,4.3,1.4,4.5,3L1102.6,599.7z"/>
|
|
<path class="st1" d="M1234.8,599.7c0.3,1.7-1.4,3.2-3.7,3.2h-113.7c-2.4,0-4.4-1.4-4.6-3.2l-4-37.5c-0.2-1.7,1.6-3,3.9-3h111.2 c2.3,0,4.4,1.4,4.7,3L1234.8,599.7z"/>
|
|
<path class="st1" d="M268.3,655.1c-0.6,1.8-3,3.3-5.4,3.3h-82.3c-2.4,0-3.9-1.5-3.2-3.3l14.1-39.6c0.6-1.8,3.1-3.2,5.4-3.2h80.4 c2.4,0,3.8,1.4,3.3,3.2L268.3,655.1z"/>
|
|
<path class="st1" d="M269.4,713.4c-0.6,1.9-3.1,3.5-5.6,3.5H160c-2.5,0-4-1.6-3.3-3.5l14.9-41.9c0.7-1.9,3.2-3.4,5.6-3.4h101.4 c2.4,0,4,1.5,3.4,3.4L269.4,713.4z"/>
|
|
<path class="st1" d="M289.9,775.1c-0.6,2.1-3.2,3.7-5.7,3.7H138.1c-2.6,0-4.1-1.7-3.3-3.7l15.8-44.4c0.7-2,3.3-3.6,5.8-3.6H299 c2.5,0,4.1,1.6,3.5,3.6L289.9,775.1z"/>
|
|
<path class="st1" d="M214,839.5c-0.7,2.2-3.4,4-6,4h-92.7c-2.6,0-4.2-1.8-3.4-4l16.7-47c0.7-2.1,3.4-3.8,6-3.8h90.4 c2.6,0,4.1,1.7,3.5,3.8L214,839.5z"/>
|
|
<path class="st1" d="M342.8,655.1c-0.5,1.8-2.9,3.3-5.3,3.3h-53.3c-2.4,0-3.9-1.5-3.4-3.3l12.1-39.6c0.5-1.8,2.9-3.2,5.3-3.2h52.1 c2.4,0,3.9,1.4,3.4,3.2L342.8,655.1z"/>
|
|
<path class="st1" d="M345.2,713.4c-0.5,1.9-3,3.5-5.5,3.5h-54.8c-2.5,0-4.1-1.6-3.5-3.5l12.4-41.9c0.5-1.9,3-3.4,5.4-3.4h53.6 c2.4,0,4,1.5,3.5,3.4L345.2,713.4z"/>
|
|
<path class="st1" d="M422.1,713.4c-0.4,1.9-2.8,3.5-5.3,3.5H362c-2.5,0-4.1-1.6-3.6-3.5l10.8-41.9c0.5-1.9,2.9-3.4,5.3-3.4h53.6 c2.4,0,4.1,1.5,3.6,3.4L422.1,713.4z"/>
|
|
<path class="st1" d="M369.3,775.1c-0.5,2.1-3,3.7-5.6,3.7h-56.4c-2.6,0-4.2-1.7-3.6-3.7l12.3-44.4c0.5-2,3-3.6,5.5-3.6h55.1 c2.5,0,4.1,1.6,3.7,3.6L369.3,775.1z"/>
|
|
<path class="st1" d="M294.5,839.5c-0.6,2.2-3.2,4-5.9,4h-58.1c-2.6,0-4.3-1.8-3.6-4l14.3-47c0.6-2.1,3.3-3.8,5.8-3.8h56.7 c2.6,0,4.2,1.7,3.6,3.8L294.5,839.5z"/>
|
|
<path class="st1" d="M376.1,839.5c-0.5,2.2-3.1,4-5.7,4h-58.1c-2.6,0-4.3-1.8-3.7-4l12.5-47c0.6-2.1,3.1-3.8,5.7-3.8h56.7 c2.6,0,4.3,1.7,3.8,3.8L376.1,839.5z"/>
|
|
<path class="st1" d="M456.9,839.5c-0.4,2.2-3,4-5.6,4h-58.1c-2.6,0-4.4-1.8-3.9-4l10.8-47c0.5-2.1,3-3.8,5.5-3.8h56.7 c2.6,0,4.3,1.7,3.9,3.8L456.9,839.5z"/>
|
|
<path class="st1" d="M942.9,839.5c0,2.2-2.1,4-4.7,4H473.5c-2.6,0-4.4-1.8-4-4l9.1-47c0.4-2.1,2.8-3.8,5.4-3.8h453.2 c2.6,0,4.7,1.7,4.7,3.8L942.9,839.5z"/>
|
|
<path class="st1" d="M449.1,775.1c-0.4,2.1-2.9,3.7-5.4,3.7h-56.4c-2.6,0-4.2-1.7-3.8-3.7l10.6-44.4c0.5-2,2.9-3.6,5.4-3.6h55.1 c2.5,0,4.2,1.6,3.8,3.6L449.1,775.1z"/>
|
|
<path class="st1" d="M528.8,775.1c-0.4,2.1-2.7,3.7-5.3,3.7h-56.4c-2.6,0-4.3-1.7-3.9-3.7l9-44.4c0.4-2,2.8-3.6,5.3-3.6h55.1 c2.5,0,4.3,1.6,3.9,3.6L528.8,775.1z"/>
|
|
<path class="st1" d="M608.6,775.1c-0.3,2.1-2.6,3.7-5.2,3.7H547c-2.6,0-4.4-1.7-4-3.7l7.4-44.4c0.3-2,2.6-3.6,5.1-3.6h55.1 c2.5,0,4.3,1.6,4.1,3.6L608.6,775.1z"/>
|
|
<path class="st1" d="M688.3,775.1c-0.2,2.1-2.5,3.7-5,3.7h-56.4c-2.6,0-4.4-1.7-4.2-3.7l5.7-44.4c0.3-2,2.5-3.6,5-3.6h55.1 c2.5,0,4.4,1.6,4.2,3.6L688.3,775.1z"/>
|
|
<path class="st1" d="M768.1,775.1c-0.1,2.1-2.3,3.7-4.9,3.7h-56.4c-2.6,0-4.5-1.7-4.3-3.7l4.1-44.4c0.2-2,2.4-3.6,4.9-3.6h55.1 c2.5,0,4.4,1.6,4.3,3.6L768.1,775.1z"/>
|
|
<path class="st1" d="M847.8,775.1c-0.1,2.1-2.2,3.7-4.7,3.7h-56.4c-2.6,0-4.6-1.7-4.4-3.7l2.5-44.4c0.1-2,2.2-3.6,4.7-3.6h55.1 c2.5,0,4.5,1.6,4.5,3.6L847.8,775.1z"/>
|
|
<path class="st1" d="M927.6,775.1c0,2.1-2,3.7-4.6,3.7h-56.4c-2.6,0-4.6-1.7-4.6-3.7l0.8-44.4c0-2,2.1-3.6,4.6-3.6h55.1 c2.5,0,4.6,1.6,4.6,3.6L927.6,775.1z"/>
|
|
<path class="st1" d="M1007.3,775.1c0.1,2.1-1.9,3.7-4.5,3.7h-56.4c-2.6,0-4.7-1.7-4.7-3.7l-0.8-44.4c0-2,2-3.6,4.5-3.6h55.1 c2.5,0,4.6,1.6,4.7,3.6L1007.3,775.1z"/>
|
|
<path class="st1" d="M1028.2,839.5c0.1,2.2-1.9,4-4.6,4h-58.1c-2.6,0-4.8-1.8-4.9-4l-1.2-47c-0.1-2.1,2-3.8,4.6-3.8h56.7 c2.6,0,4.8,1.7,4.9,3.8L1028.2,839.5z"/>
|
|
<path class="st1" d="M1110.5,839.5c0.2,2.2-1.8,4-4.4,4h-58.1c-2.6,0-4.9-1.8-5-4l-3-47c-0.1-2.1,1.9-3.8,4.4-3.8h56.7 c2.6,0,4.8,1.7,5,3.8L1110.5,839.5z"/>
|
|
<path class="st1" d="M1192.7,839.5c0.3,2.2-1.6,4-4.3,4h-58.1c-2.6,0-5-1.8-5.2-4l-4.7-47c-0.2-2.1,1.7-3.8,4.3-3.8h56.7 c2.6,0,4.9,1.7,5.2,3.8L1192.7,839.5z"/>
|
|
<path class="st1" d="M1275,839.5c0.4,2.2-1.5,4-4.1,4h-58.1c-2.6,0-5-1.8-5.3-4l-6.5-47c-0.3-2.1,1.6-3.8,4.2-3.8h56.7 c2.6,0,5,1.7,5.3,3.8L1275,839.5z"/>
|
|
<path class="st1" d="M1087.1,775.1c0.2,2.1-1.8,3.7-4.3,3.7h-56.4c-2.6,0-4.7-1.7-4.9-3.7l-2.5-44.4c-0.1-2,1.8-3.6,4.3-3.6h55.1 c2.5,0,4.7,1.6,4.8,3.6L1087.1,775.1z"/>
|
|
<path class="st1" d="M1264.2,775.1c0.3,2.1-1.5,3.7-4,3.7h-154c-2.6,0-4.8-1.7-5-3.7l-4.1-44.4c-0.2-2,1.7-3.6,4.2-3.6h150.3 c2.5,0,4.8,1.6,5.1,3.6L1264.2,775.1z"/>
|
|
<path class="st1" d="M499.1,713.4c-0.4,1.9-2.7,3.5-5.2,3.5h-54.8c-2.5,0-4.2-1.6-3.7-3.5l9.3-41.9c0.4-1.9,2.7-3.4,5.2-3.4h53.6 c2.4,0,4.1,1.5,3.8,3.4L499.1,713.4z"/>
|
|
<path class="st1" d="M576.1,713.4c-0.3,1.9-2.6,3.5-5.1,3.5h-54.8c-2.5,0-4.2-1.6-3.9-3.5l7.8-41.9c0.3-1.9,2.6-3.4,5-3.4h53.6 c2.4,0,4.2,1.5,3.9,3.4L576.1,713.4z"/>
|
|
<path class="st1" d="M653,713.4c-0.2,1.9-2.5,3.5-4.9,3.5h-54.8c-2.5,0-4.3-1.6-4-3.5l6.2-41.9c0.3-1.9,2.5-3.4,4.9-3.4H654 c2.4,0,4.2,1.5,4,3.4L653,713.4z"/>
|
|
<path class="st1" d="M730,713.4c-0.2,1.9-2.3,3.5-4.8,3.5h-54.8c-2.5,0-4.3-1.6-4.1-3.5l4.7-41.9c0.2-1.9,2.4-3.4,4.8-3.4h53.6 c2.4,0,4.3,1.5,4.1,3.4L730,713.4z"/>
|
|
<path class="st1" d="M807,713.4c-0.1,1.9-2.2,3.5-4.7,3.5h-54.8c-2.5,0-4.4-1.6-4.3-3.5l3.2-41.9c0.1-1.9,2.2-3.4,4.7-3.4h53.6 c2.4,0,4.3,1.5,4.3,3.4L807,713.4z"/>
|
|
<path class="st1" d="M883.9,713.4c0,1.9-2.1,3.5-4.6,3.5h-54.8c-2.5,0-4.5-1.6-4.4-3.5l1.6-41.9c0.1-1.9,2.1-3.4,4.5-3.4h53.6 c2.4,0,4.4,1.5,4.4,3.4L883.9,713.4z"/>
|
|
<path class="st1" d="M960.9,713.4c0.1,1.9-1.9,3.5-4.4,3.5h-54.8c-2.5,0-4.5-1.6-4.5-3.5l0.1-41.9c0-1.9,2-3.4,4.4-3.4h53.6 c2.4,0,4.5,1.5,4.5,3.4L960.9,713.4z"/>
|
|
<path class="st1" d="M1037.8,713.4c0.1,1.9-1.8,3.5-4.3,3.5h-54.8c-2.5,0-4.6-1.6-4.6-3.5l-1.4-41.9c-0.1-1.9,1.9-3.4,4.3-3.4 h53.6c2.4,0,4.5,1.5,4.6,3.4L1037.8,713.4z"/>
|
|
<path class="st1" d="M1114.8,713.4c0.2,1.9-1.7,3.5-4.2,3.5h-54.8c-2.5,0-4.6-1.6-4.8-3.5l-3-41.9c-0.1-1.9,1.7-3.4,4.2-3.4h53.6 c2.4,0,4.6,1.5,4.8,3.4L1114.8,713.4z"/>
|
|
<path class="st1" d="M416.9,655.1c-0.4,1.8-2.8,3.3-5.2,3.3h-53.3c-2.4,0-4-1.5-3.5-3.3l10.6-39.6c0.5-1.8,2.8-3.2,5.2-3.2h52.1 c2.4,0,4,1.4,3.5,3.2L416.9,655.1z"/>
|
|
<path class="st1" d="M491,655.1c-0.4,1.8-2.7,3.3-5.1,3.3h-53.3c-2.4,0-4-1.5-3.6-3.3l9.2-39.6c0.4-1.8,2.7-3.2,5-3.2h52.1 c2.4,0,4,1.4,3.7,3.2L491,655.1z"/>
|
|
<path class="st1" d="M565.1,655.1c-0.3,1.8-2.5,3.3-4.9,3.3h-53.3c-2.4,0-4.1-1.5-3.7-3.3l7.7-39.6c0.3-1.8,2.6-3.2,4.9-3.2h52.1 c2.4,0,4.1,1.4,3.8,3.2L565.1,655.1z"/>
|
|
<path class="st1" d="M639.3,655.1c-0.2,1.8-2.4,3.3-4.8,3.3h-53.3c-2.4,0-4.2-1.5-3.9-3.3l6.3-39.6c0.3-1.8,2.4-3.2,4.8-3.2h52.1 c2.4,0,4.1,1.4,3.9,3.2L639.3,655.1z"/>
|
|
<path class="st1" d="M713.4,655.1c-0.2,1.8-2.3,3.3-4.7,3.3h-53.3c-2.4,0-4.2-1.5-4-3.3l4.9-39.6c0.2-1.8,2.3-3.2,4.7-3.2H713 c2.4,0,4.2,1.4,4,3.2L713.4,655.1z"/>
|
|
<path class="st1" d="M787.5,655.1c-0.1,1.8-2.2,3.3-4.6,3.3h-53.3c-2.4,0-4.3-1.5-4.1-3.3l3.4-39.6c0.2-1.8,2.2-3.2,4.6-3.2h52.1 c2.4,0,4.2,1.4,4.1,3.2L787.5,655.1z"/>
|
|
<path class="st1" d="M861.6,655.1c0,1.8-2,3.3-4.5,3.3h-53.3c-2.4,0-4.3-1.5-4.2-3.3l2-39.6c0.1-1.8,2.1-3.2,4.5-3.2h52.1 c2.4,0,4.3,1.4,4.2,3.2L861.6,655.1z"/>
|
|
<path class="st1" d="M935.7,655.1c0,1.8-1.9,3.3-4.3,3.3h-53.3c-2.4,0-4.4-1.5-4.3-3.3l0.5-39.6c0-1.8,2-3.2,4.3-3.2h52.1 c2.4,0,4.3,1.4,4.3,3.2L935.7,655.1z"/>
|
|
<path class="st1" d="M1009.8,655.1c0.1,1.8-1.8,3.3-4.2,3.3h-53.3c-2.4,0-4.4-1.5-4.5-3.3l-0.9-39.6c0-1.8,1.9-3.2,4.2-3.2h52.1 c2.4,0,4.4,1.4,4.5,3.2L1009.8,655.1z"/>
|
|
<path class="st1" d="M1084,655.1c0.2,1.8-1.7,3.3-4.1,3.3h-53.3c-2.4,0-4.5-1.5-4.6-3.3l-2.3-39.6c-0.1-1.8,1.7-3.2,4.1-3.2h52.1 c2.4,0,4.4,1.4,4.6,3.2L1084,655.1z"/>
|
|
<path class="st1" d="M1158.1,655.1c0.2,1.8-1.6,3.3-4,3.3h-53.3c-2.4,0-4.5-1.5-4.7-3.3l-3.8-39.6c-0.2-1.8,1.6-3.2,4-3.2h52.1 c2.4,0,4.5,1.4,4.7,3.2L1158.1,655.1z"/>
|
|
<g>
|
|
<g>
|
|
<path class="st1" d="M1168.9,612.2c-2.4,0-4.1,1.4-3.9,3.2l5.2,39.6c0.2,1.8,2.4,3.3,4.8,3.3h17.1c2.4,0,4.6,1.5,4.9,3.3 l7.4,51.6c0.3,1.9,2.5,3.5,5,3.5h40.4c2.5,0,4.3-1.6,3.9-3.5l-16.4-97.9c-0.3-1.8-2.5-3.2-4.8-3.2H1168.9z"/>
|
|
</g>
|
|
<g>
|
|
<path class="st1" d="M1176.3,668.1c-2.4,0-6.4,0-8.8,0h-39.9c-2.4,0-4.3,1.5-4.1,3.4l4.5,41.9c0.2,1.9,2.4,3.5,4.9,3.5h40.9 c2.5,0,6.6,0,9,0h4.9c2.5,0,4.3-1.6,4-3.5l-5.8-41.9c-0.3-1.9-2.5-3.4-4.9-3.4H1176.3z"/>
|
|
</g>
|
|
</g>
|
|
<path class="st1" d="M387.2,534.6c-0.4,1.6-2.7,3-4.9,3h-50.2c-2.3,0-3.7-1.3-3.3-3l10.5-35.1c0.5-1.6,2.7-2.8,4.9-2.8h49.1 c2.2,0,3.7,1.3,3.3,2.8L387.2,534.6z"/>
|
|
<path class="st1" d="M463,534.6c-0.4,1.6-2.5,3-4.8,3H408c-2.3,0-3.8-1.3-3.4-3l9.1-35.1c0.4-1.6,2.6-2.8,4.8-2.8h49.1 c2.2,0,3.8,1.3,3.4,2.8L463,534.6z"/>
|
|
<path class="st1" d="M538.8,534.6c-0.3,1.6-2.4,3-4.7,3h-50.2c-2.3,0-3.8-1.3-3.5-3l7.7-35.1c0.3-1.6,2.4-2.8,4.7-2.8h49.1 c2.2,0,3.8,1.3,3.5,2.8L538.8,534.6z"/>
|
|
<path class="st1" d="M614.6,534.6c-0.2,1.6-2.3,3-4.6,3h-50.2c-2.3,0-3.9-1.3-3.6-3l6.3-35.1c0.3-1.6,2.3-2.8,4.6-2.8h49.1 c2.2,0,3.9,1.3,3.6,2.8L614.6,534.6z"/>
|
|
<path class="st1" d="M691.8,534.6c-0.2,1.6-2.2,3-4.5,3h-50.2c-2.3,0-3.9-1.3-3.7-3l4.9-35.1c0.2-1.6,2.2-2.8,4.4-2.8H692 c2.2,0,3.9,1.3,3.7,2.8L691.8,534.6z"/>
|
|
<path class="st1" d="M767.6,534.6c-0.1,1.6-2.1,3-4.3,3h-50.2c-2.3,0-4-1.3-3.8-3l3.5-35.1c0.2-1.6,2.1-2.8,4.3-2.8h49.1 c2.2,0,4,1.3,3.8,2.8L767.6,534.6z"/>
|
|
<path class="st1" d="M843.4,534.6c0,1.6-2,3-4.2,3H789c-2.3,0-4.1-1.3-4-3l2.1-35.1c0.1-1.6,2-2.8,4.2-2.8h49.1c2.2,0,4,1.3,4,2.8 L843.4,534.6z"/>
|
|
<path class="st1" d="M919.2,534.6c0,1.6-1.8,3-4.1,3H865c-2.3,0-4.1-1.3-4.1-3l0.8-35.1c0-1.6,1.9-2.8,4.1-2.8h49.1 c2.2,0,4.1,1.3,4.1,2.8L919.2,534.6z"/>
|
|
<path class="st1" d="M996.5,534.6c0.1,1.6-1.7,3-4,3h-50.2c-2.3,0-4.2-1.3-4.2-3l-0.7-35.1c0-1.6,1.8-2.8,4-2.8h49.1 c2.2,0,4.1,1.3,4.2,2.8L996.5,534.6z"/>
|
|
<path class="st1" d="M1072.3,534.6c0.1,1.6-1.6,3-3.9,3h-50.2c-2.3,0-4.2-1.3-4.3-3l-2-35.1c-0.1-1.6,1.7-2.8,3.9-2.8h49.1 c2.2,0,4.2,1.3,4.3,2.8L1072.3,534.6z"/>
|
|
<path class="st1" d="M1148.1,534.6c0.2,1.6-1.5,3-3.8,3h-50.2c-2.3,0-4.3-1.3-4.4-3l-3.4-35.1c-0.2-1.6,1.5-2.8,3.8-2.8h49.1 c2.2,0,4.2,1.3,4.4,2.8L1148.1,534.6z"/>
|
|
<path class="st1" d="M1223.9,534.6c0.3,1.6-1.4,3-3.6,3h-50.2c-2.3,0-4.3-1.3-4.5-3l-4.8-35.1c-0.2-1.6,1.4-2.8,3.7-2.8h49.1 c2.2,0,4.3,1.3,4.5,2.8L1223.9,534.6z"/>
|
|
<path class="st1" d="M1316.8,534.6c0.4,1.6-1.2,3-3.5,3h-50.2c-2.3,0-4.4-1.3-4.7-3l-6.5-35.1c-0.3-1.6,1.3-2.8,3.5-2.8h49.1 c2.2,0,4.3,1.3,4.7,2.8L1316.8,534.6z"/>
|
|
<path class="st1" d="M1390.1,534.6c0.4,1.6-1.1,3-3.4,3h-50.2c-2.3,0-4.4-1.3-4.8-3l-7.9-35.1c-0.3-1.6,1.2-2.8,3.4-2.8h49.1 c2.2,0,4.4,1.3,4.8,2.8L1390.1,534.6z"/>
|
|
<path class="st1" d="M1463.4,534.6c0.5,1.6-1,3-3.3,3h-50.2c-2.3,0-4.5-1.3-4.9-3l-9.2-35.1c-0.4-1.6,1.1-2.8,3.3-2.8h49.1 c2.2,0,4.4,1.3,4.9,2.8L1463.4,534.6z"/>
|
|
<path class="st1" d="M1330.9,599.7c0.4,1.7-1.2,3.2-3.6,3.2h-51.9c-2.4,0-4.5-1.4-4.9-3.2l-7-37.5c-0.3-1.7,1.3-3,3.6-3h50.7 c2.3,0,4.5,1.4,4.8,3L1330.9,599.7z"/>
|
|
<path class="st1" d="M1406.6,599.7c0.4,1.7-1.1,3.2-3.5,3.2h-51.9c-2.4,0-4.6-1.4-5-3.2l-8.4-37.5c-0.4-1.7,1.2-3,3.5-3h50.7 c2.3,0,4.5,1.4,5,3L1406.6,599.7z"/>
|
|
<path class="st1" d="M1482.4,599.7c0.5,1.7-1,3.2-3.4,3.2h-51.9c-2.4,0-4.6-1.4-5.1-3.2l-9.8-37.5c-0.4-1.7,1.1-3,3.4-3h50.7 c2.3,0,4.6,1.4,5.1,3L1482.4,599.7z"/>
|
|
<path class="st1" d="M1565.1,599.7c0.6,1.7-0.9,3.2-3.2,3.2H1510c-2.4,0-4.7-1.4-5.2-3.2l-11.4-37.5c-0.5-1.7,1-3,3.3-3h50.7 c2.3,0,4.6,1.4,5.2,3L1565.1,599.7z"/>
|
|
<path class="st1" d="M1637.1,599.7c0.6,1.7-0.8,3.2-3.1,3.2h-51.9c-2.4,0-4.8-1.4-5.3-3.2l-12.8-37.5c-0.6-1.7,0.9-3,3.2-3h50.7 c2.3,0,4.7,1.4,5.3,3L1637.1,599.7z"/>
|
|
<path class="st1" d="M1709.2,599.7c0.7,1.7-0.6,3.2-3,3.2h-51.9c-2.4,0-4.8-1.4-5.5-3.2l-14.1-37.5c-0.6-1.7,0.7-3,3-3h50.7 c2.3,0,4.7,1.4,5.4,3L1709.2,599.7z"/>
|
|
<path class="st1" d="M1781.2,599.7c0.8,1.7-0.5,3.2-2.9,3.2h-51.9c-2.4,0-4.9-1.4-5.6-3.2l-15.5-37.5c-0.7-1.7,0.6-3,2.9-3h50.7 c2.3,0,4.8,1.4,5.5,3L1781.2,599.7z"/>
|
|
<path class="st1" d="M1583.6,655.1c0.6,1.8-0.9,3.3-3.3,3.3H1527c-2.4,0-4.9-1.5-5.4-3.3l-12-39.6c-0.5-1.8,1-3.2,3.3-3.2h52.1 c2.4,0,4.8,1.4,5.4,3.2L1583.6,655.1z"/>
|
|
<path class="st1" d="M1657.6,655.1c0.7,1.8-0.7,3.3-3.2,3.3h-53.3c-2.4,0-4.9-1.5-5.5-3.3l-13.5-39.6c-0.6-1.8,0.8-3.2,3.2-3.2 h52.1c2.4,0,4.8,1.4,5.5,3.2L1657.6,655.1z"/>
|
|
<path class="st1" d="M1731.7,655.1c0.7,1.8-0.6,3.3-3,3.3h-53.3c-2.4,0-5-1.5-5.7-3.3l-14.9-39.6c-0.7-1.8,0.7-3.2,3.1-3.2h52.1 c2.4,0,4.9,1.4,5.6,3.2L1731.7,655.1z"/>
|
|
<path class="st1" d="M1805.7,655.1c0.8,1.8-0.5,3.3-2.9,3.3h-53.3c-2.4,0-5-1.5-5.8-3.3l-16.3-39.6c-0.7-1.8,0.6-3.2,3-3.2h52.1 c2.4,0,4.9,1.4,5.7,3.2L1805.7,655.1z"/>
|
|
<path class="st1" d="M1603.1,713.7c0.6,1.9-0.9,3.5-3.3,3.5H1545c-2.5,0-5-1.6-5.6-3.5l-12.7-41.9c-0.6-1.9,1-3.4,3.4-3.4h53.6 c2.4,0,4.9,1.5,5.5,3.4L1603.1,713.7z"/>
|
|
<path class="st1" d="M1679.3,713.7c0.7,1.9-0.7,3.5-3.2,3.5h-54.8c-2.5,0-5.1-1.6-5.7-3.5l-14.2-41.9c-0.6-1.9,0.8-3.4,3.3-3.4 h53.6c2.4,0,5,1.5,5.7,3.4L1679.3,713.7z"/>
|
|
<path class="st1" d="M1755.5,713.7c0.8,1.9-0.6,3.5-3.1,3.5h-54.8c-2.5,0-5.1-1.6-5.9-3.5l-15.8-41.9c-0.7-1.9,0.7-3.4,3.1-3.4 h53.6c2.4,0,5,1.5,5.8,3.4L1755.5,713.7z"/>
|
|
<path class="st1" d="M1831.7,713.7c0.9,1.9-0.5,3.5-3,3.5h-54.8c-2.5,0-5.2-1.6-6-3.5l-17.3-41.9c-0.8-1.9,0.6-3.4,3-3.4h53.6 c2.4,0,5.1,1.5,5.9,3.4L1831.7,713.7z"/>
|
|
<path class="st1" d="M1623.9,775.7c0.7,2.1-0.8,3.7-3.4,3.7H1564c-2.6,0-5.2-1.7-5.8-3.7l-13.5-44.4c-0.6-2,1-3.6,3.5-3.6h55.1 c2.5,0,5.1,1.6,5.7,3.6L1623.9,775.7z"/>
|
|
<path class="st1" d="M1702.3,775.7c0.8,2.1-0.7,3.7-3.3,3.7h-56.5c-2.6,0-5.2-1.7-5.9-3.7l-15.1-44.4c-0.7-2,0.8-3.6,3.3-3.6h55.1 c2.5,0,5.1,1.6,5.9,3.6L1702.3,775.7z"/>
|
|
<path class="st1" d="M1780.7,775.7c0.8,2.1-0.6,3.7-3.1,3.7h-56.5c-2.6,0-5.3-1.7-6.1-3.7l-16.7-44.4c-0.7-2,0.7-3.6,3.2-3.6h55.1 c2.5,0,5.2,1.6,6,3.6L1780.7,775.7z"/>
|
|
<path class="st1" d="M1887.4,839.5c1,2.2-0.4,4-3,4h-58.1c-2.6,0-5.5-1.8-6.4-4l-44.6-108.2c-0.8-2,0.6-3.6,3.1-3.6h55.1 c2.5,0,5.3,1.6,6.1,3.6L1887.4,839.5z"/>
|
|
<path class="st1" d="M1726.6,841.5c0.8,2.2-0.7,4-3.3,4h-139.1c-2.6,0-5.3-1.8-6-4l-14.3-47.1c-0.6-2.1,1-3.8,3.5-3.8h135.7 c2.6,0,5.3,1.7,6.1,3.8L1726.6,841.5z"/>
|
|
<path class="st1" d="M1807.4,841.5c0.9,2.2-0.5,4-3.2,4h-58.2c-2.6,0-5.5-1.8-6.3-4l-17.7-47.1c-0.8-2.1,0.7-3.8,3.3-3.8h56.8 c2.6,0,5.4,1.7,6.2,3.8L1807.4,841.5z"/>
|
|
<path class="st1" d="M1342.8,655.1c0.4,1.8-1.3,3.3-3.7,3.3h-53.3c-2.4,0-4.7-1.5-5-3.3l-7.4-39.6c-0.3-1.8,1.3-3.2,3.7-3.2h52.1 c2.4,0,4.6,1.4,5,3.2L1342.8,655.1z"/>
|
|
<path class="st1" d="M1420.7,655.1c0.5,1.8-1.1,3.3-3.5,3.3h-53.3c-2.4,0-4.7-1.5-5.1-3.3l-8.9-39.6c-0.4-1.8,1.2-3.2,3.6-3.2 h52.1c2.4,0,4.7,1.4,5.1,3.2L1420.7,655.1z"/>
|
|
<path class="st1" d="M1498.6,655.1c0.5,1.8-1,3.3-3.4,3.3h-53.3c-2.4,0-4.8-1.5-5.3-3.3l-10.4-39.6c-0.5-1.8,1.1-3.2,3.5-3.2h52.1 c2.4,0,4.7,1.4,5.2,3.2L1498.6,655.1z"/>
|
|
<path class="st1" d="M1450.9,773.8c0.5,2.1-1.1,3.7-3.7,3.7h-56.4c-2.6,0-5-1.7-5.5-3.7l-9.9-44.3c-0.4-2,1.2-3.6,3.7-3.6h55.1 c2.5,0,4.9,1.6,5.4,3.6L1450.9,773.8z"/>
|
|
<path class="st1" d="M1382.6,839.5c0.5,2.2-1.3,4-3.9,4h-58.1c-2.6,0-5.1-1.8-5.5-4l-8.7-47c-0.4-2.1,1.4-3.8,4-3.8h56.7 c2.6,0,5,1.7,5.5,3.8L1382.6,839.5z"/>
|
|
<path class="st1" d="M1467.6,839.5c0.6,2.2-1.1,4-3.8,4h-58.1c-2.6,0-5.2-1.8-5.7-4l-10.5-47c-0.5-2.1,1.3-3.8,3.8-3.8h56.7 c2.6,0,5.1,1.7,5.6,3.8L1467.6,839.5z"/>
|
|
<path class="st1" d="M1552.5,839.5c0.6,2.2-1,4-3.6,4h-58.1c-2.6,0-5.3-1.8-5.8-4l-12.3-47c-0.5-2.1,1.1-3.8,3.7-3.8h56.7 c2.6,0,5.2,1.7,5.8,3.8L1552.5,839.5z"/>
|
|
<path class="st1" d="M1556.2,510.6c2.4,7-3.7,12.7-13.6,12.7c-9.9,0-19.8-5.7-22.1-12.7c-2.3-6.9,3.9-12.5,13.6-12.5 C1544,498.1,1553.8,503.7,1556.2,510.6z"/>
|
|
<path class="st1" d="M1622,510.6c2.6,7-3.2,12.7-13.1,12.7c-9.9,0-20-5.7-22.5-12.7c-2.5-6.9,3.4-12.5,13.2-12.5 C1609.3,498.1,1619.4,503.7,1622,510.6z"/>
|
|
<path class="st1" d="M1687.8,510.6c2.9,7-2.8,12.7-12.7,12.7c-9.9,0-20.2-5.7-23-12.7c-2.7-6.9,3-12.5,12.8-12.5 C1674.7,498.1,1684.9,503.7,1687.8,510.6z"/>
|
|
</g>
|
|
</g>
|
|
<g id="hand">
|
|
<g id="fingers">
|
|
<path id="thumb" class="st4" d="M1310.4,601.1l-81.9,67.3l-26.4,109.9l57.3,20.3l46.8-90.4l191-30.2l-6-22.8
|
|
c-13.6-51.5-66.1-82.6-117.9-69.7L1310.4,601.1z"/>
|
|
<polygon id="pinky" class="st4" points="1348.9,499.2 1242.7,571.9 1270.6,623.2 1230.2,631.3 1176.4,574.6 1253.5,432.3
|
|
1402,477.5 "/>
|
|
<polygon id="ring" class="st4" points="1374.8,415 1139.1,535 1133.8,619.7 1139.7,686.1 1186.8,680.6 1194.3,584.9 1246.6,510
|
|
"/>
|
|
<polygon id="middle" class="st4" points="1232.9,425.7 1125.5,494.3 1068.4,584.8 1053.5,719.1 1104.7,728.8 1135.6,609.3
|
|
1202,520.5 1384.2,445.9 "/>
|
|
<path id="index" class="st4" d="M1298.2,407.4l-176.7-53.8l-111.3,103.1l-5.3,123.7l48.2,5.8l24.2-91.7l55.9-41.8l120.1,65.1 l39.4-14.3c25.8-9.4,37.1-39.7,23.6-63.6L1298.2,407.4z"/>
|
|
</g>
|
|
<path id="arm" class="st4" d="M1497.2,678.1L1657,577.6l47.7-67.4l287.7-287.5l-181.6-84.6l-201.1,246.2l-311.6,23l-26.7,7.1 c-33.2,8.9-49.3,46.6-32.8,76.7l14.7,26.8l56.9,83.2l33.2,55.8L1497.2,678.1z"/>
|
|
</g>
|
|
</svg>
|
|
|
|
<style>
|
|
svg {
|
|
width: 80vw;
|
|
height: 40vw;
|
|
overflow: visible;
|
|
|
|
@media screen and (min-width: 768px) {
|
|
width: 60vw;
|
|
height: 30vw;
|
|
}
|
|
}
|
|
#hand {
|
|
opacity: 0;
|
|
}
|
|
#keys path {
|
|
opacity: 0;
|
|
}
|
|
.st0{fill:var(--color-bg);}
|
|
.st1{fill:var(--color-text)}
|
|
.st4{fill:var(--color-highlight, #000);}
|
|
</style> |