Игра Тыквенная голова для сайта на Хеллоуин

Игра Тыквенная голова  на Хеллоуин станет отличным украшением для сайта на праздник. Этот код использует различные реквизиты, созданные с использованием SVG. Пользователь должен перетащить эти реквизиты в нужное положение, чтобы нарядить тыкву. Прикольная штука))

HTML

<div class="contain">
  <svg viewBox="0 0 700 450" fill="none">
    <path id="leaf" d="M353.438 187.606C350.438 180.898 363.038 155.806 385.438 160.606C413.438 166.606 362.438 198.606 353.438 187.606Z" fill="#56B799"/>
    <path id="vine" d="M388.12 34C385.298 41.2879 390.82 51.4177 396.76 53.0506C402.7 54.6835 407.599 52.5063 408.659 48.1519C409.719 43.7975 406.879 39.9873 404.319 38.8987C401.76 37.8101 398.34 37.2658 394.58 38.8987C390.82 40.5316 388.103 43.1821 386.58 45.2489C384.207 48.4683 384.649 52.3463 385.82 55.9536C388.17 63.1918 396.938 71.3886 404.999 69.158C407.798 68.3836 409.838 65.3782 408.659 62.3038C407.796 60.0509 405.399 57.9494 402.16 57.9494C398.92 57.9494 397.31 59.1444 394.58 60.8523C391.85 62.5603 388.768 65.0364 386.22 67.0211C383.834 68.8791 373 77 373 77" stroke="#39823C" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
    <g id="pumpkin">
      <path id="Vector 1" d="M325 159C333.333 159.667 350 163.8 350 175C350 186.2 350 204.333 350 212" stroke="black" stroke-width="10"/>
      <rect id="Rectangle 1" x="250" y="189" width="200" height="151" rx="75.5" fill="#EE8532"/>
      <ellipse id="Ellipse 1" cx="350" cy="264.5" rx="76" ry="75.5" fill="#E26B2C"/>
      <ellipse id="Ellipse 2" cx="350" cy="264.5" rx="35" ry="75.5" fill="#EE8532"/>
    </g>
    <path id="mean" fill-rule="evenodd" clip-rule="evenodd" d="M267.5 384L262.139 374H226.861L221.5 384L216.139 374H204C198.477 374 194 378.477 194 384C194 389.523 198.477 394 204 394H239.139L244.5 384L249.861 394H286C291.523 394 296 389.523 296 384C296 378.477 291.523 374 286 374H272.861L267.5 384Z" fill="black"/>
    <path id="happy" fill-rule="evenodd" clip-rule="evenodd" d="M76.5 429C101.077 429 121 408.853 121 384H102V401H85V384H68V401H51V384H32C32 408.853 51.9233 429 76.5 429Z" fill="black"/>
    <g id="goofey">
      <path id="Ellipse 9" d="M530 433C547.566 433 562.349 421.081 566.701 404.888C568.134 399.555 563.523 395 558 395H502C496.477 395 491.866 399.555 493.299 404.888C497.651 421.081 512.434 433 530 433Z" fill="black"/>
      <path id="Rectangle 5" d="M535 395H549V407C549 408.105 548.105 409 547 409H537C535.895 409 535 408.105 535 407V395Z" fill="white"/>
    </g>
    <g id="tongue">
      <path id="Ellipse 13" d="M437.806 422.936C444.556 417.924 443.601 405.205 435.673 394.526L411.228 412.674C419.156 423.353 431.055 427.947 437.806 422.936Z" fill="#F2B7D0"/>
      <path id="Vector 4" d="M426.116 406.352L432.304 414.686" stroke="#D25370" stroke-width="2" stroke-linecap="round"/>
      <path id="Ellipse 12" d="M436.3 380C436.3 398.032 421.682 412.65 403.65 412.65C385.618 412.65 371 398.032 371 380" stroke="black" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
    </g>
    <path id="zigzag" d="M577 373L593 389L609 373L625 389L641 373L657 389L673 373" stroke="black" stroke-width="4"/>
    <circle id="cheek1" cx="654.5" cy="41.5" r="13.5" fill="#F4B9ED"/>
    <circle id="cheek2" cx="584.5" cy="93.5" r="13.5" fill="#F4B9ED"/>
    <path id="tri-eye2" d="M51.5 258L68.3875 287.25H34.6125L51.5 258Z" fill="black"/>
    <path id="tri-eye1" d="M78.5 180L95.3875 209.25H61.6125L78.5 180Z" fill="black"/>
    <g id="round-eye2">
      <circle id="Ellipse 4" cx="220.5" cy="182.5" r="17.5" fill="white"/>
      <circle id="Ellipse 6" cx="220.5" cy="182.5" r="8.5" fill="black"/>
    </g>
    <g id="round-eye1">
      <circle id="Ellipse 4_2" cx="276.5" cy="127.5" r="17.5" fill="white"/>
      <circle id="Ellipse 6_2" cx="276.5" cy="127.5" r="8.5" fill="black"/>
    </g>
    <path id="eye1" fill-rule="evenodd" clip-rule="evenodd" d="M550.5 273C560.165 273 568 263.374 568 251.5C568 239.626 560.165 230 550.5 230C540.835 230 533 239.626 533 251.5C533 263.374 540.835 273 550.5 273ZM553 257C556.866 257 560 253.194 560 248.5C560 243.806 556.866 240 553 240C549.134 240 546 243.806 546 248.5C546 253.194 549.134 257 553 257Z" fill="black"/>
    <path id="eye2" fill-rule="evenodd" clip-rule="evenodd" d="M524.5 337C534.165 337 542 327.374 542 315.5C542 303.626 534.165 294 524.5 294C514.835 294 507 303.626 507 315.5C507 327.374 514.835 337 524.5 337ZM527 321C530.866 321 534 317.194 534 312.5C534 307.806 530.866 304 527 304C523.134 304 520 307.806 520 312.5C520 317.194 523.134 321 527 321Z" fill="black"/>
    <path id="mad-2" fill-rule="evenodd" clip-rule="evenodd" d="M642.484 196.758L658.5 185C661.5 191.667 664 206 658.5 214C651.289 224.488 630.5 223.5 619 214L628.101 207.318C629.63 210.108 632.594 212 636 212C640.971 212 645 207.971 645 203C645 200.576 644.042 198.377 642.484 196.758Z" fill="black"/>
    <path id="mad-1" fill-rule="evenodd" clip-rule="evenodd" d="M631.27 282.758L615.254 271C612.254 277.667 609.754 292 615.254 300C622.464 310.488 643.254 309.5 654.754 300L645.652 293.318C644.124 296.108 641.16 298 637.754 298C632.783 298 628.754 293.971 628.754 289C628.754 286.576 629.712 284.377 631.27 282.758Z" fill="black"/>
    <circle id="dot2" cx="216" cy="110" r="8" fill="black"/>
    <circle id="dot1" cx="148" cy="161" r="8" fill="black"/>
    <path id="close1" d="M407 116C407 122.627 401.627 128 395 128C388.373 128 383 122.627 383 116" stroke="black" stroke-width="4" stroke-linecap="round"/>
    <path id="close2" d="M462 145C462 151.627 456.627 157 450 157C443.373 157 438 151.627 438 145" stroke="black" stroke-width="4" stroke-linecap="round"/>
    <g id="boo">
      <path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M533 202C556.196 202 575 183.196 575 160C575 136.804 556.196 118 533 118C509.804 118 491 136.804 491 160C491 168.679 493.633 176.744 498.143 183.439L493.099 202.262C492.701 203.749 494.062 205.11 495.549 204.712L517.176 198.917C522.06 200.905 527.402 202 533 202Z" fill="white"/>
      <path id="Boo!" d="M508.408 172C508.323 172 508.28 171.947 508.28 171.84L508.344 149.856C508.344 149.771 508.387 149.728 508.472 149.728H514.616C515.832 149.728 516.92 150.027 517.88 150.624C518.84 151.2 519.597 151.968 520.152 152.928C520.707 153.888 520.984 154.933 520.984 156.064C520.984 156.981 520.771 157.835 520.344 158.624C519.939 159.413 519.448 160.053 518.872 160.544C519.491 161.163 519.971 161.877 520.312 162.688C520.653 163.499 520.824 164.352 520.824 165.248C520.824 166.485 520.525 167.616 519.928 168.64C519.331 169.664 518.52 170.485 517.496 171.104C516.493 171.701 515.373 172 514.136 172H508.408ZM512.184 158.56H514.616C515.363 158.56 515.96 158.304 516.408 157.792C516.877 157.259 517.112 156.683 517.112 156.064C517.112 155.381 516.867 154.795 516.376 154.304C515.885 153.792 515.299 153.536 514.616 153.536H512.184V158.56ZM512.152 168.096H514.136C514.904 168.096 515.565 167.819 516.12 167.264C516.675 166.688 516.952 166.016 516.952 165.248C516.952 164.48 516.675 163.819 516.12 163.264C515.565 162.709 514.904 162.432 514.136 162.432H512.184L512.152 168.096ZM529.044 172.32C527.892 172.32 526.836 172.032 525.876 171.456C524.937 170.859 524.18 170.08 523.604 169.12C523.028 168.139 522.74 167.061 522.74 165.888L522.772 155.744C522.772 154.571 523.049 153.504 523.604 152.544C524.18 151.584 524.948 150.816 525.908 150.24C526.868 149.664 527.913 149.376 529.044 149.376C530.196 149.376 531.241 149.664 532.18 150.24C533.118 150.816 533.865 151.584 534.42 152.544C534.996 153.504 535.284 154.571 535.284 155.744L535.316 165.888C535.316 167.061 535.028 168.139 534.452 169.12C533.897 170.08 533.14 170.859 532.18 171.456C531.241 172.032 530.196 172.32 529.044 172.32ZM529.044 168.448C529.684 168.448 530.238 168.192 530.708 167.68C531.198 167.147 531.444 166.549 531.444 165.888L531.412 155.744C531.412 155.04 531.188 154.443 530.74 153.952C530.292 153.461 529.726 153.216 529.044 153.216C528.382 153.216 527.817 153.461 527.348 153.952C526.878 154.421 526.644 155.019 526.644 155.744V165.888C526.644 166.592 526.878 167.2 527.348 167.712C527.817 168.203 528.382 168.448 529.044 168.448ZM543.669 172.32C542.517 172.32 541.461 172.032 540.501 171.456C539.562 170.859 538.805 170.08 538.229 169.12C537.653 168.139 537.365 167.061 537.365 165.888L537.397 155.744C537.397 154.571 537.674 153.504 538.229 152.544C538.805 151.584 539.573 150.816 540.533 150.24C541.493 149.664 542.538 149.376 543.669 149.376C544.821 149.376 545.866 149.664 546.805 150.24C547.743 150.816 548.49 151.584 549.045 152.544C549.621 153.504 549.909 154.571 549.909 155.744L549.941 165.888C549.941 167.061 549.653 168.139 549.077 169.12C548.522 170.08 547.765 170.859 546.805 171.456C545.866 172.032 544.821 172.32 543.669 172.32ZM543.669 168.448C544.309 168.448 544.863 168.192 545.333 167.68C545.823 167.147 546.069 166.549 546.069 165.888L546.037 155.744C546.037 155.04 545.813 154.443 545.365 153.952C544.917 153.461 544.351 153.216 543.669 153.216C543.007 153.216 542.442 153.461 541.973 153.952C541.503 154.421 541.269 155.019 541.269 155.744V165.888C541.269 166.592 541.503 167.2 541.973 167.712C542.442 168.203 543.007 168.448 543.669 168.448ZM553.206 166.112C553.12 166.112 553.067 166.059 553.046 165.952L552.374 158.592V149.888C552.374 149.781 552.416 149.728 552.502 149.728H556.086C556.192 149.728 556.246 149.781 556.246 149.888L556.214 158.592L555.542 165.952C555.52 166.059 555.467 166.112 555.382 166.112H553.206ZM552.502 172C552.416 172 552.374 171.947 552.374 171.84V168.352C552.374 168.267 552.416 168.224 552.502 168.224H556.086C556.171 168.224 556.214 168.267 556.214 168.352V171.84C556.214 171.947 556.171 172 556.086 172H552.502Z" fill="black"/>
    </g>
    <g id="hi">
      <path id="Union_2" fill-rule="evenodd" clip-rule="evenodd" d="M59 130C35.804 130 17 111.196 17 88C17 64.804 35.804 46 59 46C82.196 46 101 64.804 101 88C101 96.6794 98.3673 104.744 93.8568 111.438L98.9006 130.262C99.2991 131.749 97.9383 133.11 96.4512 132.712L74.8242 126.917C69.9404 128.905 64.5981 130 59 130Z" fill="white"/>
      <path id="Hi!" d="M41.848 103C41.736 103 41.68 102.93 41.68 102.79L41.722 73.936C41.722 73.824 41.792 73.768 41.932 73.768H46.594C46.734 73.768 46.804 73.824 46.804 73.936L46.762 85.36H53.062V73.936C53.062 73.824 53.118 73.768 53.23 73.768H57.892C58.032 73.768 58.102 73.824 58.102 73.936L58.186 102.79C58.186 102.93 58.116 103 57.976 103H53.272C53.132 103 53.062 102.93 53.062 102.79V90.442H46.762V102.79C46.762 102.93 46.706 103 46.594 103H41.848ZM61.8236 103C61.6836 103 61.6136 102.93 61.6136 102.79L61.6556 73.936C61.6556 73.824 61.7116 73.768 61.8236 73.768H66.5276C66.6396 73.768 66.6956 73.824 66.6956 73.936L66.7376 102.79C66.7376 102.93 66.6816 103 66.5696 103H61.8236ZM71.524 95.272C71.412 95.272 71.342 95.202 71.314 95.062L70.432 85.402V73.978C70.432 73.838 70.488 73.768 70.6 73.768H75.304C75.444 73.768 75.514 73.838 75.514 73.978L75.472 85.402L74.59 95.062C74.562 95.202 74.492 95.272 74.38 95.272H71.524ZM70.6 103C70.488 103 70.432 102.93 70.432 102.79V98.212C70.432 98.1 70.488 98.044 70.6 98.044H75.304C75.416 98.044 75.472 98.1 75.472 98.212V102.79C75.472 102.93 75.416 103 75.304 103H70.6Z" fill="black"/>
    </g>
    <g id="party">
      <path id="Polygon 7" d="M156.5 232L201.966 326.5H111.034L156.5 232Z" fill="#8F91EA"/>
      <path id="Star 1" d="M154.536 218.291C155.043 215.559 158.957 215.559 159.464 218.291C159.826 220.245 162.211 221.02 163.652 219.652C165.668 217.739 168.835 220.04 167.639 222.548C166.783 224.342 168.257 226.371 170.228 226.111C172.983 225.749 174.192 229.472 171.75 230.798C170.004 231.746 170.004 234.254 171.75 235.202C174.192 236.528 172.983 240.251 170.228 239.889C168.257 239.629 166.783 241.658 167.639 243.452C168.835 245.96 165.668 248.261 163.652 246.348C162.211 244.98 159.826 245.755 159.464 247.709C158.957 250.441 155.043 250.441 154.536 247.709C154.174 245.755 151.789 244.98 150.348 246.348C148.332 248.261 145.165 245.96 146.361 243.452C147.217 241.658 145.743 239.629 143.772 239.889C141.017 240.251 139.808 236.528 142.25 235.202C143.996 234.254 143.996 231.746 142.25 230.798C139.808 229.472 141.017 225.749 143.772 226.111C145.743 226.371 147.217 224.342 146.361 222.548C145.165 220.04 148.332 217.739 150.348 219.652C151.789 221.02 154.174 220.245 154.536 218.291Z" fill="#EBCA63"/>
      <ellipse id="Ellipse 16" cx="156.5" cy="327.5" rx="45.5" ry="12.5" fill="#8F91EA"/>
      <path id="Vector 6" d="M117 310L189.5 295.5" stroke="#3824BB" stroke-width="3" stroke-linecap="round"/>
      <path id="Vector 7" d="M124 293L183 281" stroke="#3824BB" stroke-width="3" stroke-linecap="round"/>
      <path id="Vector 8" d="M132 276.5L175.5 267.5" stroke="#3824BB" stroke-width="3" stroke-linecap="round"/>
    </g>
    <path id="star2" d="M558.598 19.8541C559.197 18.0115 561.803 18.0115 562.402 19.8541L566.225 31.6201C566.493 32.4441 567.261 33.002 568.127 33.002H580.499C582.436 33.002 583.242 35.4813 581.674 36.6201L571.666 43.8918C570.965 44.4011 570.671 45.3039 570.939 46.1279L574.762 57.8939C575.361 59.7365 573.252 61.2687 571.684 60.1299L561.676 52.8582C560.975 52.3489 560.025 52.3489 559.324 52.8582L549.316 60.1299C547.748 61.2687 545.639 59.7365 546.238 57.8939L550.061 46.1279C550.329 45.3039 550.035 44.4011 549.334 43.8918L539.326 36.6201C537.758 35.4813 538.564 33.002 540.501 33.002H552.873C553.739 33.002 554.507 32.4441 554.775 31.6201L558.598 19.8541Z" fill="#EBCA63"/>
    <path id="star1" d="M643.598 99.8541C644.197 98.0115 646.803 98.0115 647.402 99.8541L651.225 111.62C651.493 112.444 652.261 113.002 653.127 113.002H665.499C667.436 113.002 668.242 115.481 666.674 116.62L656.666 123.892C655.965 124.401 655.671 125.304 655.939 126.128L659.762 137.894C660.361 139.736 658.252 141.269 656.684 140.13L646.676 132.858C645.975 132.349 645.025 132.349 644.324 132.858L634.316 140.13C632.748 141.269 630.639 139.736 631.238 137.894L635.061 126.128C635.329 125.304 635.035 124.401 634.334 123.892L624.326 116.62C622.758 115.481 623.564 113.002 625.501 113.002H637.873C638.739 113.002 639.507 112.444 639.775 111.62L643.598 99.8541Z" fill="#EBCA63"/>
    <g id="sleep">
      <path id="Z" d="M488.416 52C488.309 52 488.256 51.9467 488.256 51.84L488.288 48.352L496.128 33.376H488.704C488.619 33.376 488.576 33.3333 488.576 33.248V29.888C488.576 29.7813 488.619 29.728 488.704 29.728H500.288C500.395 29.728 500.448 29.7813 500.448 29.888V33.344L492.64 48.256H500.352C500.437 48.256 500.48 48.3093 500.48 48.416L500.512 51.84C500.512 51.9467 500.459 52 500.352 52H488.416Z" fill="black"/>
      <path id="Z_2" d="M476.338 77C476.251 77 476.208 76.9567 476.208 76.87L476.234 74.036L482.604 61.868H476.572C476.503 61.868 476.468 61.8333 476.468 61.764V59.034C476.468 58.9473 476.503 58.904 476.572 58.904H485.984C486.071 58.904 486.114 58.9473 486.114 59.034V61.842L479.77 73.958H486.036C486.105 73.958 486.14 74.0013 486.14 74.088L486.166 76.87C486.166 76.9567 486.123 77 486.036 77H476.338Z" fill="black"/>
      <path id="Z_3" d="M465.286 99C465.213 99 465.176 98.9633 465.176 98.89L465.198 96.492L470.588 86.196H465.484C465.425 86.196 465.396 86.1667 465.396 86.108V83.798C465.396 83.7247 465.425 83.688 465.484 83.688H473.448C473.521 83.688 473.558 83.7247 473.558 83.798V86.174L468.19 96.426H473.492C473.551 96.426 473.58 96.4627 473.58 96.536L473.602 98.89C473.602 98.9633 473.565 99 473.492 99H465.286Z" fill="black"/>
    </g>
    <g id="glasses">
      <path id="Vector 9" d="M136 44.4063C137.6 34.0063 147.5 34.5 154 37.4063L177.5 48.5" stroke="black" stroke-width="5" stroke-linecap="round"/>
      <rect id="Rectangle 6" x="178.5" y="30.5" width="40" height="40" rx="7.5" stroke="black" stroke-width="5"/>
      <path id="Vector 12" d="M332 44.4063C330.4 34.0063 320.5 34.5 314 37.4063L290.5 48.5" stroke="black" stroke-width="5" stroke-linecap="round"/>
      <rect id="Rectangle 7" x="-2.5" y="2.5" width="40" height="40" rx="7.5" transform="matrix(-1 0 0 1 287 28)" stroke="black" stroke-width="5"/>
      <path id="Vector 11" d="M220 49C224.296 46.7361 236.111 43.5667 249 49" stroke="black" stroke-width="5" stroke-linecap="round"/>
    </g>
  </svg>
</div>

CSS(SCSS)

body {
  background: #F8E0BF;
}

.contain {
  margin: 50px auto;
  width: 70%;
}

@media (max-width: 800px) {
  .contain {
    width: 100%;
  }
}

JS

const things = "#mad-1, #mad-2, #tongue, #eye2, #eye1, #goofey, #cheek1, #cheek2, #mean, #round-eye1, #round-eye2, #happy, #tri-eye2, #tri-eye1, #leaf, #vine, #zigzag, #sleep, #close1, #close2, #boo, #hi, #dot1, #dot2, #party, #star2, #star1, #glasses";

Draggable.create(things, {
        edgeResistance:0.65,
        type:"x,y",
        throwProps:true,
    autoScroll:true
});

/* Inspired by a silly kid and Sarah Drasner's SVG Animations book <3 */