Фото скелет анимация на Хеллоуин для сайта

Это один из самых креативных сниппетов на Хеллоуин для сайта, которые я когда-либо видел. Этот проект состоит из девушки, держащей камеру, которая просит пользователя нажать на нее. Когда пользователь нажимает на кнопку камеры, он в течение нескольких секунд видит скелеты и несколько призраков. Данным прикольным фото скелетом можно украсить сайт на тематический праздник. Эффекты созданы при помощи HTML, CSS и  JS.

HTML

<h1>Take a picture</h1>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="alien" viewBox="0 0 3400 1786"><style>.st5{fill-rule:evenodd;clip-rule:evenodd;fill:#c7f9ed}.st6{fill:#349144}.st9{fill:#45b549}.st11{fill:#fff}.st14{fill-rule:evenodd;clip-rule:evenodd;fill:#936faa}.st15{fill:#b39ac1}.st15,.st16{fill-rule:evenodd;clip-rule:evenodd}.st17{fill:#030104}.st20{stroke:#232323;stroke-width:15.114;stroke-miterlimit:10}.st20,.st22{fill:#232323}.st26{fill-rule:evenodd;clip-rule:evenodd;fill:#c13e95}</style>
  <defs>
    <filter id="shadow" x="-10%" y="-10%" width="150%" height="150%">
      <feDropShadow dx="0" dy="0" stdDeviation="15" flood-color="yellow" flood-opacity="1" />
    </filter>
     <text id="note" fill="white" x="500" y="212">click</text>
    </defs>
<g id="all">
    <g id="landscape">
        <defs><path id="SVGID_1_" d="M2238.7 1482.3H420c-14.8 0-26.9-12.1-26.9-26.9V392.1c0-14.8 12.1-26.9 26.9-26.9h1818.8c14.8 0 26.9 12.1 26.9 26.9v1063.3c0 14.8-12.2 26.9-27 26.9z"/>
    </defs>
        <clipPath id="SVGID_2_"><use xlink:href="#SVGID_1_" overflow="visible"/></clipPath>
        <g clip-path="url(#SVGID_2_)" fill-rule="evenodd" clip-rule="evenodd">
            <path fill="#08c1af" d="M182.6 73.9h2690.2v1625.4H182.6z"/><path d="M182.6 868.3s853.7 178.5 1264.7-23.6S1885 486.5 2248 697.9s202.6 202.5 394.8 215V1091l-2460.2-12.4V868.3z" fill="#9568ab"/><path d="M2872.8 1059.5s-462.7-19.1-1291.9 6.7c-1030.3 32.1-1398.4-52.5-1398.4-51.2v355.9h2690.2v-311.4z" fill="#3c5c95"/><path d="M182.6 1139.3s607.8-4 1377.3 93.5c731.3 92.7 999.4 56.8 1313 84.4v402.1H182.6v-580z" fill="#5b2876"/></g></g><circle id="sun" class="st5" cx="656" cy="627.1" r="156.6"/>
            <g id="human"><path class="st6" d="M1562.5 796.8s38.1-91.4-11.3-79c0 0-50.2 144.6 7.8 129.3 0-.1 24.5-8.3 3.5-50.3zM1127.5 814.4s-32.1-91.4 17.3-79c0 0 31.2 130.6-13.8 130.9.1 0-24-5.3-3.5-51.9z"/><path d="M1262.6 998.3s-180.3 25-259.4 147.5c0 0-170.4 223.1-135.9 272.9 0 0 134.4 107.1 321.2 170.6 0 0-29-16.6 5.6-43.8 0 0-126.8-103.9-225.5-156.4 0 0 123.3-213.9 146.4-157.4l-6.7 66.2 256.3 281.8 173.5-349.7s41.3-82.3 108.2-56.1c273.7 107.2 380.5 156.1 619.4 257.1v-401s-253 45.4-660.1 6.3c0 0-145.3-38.8-179.9-38.1 0 .1-82.8 42.8-163.1.1z" fill-rule="evenodd" clip-rule="evenodd" fill="#45b549"/><path d="M1146.7 1032s26 78.4-4.9 172.5c0 0-78.8 90.5-8.8 194.5 0 0 36.9 71.5 30.1 160h375.6s-32.8-134-11.8-163c37-51 64.9-167.4-5-216 0 0-13-95-3-164 0 0-25-17-46-11l-4 149s-114 2-134.7 69.8c0 0-36.4-56.8-120.6-54.8l-13.8-156.7c.1 0-31.8-2.3-53.1 19.7z" fill-rule="evenodd" clip-rule="evenodd" fill="#fff"/><path class="st6" d="M1454 977c0 9-58 84-131.1 84-115.3 0-104.9-51-104.9-51 0-7 28.6-3.4 40-18 55.4-70.7 196-110.6 196-15z"/><path class="st9" d="M1551.7 745.8c0 115.3-93.5 295.2-208.7 295.2s-208.7-179.9-208.7-295.2 93.5-208.7 208.7-208.7 208.7 93.4 208.7 208.7z"/><path d="M1262.6 882.2s114.1 18 179.3-14.1c0 0-20.9 94.2-69.2 103.9 0 0-63.1 25.6-110.1-89.8z" fill="#036747"/><path class="st11" d="M1299.5 904.3s58.2 23.1 108.8 0l2.5-23.3s-42 11.8-111.3 7.5v15.8z"/><path d="M1314.5 949.3s35.1-31.4 86.5 0c0 0-43.5 47.3-86.5 0z" fill="#c13e95"/><path class="st6" d="M1326.4 748.8s-14.7 86.5-26.9 93.9c0 0 55.5 30.3 73.2-1.8 0 0-30.7 2.1-49.7-4.9"/><path d="M1225.7 618.7s54.2 83.2 149.1 34.5c0 0-40.8-5.1-40.8-56.9 0 0 104 144.2 275.4 136 0 0-36.5-10.2-50.3-61.8-6.5-24.4-21.1-192.6-248.5-136 0 0-84.6-28.6-53.6-68.6 0 0-132 24.3-94 97 0 0-157 34.7-37.8 204.1 0 .1 60.9-126 100.5-148.3z" fill="#f0da0e"/></g><g id="rocks"><path class="st14" d="M481 1240.1s-.1-153.6 153.2-139.3c0 0 98.8-4.5 102.2 131.7-.1-.1-88.6 47.6-255.4 7.6z"/><path class="st15" d="M498 1243.5s-8.6-151.9 144.6-137.6c0 0 107.3-6.2 110.7 130 0-.1-88.5 47.6-255.3 7.6z"/><path class="st14" d="M618 1279.8s-10.2-108.7 96.2-108.3c0 0 70.1.9 72.3 102.6 0 0-59.5 35.6-168.5 5.7z"/><path class="st15" d="M634.2 1279.8s-5.6-112.1 94.5-101.5c0 0 70.1-5.9 72.3 95.8 0 0-57.8 35.6-166.8 5.7z"/></g></g>
  <rect id="blackk" x="380" y="300" width="2000" height="1200" fill="#232323"/>
            <g id="horror"><path class="st11" d="M1198.3 843.1c8.8 3.8 16 6.2 21.4 7.2 5.4 1 17.3 1.5 35.5 1.6 12.3-.2 21.1 2.3 26.1 7.3 5.1 5.1 8.6 14 10.4 26.8 6.4-.4 11.3-.4 14.9-.1 3.5.4 7.4 1.2 11.8 2.5 4.7-2.4 10-3.8 15.8-4.1 4.9-.3 10 .8 15.5 3.2 1.6-.6 2.6-1.2 3.1-1.8 4.7-2.4 8.7-3.7 11.9-3.8 5.3-.3 9.7.8 13.1 3.2 5.1-4.1 10.1-6.2 14.9-6.5 1.6-.1 3.3.1 4.9.5l1.6.7c2-13.6 5-23.3 9.2-29.2 4.3-5.9 12-9.4 23.2-10.6 15.5-2 26.6-3.8 33.5-5.5 6.9-1.7 14.2-4.7 22.1-9 16.6-9 29.6-21.8 38.8-38.4 9.2-16.6 13.3-35.1 12.1-55.4-1.6-27.3-8.5-52.8-20.9-76.5-12.4-23.7-28.4-44-48.2-60.9-19.8-16.8-41.9-29.5-66.6-38-24.6-8.5-49.3-12-73.9-10.6-26.2 1.5-51.2 8-74.9 19.6-23.8 11.6-44.8 26.8-63 45.9-18.2 19.1-32 40.8-41.4 65.2-9.4 24.4-13.3 49.8-11.8 75.9 2.6 43.9 22.9 74.2 60.9 90.8zm205.4-141.5c10.8-12.2 24.3-18.7 40.3-19.6 16-.9 29.8 4.1 41.5 14.9 11.6 10.9 17.8 24.1 18.7 39.6.9 16.1-3.9 29.8-14.5 41.1-10.7 11.3-24 17.5-40.1 18.4-16 .9-29.9-3.8-41.8-14.1-11.9-10.3-18.3-23.2-19.2-38.8-.7-15.5 4.2-29.3 15.1-41.5zm-57.7 81.8c10 6.9 16.9 12.6 20.7 16.9 3.7 4.3 5.8 9.2 6.1 14.5.4 7-1.8 12.9-6.6 17.7-4.8 4.9-10.7 7.5-17.7 7.9-6.4.4-12.2-1.5-17.2-5.5-5.1-4-7.8-9.5-8.2-16.4-.5-7.9 7.1-19.7 22.9-35.1zM1201.1 714c10.6-12.1 23.6-18.7 39.2-19.5 16-.9 30.1 4.1 42.3 14.9 12.2 10.9 18.7 24.3 19.7 40.3.9 15.6-4.1 29-15 40.4-10.9 11.4-24.4 17.5-40.4 18.4-15.6.9-29.3-3.7-41.1-13.7s-18.2-22.8-19.1-38.4c-1-16.1 3.8-30.2 14.4-42.4zm150.8 304.4c-28.9 1.7-53.4-7.2-73.5-26.4-20.2-19.2-31.1-43.8-32.8-73.8l-2.8-48.9c15.6.2 25.4 2.4 29.7 6.7 4.3 4.4 6.9 14.8 7.9 31.4l2.7 46.6c.7 11.7 2.8 18.7 6.4 20.9 3.6 2.2 14.2 2.8 31.8 1.8 6.6 1.8 12 2.6 16.3 2.3 3.7-.2 8.5-1.5 14.3-4.1 4.9 2.4 9.6 3.5 13.9 3.2 6.4-.4 11.9-2 16.6-5 5 1.9 9.8 2.7 14.7 2.4 6.9-.4 11.6-2.8 14.1-7.3 2.4-4.4 3.3-11.7 2.8-21.9l-2.9-50.6c-1-17.1.4-28.2 4.2-33.2 3.7-5.1 13.6-8.1 29.6-9l2.6 44.9c1.9 33.2-5.4 61-21.8 83.4-16.6 22.6-41.1 34.7-73.8 36.6zm-38.1-89.6l-20 1.1-.9-16.1c-.4-6.9 3.1-10.6 10.6-11.1 5.9-.3 9 3 9.4 9.9l.9 16.2zm-19.2 15.6l20-1.1.7 12.8c.5 9.1-2.1 13.8-8 14.2-7.5.4-11.5-3.9-12-13l-.7-12.9zm47.3-17.2l-17.7 1-1-17.6c-.3-5.9 2.4-9 8.3-9.4 4.2-.2 6.9.3 7.7 1.6.9 1.3 1.4 4.1 1.7 8.3l1 16.1zm-16.1 28.3l-.7-12.8 17.7-1 .7 12.8c.5 9.1-2.2 13.8-8 14.2-6 .3-9.2-4.1-9.7-13.2zm44.9-30l-17.7 1-.9-16.1c-.4-6.9 2.4-10.6 8.2-10.9 4.3-.2 6.9.3 7.8 1.6.9 1.3 1.4 4.1 1.7 8.3l.9 16.1zm-16 28.3l-.7-12.8 17.6-1 .7 12.8c.5 9.1-2.7 13.9-9.6 14.3-4.8.3-7.5-4.1-8-13.3zm46.5-30l-18.4 1.1-.9-16.1c-.4-6.9 2.6-10.6 9-11 5.9-.3 9 3 9.4 9.9l.9 16.1zm-17.5 15.5l18.4-1.1.7 12.8c.5 8.6-2.7 13-9.7 13.4-5.3.3-8.3-3.8-8.8-12.4l-.6-12.7zm-77.7 156.2c0-8.7 4.8-15.7 10.7-15.7h18c5.9 0 10.7 7 10.7 15.7s-4.8 15.7-10.7 15.7h-18c-5.9.1-10.7-7-10.7-15.7zm.4 36.4c0-8.7 4.8-15.7 10.7-15.7h18c5.9 0 10.6 7 10.6 15.7s-4.8 15.7-10.6 15.7h-18c-6 0-10.8-7-10.7-15.7zm3.4 48.7c-.2-6.3-.5-12.6-1.1-18.9 1.9-4.4 5.2-7.3 9-7.3h18c5.9 0 10.6 7 10.6 15.7s-4.8 15.7-10.6 15.7h-18c-3.2.1-6-1.9-7.9-5.2zm0 40c-.2-6.3-.5-12.6-1.1-18.9 1.9-4.4 5.2-7.3 9-7.3h18c5.9 0 10.6 7 10.6 15.7s-4.8 15.7-10.6 15.7h-18c-3.2.1-6-1.9-7.9-5.2zm9.4 43.5c-5.9 0-10.6-7-10.6-15.7s4.8-15.7 10.6-15.7h18c5.9 0 10.6 7 10.6 15.7s-4.8 15.7-10.6 15.7h-18zm-9.6 21.6c0-8.7 4.8-15.7 10.7-15.7h18c5.9 0 10.6 7 10.6 15.7s-4.8 15.7-10.6 15.7h-18c-6 0-10.7-7.1-10.7-15.7zm.3 36.3c0-8.7 4.8-15.7 10.7-15.7h18c5.9 0 10.6 7 10.6 15.7s-4.8 15.7-10.6 15.7h-18c-5.9 0-10.7-7-10.7-15.7zm.6 38.3c0-8.7 4.8-15.7 10.7-15.7h18c5.9 0 10.7 7 10.7 15.7s-4.8 15.7-10.7 15.7h-18c-5.9 0-10.7-7-10.7-15.7zm.7 40.3c0-8.7 4.8-15.7 10.7-15.7h18c5.9 0 10.6 7 10.6 15.7s-4.8 15.7-10.6 15.7h-18c-5.9 0-10.7-7-10.7-15.7zm-6.2-342.4c0-8.7 4.8-15.7 10.6-15.7h18c5.9 0 10.6 7 10.6 15.7s-4.8 15.7-10.6 15.7h-18c-5.8 0-10.6-7-10.6-15.7zm53.7 155.9c-1-28.7 2.2-58 11.8-85.7 3.2-9.1 22.7-1.6 22.2-17.9-.5-16.3-10.8-21.2 12-23.6 31.8-3.3 141.9-16.7 162.1-14.4 19 2.2 32.1 27.7-.1 26.1-40.9-2-91.4-2.8-131.8 11.8-19.4 7-27 22.4-36.8 34.8-9.8 12.3-7.6 25.5 11 17.1 18.6-8.4 30.8-22.2 52.6-46.6 4.7-5.2 38.9-8.9 24.2 21.4-10.7 22-47.2 56.8-86.2 53.9-16.1-1.2-25.5 17.7-10.5 23.7 52.5 21 64.6 13 83.7-43.9 8.9-26.7 30.8-22.2 27.7-8.9-9.2 39.3-26.7 117.9-103.1 89.4-7.2-2.7 19.1 35.8 33.9 40 34.4 9.9 61.9-32.5 59.1-60.4-2.7-27.9 15.8-63.5 20.6-22.9 7.4 61.7-24.9 130.9-79.2 116-22.6-6.2-.4 14.5 16.4 20 42 13.7 49.5-19.3 59.4-64.1 6.4-28.9 17.4 11.1 16.4 26.9-1.5 24.1-19.1 76.4-72.4 62.7-53.3-13.8-15.1 24.2-3.3 28.3 11.8 4.1 47.4 12.5 55-13 7.6-25.5 20.7-51.6 24.9-37.3 14.9 50-8.6 81.6-27 88.5-22 8.2-62.7-2.2-83.4-31.5-14.8-20.9-52.2-95.8-58.3-177.4m-9.4-19c.1 4.1.4 8.1.7 12.1m-231.4-135.4c20-3.4 90.9.8 123 2.4 23 1.2 13 6.5 13.5 22.8.6 16.3 19.6 7.7 23.4 16.7 3.9 9.3 7 18.8 9.5 28.4-1.2 2.7-1.7 5.7-1.3 8.9.5 4.1 2.6 7.6 5.4 10.2 1.2 7 2.1 14.1 2.7 21.1-1.5 2.9-2.2 6.3-1.7 9.8.3 2.6 1.3 5 2.7 7 2.3 85.9-33 168.9-47.2 191.5-18.9 30.2-59 42.7-81.5 35.7-18.9-5.8-44.4-36.1-32.7-86.6 3.4-14.4 18.1 10.8 27.3 35.8 9.3 25 44.4 14.8 55.9 10.1 11.5-4.7 47.4-44.5-5.1-28s-73.4-34.6-76.5-58.6c-2-15.7 6.5-56 14.7-27.6 12.7 44 22.3 76.5 63.5 60.6 16.5-6.4 37.4-28.1 15.2-20.7-53.5 17.6-90.1-49.5-86.6-111.2 2.3-40.7 23.1-6.2 22.1 21.7s29.2 68.7 63 57c14.5-5 38.6-44.7 31.5-41.6-74.7 32.4-97.2-44.8-108.9-83.5-3.9-13 17.6-18.7 28.2 7.4 22.6 55.6 35.3 63 86.5 39.3 14.6-6.8 4-25-12-23-38.9 4.9-77.6-27.8-89.7-49.1-16.6-29.4 17.9-27.5 22.9-22.5 23.4 23.2 36.5 36.3 55.6 43.6 19.1 7.4 20.5-5.9 9.9-17.6-10.6-11.7-19.1-26.7-39.1-32.6-41.4-12.3-51.7-5.5-92.5-1.4-32.1 3.2-20.6-22.8-1.7-26zm193.6 353.7c0-8.7 4.8-15.7 10.7-15.7h18c5.9 0 10.6 7 10.6 15.7s-4.8 15.7-10.6 15.7h-18c-5.9 0-10.7-7.1-10.7-15.7zm1.1 35.5c0-8.7 4.8-15.7 10.7-15.7h18c5.9 0 10.7 7 10.7 15.7s-4.8 15.7-10.7 15.7h-18c-5.9 0-10.7-7-10.7-15.7zm353.5-403.7c138.1-.3 253.1 32.6 285 39.3 26.8 5.6 51-21.6 68.1.3 9.1 11.6 4.3 41.5-11.2 37.2-7.9-2.2-19.6 6-15.4 12 11 15.8 1.8 37.3-16.4 36.7-22.4-.8-8.1-21.6-35.7-32.5-96.8-38-251.8-74.2-286.3-57.6-33.2 15.9-56.9 5.9-43.2-12.6 10.9-14.7-24-13.9.4-31.3 16.5-11.9 22.8 8.5 54.7 8.5zm464 72.6c95 54.7 279.8 67.8 377.2 77.2 14.9 1.4 35.1 38.9 9.3 61.2-18.8 16.3 6.6 27.8 9.6 40 2.7 10.9-28.9 56.2-59.4 11.7-36.2-52.9-338.8-105.2-393.2-112.2-24.4-3.1-71-14.2-64.1-30.4 16.2-38.2 33.2-1.5 26.7-55-5.3-42.8 70-6.2 93.9 7.5zM869.4 1377.4c-2.5-23.1 28-20.9 40.9-39.9 15.3-22.7 61.4-113.9 144.8-194.4 19.3-18.6 11.1-34.5 28.2-37.1 24.9-3.8 3.4 16.1 18.5 18.6 19 3.2 10.6 23.1-18.7 32.8-30.5 10.2-108.1 117-144.3 196.5-10.3 22.7 10.5 26.9-2.6 40.5-10.6 11.1-23.5 8.9-26.1-7.1-1-6-12.9-4.2-16.3 1.8-6.8 11.6-23.1.6-24.4-11.7zm291.3 226.3c-39.7-42.1-125.9-114.3-186-138.9-15.1-6.2-61-27-39.1-40.1 27.4-16.4 4.1-11 16-32.5 5.1-9.1 27.2 8.7 37.5 18.9 23 22.9 147.8 152.4 185.7 150.1 31.9-1.9 31.7 22.3 25.7 25-6.8 3-21.4-4.6-22.2 10.1-1 20.2-11.5 13.9-17.6 7.4z" id="skeleton"/>
            <g id="ghost"><path class="st5" d="M811.1 630.5c0 86.5-70.1 156.6-156.6 156.6-46.5 0-174.3 2.5-203-29.7-24.6-27.7 46.3-87 46.3-126.9 0-86.5 70.1-156.6 156.6-156.6S811.1 544 811.1 630.5z"/><circle class="st16" cx="645" cy="567.9" r="6.5"/><circle class="st16" cx="686.5" cy="561.4" r="7"/><circle class="st16" cx="681.5" cy="604.4" r="12"/></g>
            <g id="facerock_1_"><circle class="st11" cx="574.5" cy="1162.4" r="8"/><circle class="st11" cx="641.5" cy="1161.4" r="7"/><path class="st11" d="M573.3 1200.7h20v12.8c0 9.1-2.9 13.7-8.8 13.7-7.5 0-11.2-4.6-11.2-13.7v-12.8zM603.9 1213.6v-12.8h17.7v12.8c0 9.1-3 13.7-8.8 13.7-6-.1-8.9-4.6-8.9-13.7z"/></g>
            <g id="facerock"><circle class="st11" cx="683.5" cy="1222.4" r="8"/><circle class="st11" cx="758.5" cy="1222.4" r="7"/><path class="st11" d="M677.3 1244.7h16v10.3c0 7.3-2.3 10.9-7 10.9-6 0-9-3.6-9-10.9v-10.3zM701.8 1255v-10.3H716v10.3c0 7.3-2.4 10.9-7.1 10.9-4.8.1-7.1-3.6-7.1-10.9zM724.9 1255v-10.3H739v10.3c0 7.3-2.8 10.9-8.4 10.9-3.7.1-5.7-3.6-5.7-10.9zM748.7 1244.7h14.8v10.3c0 6.9-2.8 10.3-8.3 10.3-4.3 0-6.4-3.4-6.4-10.3v-10.3z"/></g>
            <g id="mountain"><path class="st17" d="M1873.2 753.3s3.6-13.9-15-28.2-42.8-9.5-49.9-6.6c-13.1 5.2-9.8 29.8 12.6 28.9 0 0 11.5-.7 23.2 9.7 9.5 8.4 24.9 10.6 29.1-3.8zM1943.6 752.8s-8.2-11.6 4.8-29 37.9-19.1 45.7-18.2c14.4 1.5 19.6 24.3-2.2 29 0 0-11.3 2.2-19 14.4-6.2 9.9-20.3 15.7-29.3 3.8z"/><circle class="st16" cx="1991.5" cy="778.4" r="7"/><circle class="st16" cx="1831.5" cy="778.4" r="7"/><path d="M2010.5 842.4s-14 80-98 83c0 0-77 16-98-67" fill="#5b2876"/><path fill="#c7f9ed" d="M1830.5 859.1l159-11.7-17 38-21-28-12 30-20-25-12.2 30.5-17.6-27.8-17.2 29.9-9.5-29.9-19.1 29.9z"/></g></g>
            <g id="glasses"><circle class="st20" cx="1236.3" cy="754.2" r="69.3"/><circle class="st20" cx="1447.9" cy="754.2" r="69.3"/><path d="M1305.5 758.8c0-20.2 16.4-36.6 36.6-36.6s36.6 16.4 36.6 36.6" fill="none" stroke="#232323" stroke-width="15.114" stroke-miterlimit="10"/><path class="st22" d="M1161.1 768.6h-12.9c-4.4 0-8-3.6-8-8v-12.9c0-4.4 3.6-8 8-8h12.9c4.4 0 8 3.6 8 8v12.9c0 4.4-3.6 8-8 8zM1536.1 768.6h-12.9c-4.4 0-8-3.6-8-8v-12.9c0-4.4 3.6-8 8-8h12.9c4.4 0 8 3.6 8 8v12.9c0 4.4-3.6 8-8 8z"/></g>
  <path id="flash" d="M2238.7 1482.3H420c-14.8 0-26.9-12.1-26.9-26.9V392.1c0-14.8 12.1-26.9 26.9-26.9h1818.8c14.8 0 26.9 12.1 26.9 26.9v1063.3c0 14.8-12.2 26.9-27 26.9z" fill-rule="evenodd" clip-rule="evenodd" fill="#ebf7fc"/>
  <g id="phone" fill-rule="evenodd" clip-rule="evenodd"><path d="M2666.2 248.6H264c-18.9 0-34.3 15.4-34.3 34.3v1302.8c0 18.9 15.4 34.3 34.3 34.3h2402.2c18.9 0 34.3-15.4 34.3-34.3V282.9c0-18.9-15.4-34.3-34.3-34.3zm-400.5 1207.3c0 14.8-12.1 26.9-26.9 26.9H420c-14.8 0-26.9-12.1-26.9-26.9V392.6c0-14.8 12.1-26.9 26.9-26.9h1818.8c14.8 0 26.9 12.1 26.9 26.9v1063.3z" fill="#0d2a39"/>
  <g transform="translate(2340,765)">
    <foreignObject xmlns="http://www.w3.org/2000/svg" x="0" y="0">
      <button class="pic" type="button">click</button>
    </foreignObject>
  </g>
  <circle id="btn" cx="2482" cy="900" r="130" fill="#ffcc00" style="filter:url(#shadow)" /></g>
  <g id="hand"><path class="st6" d="M2699 239l-2 318s314 153 135 351c0 0 270 83 322-217s-157-486-157-486l-298 34z"/><path class="st9" d="M2735.1 823.8s-219.3 46.8-288.6-27.7c0 0-201.1 91 21.7 230.6 0 0 205.9 108.4 421.9-5.6 0 0 58 242 340 283l170 59V722l-170-236.3S2941 57 2810.6 57.5c-130.6.5-118.5 61.1-416.6 89.7 0 0-239.7 16-309.9-36 0 0-134.1 61.7 37.9 146.7 0 0 93 40 224 15 0 0 342 58 436-4 0 0 79.3 180.9 218 252 0 .1 22 228.1-264.9 302.9z"/><path class="st26" d="M2553 836l-43 98s-150-61-134-123c0 0-1-52 70-15 0 0 67 43 107 40zM2051.4 136.2S2121 196 2190 179v-36s-104-19-139-58c0 0-24.1 20.3.4 51.2z"/></g>
  <g id="arrow"><path fill="#fff" stroke="#fff" stroke-width="6" d="M2385.9 1065.2c-15.1 11.6-27 26-34.3 43.6-5.3 12.9-8.1 26.7-9.2 40.5-1.2 14.4-.3 26.7 6.1 39.8 6.5 13.2 16.5 26.4 29.6 33.5 1.7.9 3.2-1.7 1.5-2.6-11.3-6.1-19.9-16.9-26.1-27.9-3.3-5.8-6-12-7.6-18.6-1.6-6.9-1.2-13.9-.8-20.9 1.5-23.5 7.9-47.2 22.8-66 5.7-7.2 12.3-13.4 19.6-18.9 1.5-1.1 0-3.7-1.6-2.5z"/><path stroke="#fff" stroke-width="6" fill="#fff" d="M2350 1224.5c11.8-.2 23.6-.4 35.5-.6.8 0 1.5-.7 1.5-1.5.2-11.8.5-23.6.7-35.4 0-1.9-3-1.9-3 0-.2 11.8-.5 23.6-.7 35.4l1.5-1.5c-11.8.2-23.6.4-35.5.6-1.9 0-1.9 3 0 3z"/></g>
    <use class="text" xlink:href="#note" x="1880" y="1100"></use>
  
</svg>

CSS

@import url("https://fonts.googleapis.com/css?family=Cedarville+Cursive");
body {
  background-color: #232323;
  color: white;
  font-family: "Cedarville Cursive", cursive;
  font-size: 120%;
  letter-spacing: -0.04em;
  margin: auto;
  text-align: center;
}
#alien {
  background-color: #0eddd3;
  border-radius: 10px;
  max-width: 800px;
}
#blackk {
/*   mix-blend-mode: multiply; */
}
#horror, #flash, #blackk { 
  opacity: 0; 
}
#flash.active {
  animation: picture .5s .1s ease-in;
}
#blackk.active {
  animation: blackk 1.5s .2s ease-in;
}
#horror.active {
  animation: picture 1.5s .2s ease-in;
}
#human.active {
  animation: human 1.5s .2s ease-out;
}
@keyframes picture {
  0, 30% { 
    opacity:0;
  }
  31%, 60% {
    opacity: 1;
  }
}
@keyframes blackk {
  0, 30% { 
    opacity:0;
  }
  31%, 60% {
    opacity: .5;
  }
}
@keyframes human {
  0, 30% { 
    opacity:1;
  }
  31%, 60% {
    opacity: 0;
  }
}
button {
  background: #ffcc00;
  border-radius: 50%;
  box-shadow: 0 0 20px 10px yellow;
  cursor: pointer;
  height: 300px;
  width: 300px;
  animation: pulse .5s infinite alternate;
}
#btn:hover { cursor: pointer; }
@keyframes pulse {
 to { 
    box-shadow: 0 0 100px 10px #00e1d4;
  }
}
#hand { pointer-events: none;}
#hand.active {
  animation: clic .2s linear;
}
@keyframes clic {
 to { 
   transform: rotate(0.3deg);
  }
}
#note {
  fill: white;
  font-size: 100px;
}

JS

$('#btn').on('click', function(){
  $('#hand, #flash, #black, #horror, #human').addClass('active');
  setTimeout(clear, 1500);
    function clear() {
        $('#hand, #flash, #black, #horror, #human').removeClass('active');
    }
});