Saturday, 31 October 2020

CSS How to SVG animation - Create walking man animation

SVG animation - Create walking man animation

by on in ,

 

walking man svg animation


Don't you want your website to seem attractive? I am sure you want to. But, How can you do that? What about some animations? It will be amazing right? So, I am here to teach you an awesome example of SVG animation and I am sure you would love it. Find the video below to know how it will look.



I am going to teach you how to create a walking man SVG animation. Before I start, let me discuss what SVG is. SVG stands for Scalable Vector Graphics. It is vector-based graphics in XML-format used widely used for creating animations.


I am using some CSS properties to create this animation. The properties are as follows-
  1. CSS animations
  2. CSS transforms
 I am providing the HTML and CSS code, then I will discuss the steps. Find the source code below.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>walk animation</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<svg width="955" height="681" viewBox="0 0 955 681" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="955" height="681" fill="#E5E5E5"/>
<g id="undraw_walk_in_the_city_1ma6 (1) 1" clip-path="url(#clip0)">
<path id="Vector" opacity="0.1" d="M857.57 577.95C850.45 581.62 842.99 584.79 835.63 587.95C808.44 599.43 780.84 611.01 751.63 614.95C696.77 622.25 640.16 602.25 586.26 614.73C541.11 625.15 503.77 657.08 459.66 671.3C439.15 677.91 417.81 680.5 396.28 680.5H393.5C390.833 680.467 388.187 680.4 385.56 680.3C363.73 679.48 341.81 676.25 320.41 672.12C252.84 659.12 184.07 635.29 132.41 591.42C282.83 563.94 592.68 521.76 857.57 577.95Z" fill="#252223"/>
<g id="front-Background">
<path id="Vector_2" opacity="0.3" d="M910 249V185H872V249H827V150H794V76H767V0H711V76H684V150H652V61H634V16H623V61H559V345H510V315H480V345H431V249H343V185H305V249H303V372H263V300H215V372H175V150H144V76H30V150H0V541H175H303H431H559H652H827H955V249H910Z" fill="#6C63FF"/>
<path id="Vector_3" opacity="0.4" d="M113 479H155V455H113V479Z" fill="white"/>
<path id="Vector_4" opacity="0.4" d="M61 455H19V479H61V455Z" fill="white"/>
<path id="Vector_5" opacity="0.4" d="M113 432H155V408H113V432Z" fill="white"/>
<path id="Vector_6" opacity="0.4" d="M113 385H155V361H113V385Z" fill="white"/>
<path id="Vector_7" opacity="0.4" d="M61 361H19V385H61V361Z" fill="white"/>
<path id="Vector_8" opacity="0.4" d="M61 314H19V338H61V314Z" fill="white"/>
<path id="Vector_9" opacity="0.4" d="M61 267H19V291H61V267Z" fill="white"/>
<path id="Vector_10" opacity="0.4" d="M113 291H155V267H113V291Z" fill="white"/>
<path id="Vector_11" opacity="0.4" d="M113 244H155V220H113V244Z" fill="white"/>
<path id="Vector_12" opacity="0.4" d="M61 220H19V244H61V220Z" fill="white"/>
<path id="Vector_13" opacity="0.4" d="M113 197H155V173H113V197Z" fill="white"/>
<path id="Vector_14" opacity="0.4" d="M61 173H19V197H61V173Z" fill="white"/>
<path id="Vector_15" opacity="0.4" d="M61 408H19V432H61V408Z" fill="white"/>
<path id="Vector_16" opacity="0.4" d="M113 338H155V314H113V338Z" fill="white"/>
<path id="Vector_17" opacity="0.4" d="M288 486H190V498H288V486Z" fill="white"/>
<path id="Vector_18" opacity="0.4" d="M288 468H190V480H288V468Z" fill="white"/>
<path id="Vector_19" opacity="0.4" d="M288 450H190V462H288V450Z" fill="white"/>
<path id="Vector_20" opacity="0.4" d="M544 438H446V450H544V438Z" fill="white"/>
<path id="Vector_21" opacity="0.4" d="M544 420H446V432H544V420Z" fill="white"/>
<path id="Vector_22" opacity="0.4" d="M544 402H446V414H544V402Z" fill="white"/>
<path id="Vector_23" opacity="0.4" d="M288 432H190V444H288V432Z" fill="white"/>
<path id="Vector_24" opacity="0.4" d="M288 414H190V426H288V414Z" fill="white"/>
<path id="Vector_25" opacity="0.4" d="M288 396H190V408H288V396Z" fill="white"/>
<path id="Vector_26" opacity="0.4" d="M351 272H324V307H351V272Z" fill="white"/>
<path id="Vector_27" opacity="0.4" d="M595 150H559V196H595V150Z" fill="white"/>
<path id="Vector_28" opacity="0.4" d="M383 475H410V440H383V475Z" fill="white"/>
<path id="Vector_29" opacity="0.4" d="M351 440H324V475H351V440Z" fill="white"/>
<path id="Vector_30" opacity="0.4" d="M383 419H410V384H383V419Z" fill="white"/>
<path id="Vector_31" opacity="0.4" d="M351 384H324V419H351V384Z" fill="white"/>
<path id="Vector_32" opacity="0.4" d="M383 363H410V328H383V363Z" fill="white"/>
<path id="Vector_33" opacity="0.4" d="M351 328H324V363H351V328Z" fill="white"/>
<path id="Vector_34" opacity="0.4" d="M383 307H410V272H383V307Z" fill="white"/>
<path id="Vector_35" opacity="0.4" d="M595 84H559V130H595V84Z" fill="white"/>
<path id="Vector_36" opacity="0.4" d="M595 414H559V460H595V414Z" fill="white"/>
<path id="Vector_37" opacity="0.4" d="M595 348H559V394H595V348Z" fill="white"/>
<path id="Vector_38" opacity="0.4" d="M595 282H559V328H595V282Z" fill="white"/>
<path id="Vector_39" opacity="0.4" d="M595 216H559V262H595V216Z" fill="white"/>
<path id="Vector_40" opacity="0.4" d="M806.5 178H672.5V217H806.5V178Z" fill="white"/>
<path id="Vector_41" opacity="0.4" d="M807 262H673V301H807V262Z" fill="white"/>
<path id="Vector_42" opacity="0.4" d="M807.5 346H673.5V385H807.5V346Z" fill="white"/>
<path id="Vector_43" opacity="0.4" d="M808 430H674V469H808V430Z" fill="white"/>
<path id="Vector_44" opacity="0.4" d="M48 97H30V135H48V97Z" fill="white"/>
<path id="Vector_45" opacity="0.4" d="M955 272H910V330H955V272Z" fill="white"/>
<path id="Vector_46" opacity="0.4" d="M955 356H910V414H955V356Z" fill="white"/>
<path id="Vector_47" opacity="0.4" d="M955 440H910V498H955V440Z" fill="white"/>
<path id="Vector_48" opacity="0.1" d="M264.68 47.68H257.8C258.451 47.7096 259.101 47.6071 259.711 47.3785C260.321 47.1499 260.878 46.8 261.349 46.35C261.82 45.8999 262.195 45.3591 262.451 44.7601C262.707 44.1611 262.839 43.5164 262.839 42.865C262.839 42.2135 262.707 41.5688 262.451 40.9699C262.195 40.3709 261.82 39.83 261.349 39.38C260.878 38.9299 260.321 38.5801 259.711 38.3515C259.101 38.1229 258.451 38.0203 257.8 38.05H202.07C200.831 38.1065 199.661 38.6384 198.805 39.5352C197.948 40.432 197.469 41.6246 197.469 42.865C197.469 44.1053 197.948 45.2979 198.805 46.1947C199.661 47.0915 200.831 47.6235 202.07 47.68H208.95C208.299 47.6503 207.649 47.7529 207.039 47.9815C206.429 48.2101 205.872 48.56 205.401 49.01C204.93 49.46 204.555 50.0009 204.299 50.5998C204.043 51.1988 203.911 51.8435 203.911 52.495C203.911 53.1464 204.043 53.7911 204.299 54.3901C204.555 54.9891 204.93 55.5299 205.401 55.98C205.872 56.43 206.429 56.7799 207.039 57.0085C207.649 57.2371 208.299 57.3396 208.95 57.31H199.32C198.669 57.2803 198.019 57.3829 197.409 57.6115C196.799 57.8401 196.242 58.19 195.771 58.64C195.3 59.09 194.925 59.6309 194.669 60.2299C194.413 60.8288 194.281 61.4735 194.281 62.125C194.281 62.7764 194.413 63.4211 194.669 64.0201C194.925 64.6191 195.3 65.1599 195.771 65.61C196.242 66.06 196.799 66.4099 197.409 66.6385C198.019 66.8671 198.669 66.9696 199.32 66.94H255.05C255.701 66.9696 256.351 66.8671 256.961 66.6385C257.571 66.4099 258.128 66.06 258.599 65.61C259.07 65.1599 259.445 64.6191 259.701 64.0201C259.957 63.4211 260.089 62.7764 260.089 62.125C260.089 61.4735 259.957 60.8288 259.701 60.2299C259.445 59.6309 259.07 59.09 258.599 58.64C258.128 58.19 257.571 57.8401 256.961 57.6115C256.351 57.3829 255.701 57.2803 255.05 57.31H264.68C265.331 57.3396 265.981 57.2371 266.591 57.0085C267.201 56.7799 267.758 56.43 268.229 55.98C268.7 55.5299 269.075 54.9891 269.331 54.3901C269.587 53.7911 269.719 53.1464 269.719 52.495C269.719 51.8435 269.587 51.1988 269.331 50.5998C269.075 50.0009 268.7 49.46 268.229 49.01C267.758 48.56 267.201 48.2101 266.591 47.9815C265.981 47.7529 265.331 47.6503 264.68 47.68Z" fill="#252223"/>
<path id="Vector_49" opacity="0.1" d="M929.68 10.68H922.8C923.451 10.7097 924.101 10.6071 924.711 10.3785C925.321 10.1499 925.878 9.80004 926.349 9.35C926.82 8.89997 927.195 8.35912 927.451 7.76014C927.707 7.16115 927.839 6.51646 927.839 5.86501C927.839 5.21356 927.707 4.56887 927.451 3.96988C927.195 3.3709 926.82 2.83005 926.349 2.38002C925.878 1.92998 925.321 1.5801 924.711 1.3515C924.101 1.12291 923.451 1.02035 922.8 1.05001H867.07C865.831 1.1065 864.661 1.63846 863.805 2.53526C862.948 3.43206 862.469 4.62466 862.469 5.86501C862.469 7.10535 862.948 8.29796 863.805 9.19476C864.661 10.0916 865.831 10.6235 867.07 10.68H873.95C873.299 10.6503 872.649 10.7529 872.039 10.9815C871.429 11.2101 870.872 11.56 870.401 12.01C869.93 12.4601 869.555 13.0009 869.299 13.5999C869.043 14.1989 868.911 14.8436 868.911 15.495C868.911 16.1465 869.043 16.7912 869.299 17.3901C869.555 17.9891 869.93 18.53 870.401 18.98C870.872 19.43 871.429 19.7799 872.039 20.0085C872.649 20.2371 873.299 20.3397 873.95 20.31H864.32C863.669 20.2803 863.019 20.3829 862.409 20.6115C861.799 20.8401 861.242 21.19 860.771 21.64C860.3 22.0901 859.925 22.6309 859.669 23.2299C859.413 23.8289 859.281 24.4736 859.281 25.125C859.281 25.7765 859.413 26.4212 859.669 27.0201C859.925 27.6191 860.3 28.16 860.771 28.61C861.242 29.06 861.799 29.4099 862.409 29.6385C863.019 29.8671 863.669 29.9697 864.32 29.94H920.05C921.289 29.8835 922.459 29.3516 923.316 28.4548C924.172 27.558 924.651 26.3654 924.651 25.125C924.651 23.8847 924.172 22.6921 923.316 21.7953C922.459 20.8985 921.289 20.3665 920.05 20.31H929.68C930.331 20.3397 930.981 20.2371 931.591 20.0085C932.201 19.7799 932.758 19.43 933.229 18.98C933.7 18.53 934.075 17.9891 934.331 17.3901C934.587 16.7912 934.719 16.1465 934.719 15.495C934.719 14.8436 934.587 14.1989 934.331 13.5999C934.075 13.0009 933.7 12.4601 933.229 12.01C932.758 11.56 932.201 11.2101 931.591 10.9815C930.981 10.7529 930.331 10.6503 929.68 10.68Z" fill="#252223"/>
<path id="Vector_50" opacity="0.1" d="M510.68 168.68H503.8C504.451 168.71 505.101 168.607 505.711 168.379C506.321 168.15 506.878 167.8 507.349 167.35C507.82 166.9 508.195 166.359 508.451 165.76C508.707 165.161 508.839 164.516 508.839 163.865C508.839 163.214 508.707 162.569 508.451 161.97C508.195 161.371 507.82 160.83 507.349 160.38C506.878 159.93 506.321 159.58 505.711 159.351C505.101 159.123 504.451 159.02 503.8 159.05H448.07C446.831 159.106 445.661 159.638 444.805 160.535C443.948 161.432 443.469 162.625 443.469 163.865C443.469 165.105 443.948 166.298 444.805 167.195C445.661 168.092 446.831 168.624 448.07 168.68H454.95C454.299 168.65 453.649 168.753 453.039 168.982C452.429 169.21 451.872 169.56 451.401 170.01C450.93 170.46 450.555 171.001 450.299 171.6C450.043 172.199 449.911 172.844 449.911 173.495C449.911 174.146 450.043 174.791 450.299 175.39C450.555 175.989 450.93 176.53 451.401 176.98C451.872 177.43 452.429 177.78 453.039 178.009C453.649 178.237 454.299 178.34 454.95 178.31H445.32C444.669 178.28 444.019 178.383 443.409 178.611C442.799 178.84 442.242 179.19 441.771 179.64C441.3 180.09 440.925 180.631 440.669 181.23C440.413 181.829 440.281 182.474 440.281 183.125C440.281 183.776 440.413 184.421 440.669 185.02C440.925 185.619 441.3 186.16 441.771 186.61C442.242 187.06 442.799 187.41 443.409 187.639C444.019 187.867 444.669 187.97 445.32 187.94H501.05C501.701 187.97 502.351 187.867 502.961 187.639C503.571 187.41 504.128 187.06 504.599 186.61C505.07 186.16 505.445 185.619 505.701 185.02C505.957 184.421 506.089 183.776 506.089 183.125C506.089 182.474 505.957 181.829 505.701 181.23C505.445 180.631 505.07 180.09 504.599 179.64C504.128 179.19 503.571 178.84 502.961 178.611C502.351 178.383 501.701 178.28 501.05 178.31H510.68C511.331 178.34 511.981 178.237 512.591 178.009C513.201 177.78 513.758 177.43 514.229 176.98C514.7 176.53 515.075 175.989 515.331 175.39C515.587 174.791 515.719 174.146 515.719 173.495C515.719 172.844 515.587 172.199 515.331 171.6C515.075 171.001 514.7 170.46 514.229 170.01C513.758 169.56 513.201 169.21 512.591 168.982C511.981 168.753 511.331 168.65 510.68 168.68Z" fill="#252223"/>
<path id="Vector_51" d="M50.58 478.55C50.58 478.55 117.95 530.1 116.07 600.18" stroke="#535461" stroke-miterlimit="10"/>
<path id="Vector_52" d="M119.73 602.88C119.73 602.88 95.06 519.12 124.36 457.47C136.66 431.6 140.74 402.55 135.06 374.47C132.344 361.138 128.411 348.083 123.31 335.47" stroke="#535461" stroke-width="2" stroke-miterlimit="10"/>
<path id="Vector_53" d="M172.26 353.42C166.68 362.04 134.9 376.92 134.9 376.92C134.9 376.92 135.48 341.83 141.06 333.21C143.797 329.207 147.99 326.431 152.745 325.476C157.499 324.521 162.439 325.462 166.509 328.097C170.58 330.733 173.46 334.855 174.534 339.584C175.609 344.313 174.792 349.274 172.26 353.41V353.42Z" fill="#6C63FF"/>
<path id="Vector_54" d="M170.91 450.59C161.74 455.21 126.8 452.02 126.8 452.02C126.8 452.02 145.01 422.02 154.18 417.4C158.568 415.296 163.606 414.995 168.212 416.564C172.818 418.133 176.626 421.445 178.818 425.79C181.009 430.135 181.409 435.166 179.933 439.803C178.456 444.44 175.22 448.312 170.92 450.59H170.91Z" fill="#6C63FF"/>
<path id="Vector_55" d="M153.34 523.88C145.09 529.98 110.1 532.74 110.1 532.74C110.1 532.74 122.98 500.1 131.23 493.99C133.191 492.515 135.425 491.443 137.802 490.835C140.179 490.228 142.653 490.097 145.082 490.451C147.51 490.804 149.844 491.634 151.95 492.894C154.055 494.154 155.891 495.819 157.35 497.791C158.809 499.764 159.863 502.006 160.452 504.388C161.04 506.77 161.151 509.246 160.779 511.671C160.406 514.096 159.557 516.424 158.28 518.519C157.003 520.615 155.324 522.437 153.34 523.88Z" fill="#6C63FF"/>
<path id="Vector_56" d="M95.87 378.91C103.23 386.06 137.54 393.47 137.54 393.47C137.54 393.47 129.14 359.4 121.78 352.24C120.044 350.471 117.972 349.067 115.685 348.111C113.398 347.154 110.943 346.665 108.465 346.671C105.986 346.677 103.534 347.179 101.252 348.147C98.9704 349.115 96.9052 350.529 95.1781 352.307C93.451 354.085 92.0968 356.19 91.1953 358.499C90.2937 360.808 89.863 363.274 89.9284 365.751C89.9938 368.229 90.554 370.669 91.5761 372.927C92.5982 375.185 94.0615 377.216 95.88 378.9L95.87 378.91Z" fill="#6C63FF"/>
<path id="Vector_57" d="M68.96 551.04C77.21 557.14 112.2 559.9 112.2 559.9C112.2 559.9 99.32 527.25 91.06 521.15C87.0937 518.265 82.148 517.064 77.3002 517.809C72.4525 518.554 68.0957 521.185 65.1789 525.128C62.2621 529.071 61.0218 534.007 61.7282 538.861C62.4345 543.714 65.0303 548.092 68.95 551.04H68.96Z" fill="#6C63FF"/>
<path id="Vector_58" d="M76.41 464.88C85.58 469.5 120.52 466.31 120.52 466.31C120.52 466.31 102.31 436.31 93.14 431.69C88.7523 429.586 83.7144 429.285 79.108 430.854C74.5015 432.423 70.6938 435.735 68.5024 440.08C66.311 444.425 65.9106 449.456 67.3872 454.093C68.8638 458.729 72.0996 462.602 76.4 464.88H76.41Z" fill="#6C63FF"/>
<path id="Vector_59" d="M141.5 296.56C141.5 306.83 122.91 336.56 122.91 336.56C122.91 336.56 104.32 306.79 104.32 296.56C104.263 294.083 104.701 291.62 105.609 289.315C106.517 287.009 107.877 284.909 109.608 283.137C111.34 281.365 113.408 279.957 115.691 278.995C117.975 278.034 120.427 277.539 122.905 277.539C125.383 277.539 127.835 278.034 130.119 278.995C132.402 279.957 134.47 281.365 136.202 283.137C137.933 284.909 139.293 287.009 140.201 289.315C141.109 291.62 141.547 294.083 141.49 296.56H141.5Z" fill="#6C63FF"/>
<path id="Vector_60" opacity="0.25" d="M141.5 296.56C141.5 306.83 122.91 336.56 122.91 336.56C122.91 336.56 104.32 306.79 104.32 296.56C104.263 294.083 104.701 291.62 105.609 289.315C106.517 287.009 107.877 284.909 109.608 283.137C111.34 281.365 113.408 279.957 115.691 278.995C117.975 278.034 120.427 277.539 122.905 277.539C125.383 277.539 127.835 278.034 130.119 278.995C132.402 279.957 134.47 281.365 136.202 283.137C137.933 284.909 139.293 287.009 140.201 289.315C141.109 291.62 141.547 294.083 141.49 296.56H141.5Z" fill="black"/>
<path id="Vector_61" d="M49.67 479.55C49.67 479.55 -29.06 527.05 116.07 600.18C116.07 600.18 148.07 540.82 112.69 492.42C105.828 482.986 95.7445 476.396 84.3492 473.899C72.9539 471.401 61.0384 473.17 50.86 478.87L49.67 479.55Z" fill="#6C63FF"/>
<path id="Vector_62" opacity="0.25" d="M172.26 353.42C166.68 362.04 134.9 376.92 134.9 376.92C134.9 376.92 135.48 341.83 141.06 333.21C143.797 329.207 147.99 326.431 152.745 325.476C157.499 324.521 162.439 325.462 166.509 328.097C170.58 330.733 173.46 334.855 174.534 339.584C175.609 344.313 174.792 349.274 172.26 353.41V353.42Z" fill="black"/>
<path id="Vector_63" opacity="0.25" d="M170.91 450.59C161.74 455.21 126.8 452.02 126.8 452.02C126.8 452.02 145.01 422.02 154.18 417.4C158.568 415.296 163.606 414.995 168.212 416.564C172.818 418.133 176.626 421.445 178.818 425.79C181.009 430.135 181.409 435.166 179.933 439.803C178.456 444.44 175.22 448.312 170.92 450.59H170.91Z" fill="black"/>
<path id="Vector_64" opacity="0.25" d="M95.87 378.91C103.23 386.06 137.54 393.47 137.54 393.47C137.54 393.47 129.14 359.4 121.78 352.24C120.044 350.471 117.972 349.067 115.685 348.111C113.398 347.154 110.943 346.665 108.465 346.671C105.986 346.677 103.534 347.179 101.252 348.147C98.9704 349.115 96.9052 350.529 95.1781 352.307C93.451 354.085 92.0968 356.19 91.1953 358.499C90.2937 360.808 89.863 363.274 89.9284 365.751C89.9938 368.229 90.554 370.669 91.5761 372.927C92.5982 375.185 94.0615 377.216 95.88 378.9L95.87 378.91Z" fill="black"/>
<path id="Vector_65" opacity="0.25" d="M153.34 523.88C145.09 529.98 110.1 532.74 110.1 532.74C110.1 532.74 122.98 500.1 131.23 493.99C133.191 492.515 135.425 491.443 137.802 490.835C140.179 490.228 142.653 490.097 145.082 490.451C147.51 490.804 149.844 491.634 151.95 492.894C154.055 494.154 155.891 495.819 157.35 497.791C158.809 499.764 159.863 502.006 160.452 504.388C161.04 506.77 161.151 509.246 160.779 511.671C160.406 514.096 159.557 516.424 158.28 518.519C157.003 520.615 155.324 522.437 153.34 523.88Z" fill="black"/>
<path id="Vector_66" opacity="0.25" d="M76.41 464.88C85.58 469.5 120.52 466.31 120.52 466.31C120.52 466.31 102.31 436.31 93.14 431.69C88.7523 429.586 83.7144 429.285 79.108 430.854C74.5015 432.423 70.6938 435.735 68.5024 440.08C66.311 444.425 65.9106 449.456 67.3872 454.093C68.8638 458.729 72.0996 462.602 76.4 464.88H76.41Z" fill="black"/>
<path id="Vector_67" d="M889.78 581.25C889.78 581.25 865.11 497.49 894.41 435.84C906.71 409.97 910.79 380.92 905.11 352.84C902.394 339.508 898.461 326.453 893.36 313.84" stroke="#535461" stroke-width="2" stroke-miterlimit="10"/>
<path id="Vector_68" d="M942.31 331.79C936.73 340.41 904.95 355.29 904.95 355.29C904.95 355.29 905.53 320.2 911.11 311.58C912.405 309.464 914.111 307.63 916.127 306.184C918.142 304.738 920.427 303.709 922.845 303.16C925.264 302.61 927.769 302.55 930.211 302.984C932.654 303.417 934.985 304.335 937.067 305.683C939.149 307.031 940.941 308.782 942.336 310.834C943.731 312.885 944.701 315.194 945.19 317.626C945.678 320.058 945.675 322.563 945.181 324.994C944.686 327.425 943.71 329.732 942.31 331.78V331.79Z" fill="#6C63FF"/>
<path id="Vector_69" d="M911.59 274.93C911.59 285.2 893 314.93 893 314.93C893 314.93 874.41 285.16 874.41 274.93C874.353 272.453 874.791 269.99 875.699 267.685C876.607 265.379 877.967 263.279 879.698 261.507C881.43 259.735 883.498 258.327 885.781 257.365C888.065 256.404 890.517 255.909 892.995 255.909C895.473 255.909 897.925 256.404 900.209 257.365C902.492 258.327 904.56 259.735 906.292 261.507C908.023 263.279 909.383 265.379 910.291 267.685C911.199 269.99 911.637 272.453 911.58 274.93H911.59Z" fill="#6C63FF"/>
<path id="Vector_70" d="M940.97 428.96C931.8 433.58 896.86 430.39 896.86 430.39C896.86 430.39 915.07 400.39 924.24 395.77C928.628 393.666 933.666 393.366 938.272 394.934C942.878 396.503 946.686 399.815 948.878 404.16C951.069 408.505 951.469 413.536 949.993 418.173C948.516 422.81 945.28 426.682 940.98 428.96H940.97Z" fill="#6C63FF"/>
<path id="Vector_71" d="M923.4 502.25C915.15 508.35 880.16 511.11 880.16 511.11C880.16 511.11 893.04 478.47 901.29 472.36C905.256 469.475 910.202 468.274 915.05 469.019C919.898 469.764 924.254 472.395 927.171 476.338C930.088 480.281 931.328 485.217 930.622 490.071C929.915 494.924 927.32 499.302 923.4 502.25Z" fill="#6C63FF"/>
<path id="Vector_72" opacity="0.25" d="M68.96 551.04C77.21 557.14 112.2 559.9 112.2 559.9C112.2 559.9 99.32 527.25 91.06 521.15C87.0937 518.265 82.148 517.064 77.3002 517.809C72.4525 518.554 68.0957 521.185 65.1789 525.128C62.2621 529.071 61.0218 534.007 61.7282 538.861C62.4345 543.714 65.0303 548.092 68.95 551.04H68.96Z" fill="black"/>
<path id="Vector_73" d="M846.5 443.25C855.67 447.87 890.61 444.68 890.61 444.68C890.61 444.68 872.4 414.68 863.23 410.06C858.846 407.988 853.826 407.71 849.241 409.286C844.655 410.863 840.867 414.169 838.684 418.499C836.502 422.829 836.097 427.84 837.557 432.464C839.018 437.088 842.227 440.959 846.5 443.25Z" fill="#6C63FF"/>
<path id="Vector_74" d="M778.5 573.1C778.5 573.1 765.24 528.1 780.99 494.96C787.682 481.107 789.7 465.457 786.74 450.36C785.28 443.205 783.168 436.199 780.43 429.43" stroke="#535461" stroke-width="2" stroke-miterlimit="10"/>
<path id="Vector_75" d="M839.01 529.41C847.26 535.51 882.25 538.27 882.25 538.27C882.25 538.27 869.37 505.63 861.12 499.52C857.154 496.635 852.208 495.434 847.36 496.179C842.513 496.924 838.156 499.555 835.239 503.498C832.322 507.441 831.082 512.377 831.788 517.231C832.495 522.084 835.09 526.462 839.01 529.41Z" fill="#6C63FF"/>
<path id="Vector_76" d="M806.73 439.04C803.73 443.67 786.65 451.67 786.65 451.67C786.65 451.67 786.96 432.81 789.96 428.18C790.642 427.013 791.554 425.997 792.64 425.193C793.726 424.388 794.964 423.812 796.279 423.499C797.594 423.187 798.958 423.144 800.29 423.373C801.622 423.603 802.893 424.1 804.028 424.835C805.162 425.569 806.136 426.526 806.89 427.648C807.644 428.769 808.164 430.032 808.416 431.36C808.669 432.687 808.649 434.052 808.36 435.372C808.07 436.692 807.515 437.94 806.73 439.04Z" fill="#6C63FF"/>
<path id="Vector_77" d="M865.92 357.25C873.28 364.4 907.59 371.81 907.59 371.81C907.59 371.81 899.19 337.74 891.83 330.58C888.293 327.144 883.537 325.254 878.606 325.325C873.676 325.396 868.976 327.423 865.54 330.96C862.104 334.497 860.214 339.253 860.285 344.184C860.356 349.114 862.383 353.814 865.92 357.25Z" fill="#6C63FF"/>
<path id="Vector_78" d="M790.22 408.48C790.22 414 780.22 429.99 780.22 429.99C780.22 429.99 770.22 413.99 770.22 408.48C770.22 405.828 771.274 403.284 773.149 401.409C775.024 399.534 777.568 398.48 780.22 398.48C782.872 398.48 785.416 399.534 787.291 401.409C789.166 403.284 790.22 405.828 790.22 408.48Z" fill="#6C63FF"/>
<path id="Vector_79" d="M806.01 491.25C801.08 493.73 782.3 492.02 782.3 492.02C782.3 492.02 792.09 475.9 797.01 473.42C799.359 472.359 802.028 472.245 804.459 473.104C806.889 473.963 808.895 475.727 810.056 478.029C811.217 480.331 811.444 482.992 810.69 485.457C809.937 487.922 808.26 490.001 806.01 491.26V491.25Z" fill="#6C63FF"/>
<path id="Vector_80" d="M751.22 545.25C755.66 548.53 774.46 550.01 774.46 550.01C774.46 550.01 767.5 532.46 763.1 529.18C760.963 527.727 758.347 527.157 755.8 527.591C753.252 528.024 750.972 529.427 749.436 531.505C747.899 533.582 747.227 536.174 747.56 538.737C747.893 541.299 749.204 543.633 751.22 545.25Z" fill="#6C63FF"/>
<path id="Vector_81" d="M765.68 452.74C769.68 456.58 788.07 460.57 788.07 460.57C788.07 460.57 783.56 442.26 779.6 438.42C778.675 437.433 777.559 436.644 776.321 436.1C775.082 435.556 773.745 435.27 772.393 435.258C771.04 435.245 769.699 435.508 768.45 436.029C767.202 436.55 766.072 437.319 765.13 438.29C764.187 439.26 763.451 440.411 762.966 441.674C762.482 442.937 762.258 444.286 762.31 445.638C762.361 446.989 762.687 448.317 763.266 449.539C763.845 450.762 764.666 451.854 765.68 452.75V452.74Z" fill="#6C63FF"/>
<path id="Vector_82" d="M796.56 530.64C792.12 533.92 773.32 535.4 773.32 535.4C773.32 535.4 780.24 517.86 784.68 514.58C786.816 513.155 789.419 512.606 791.949 513.047C794.479 513.489 796.742 514.887 798.269 516.952C799.797 519.016 800.471 521.589 800.153 524.138C799.835 526.686 798.548 529.014 796.56 530.64Z" fill="#6C63FF"/>
<path id="Vector_83" d="M755.22 498.94C760.15 501.42 778.93 499.71 778.93 499.71C778.93 499.71 769.14 483.59 764.22 481.11C761.871 480.049 759.202 479.935 756.771 480.794C754.341 481.653 752.336 483.417 751.174 485.719C750.013 488.021 749.786 490.682 750.54 493.147C751.293 495.612 752.97 497.691 755.22 498.95V498.94Z" fill="#6C63FF"/>
</g>
<g id="back-bg">
<path id="Vector_2" opacity="0.3" d="M910 249V185H872V249H827V150H794V76H767V0H711V76H684V150H652V61H634V16H623V61H559V345H510V315H480V345H431V249H343V185H305V249H303V372H263V300H215V372H175V150H144V76H30V150H0V541H175H303H431H559H652H827H955V249H910Z" fill="#6C63FF"/>
<path id="Vector_3" opacity="0.4" d="M113 479H155V455H113V479Z" fill="white"/>
<path id="Vector_4" opacity="0.4" d="M61 455H19V479H61V455Z" fill="white"/>
<path id="Vector_5" opacity="0.4" d="M113 432H155V408H113V432Z" fill="white"/>
<path id="Vector_6" opacity="0.4" d="M113 385H155V361H113V385Z" fill="white"/>
<path id="Vector_7" opacity="0.4" d="M61 361H19V385H61V361Z" fill="white"/>
<path id="Vector_8" opacity="0.4" d="M61 314H19V338H61V314Z" fill="white"/>
<path id="Vector_9" opacity="0.4" d="M61 267H19V291H61V267Z" fill="white"/>
<path id="Vector_10" opacity="0.4" d="M113 291H155V267H113V291Z" fill="white"/>
<path id="Vector_11" opacity="0.4" d="M113 244H155V220H113V244Z" fill="white"/>
<path id="Vector_12" opacity="0.4" d="M61 220H19V244H61V220Z" fill="white"/>
<path id="Vector_13" opacity="0.4" d="M113 197H155V173H113V197Z" fill="white"/>
<path id="Vector_14" opacity="0.4" d="M61 173H19V197H61V173Z" fill="white"/>
<path id="Vector_15" opacity="0.4" d="M61 408H19V432H61V408Z" fill="white"/>
<path id="Vector_16" opacity="0.4" d="M113 338H155V314H113V338Z" fill="white"/>
<path id="Vector_17" opacity="0.4" d="M288 486H190V498H288V486Z" fill="white"/>
<path id="Vector_18" opacity="0.4" d="M288 468H190V480H288V468Z" fill="white"/>
<path id="Vector_19" opacity="0.4" d="M288 450H190V462H288V450Z" fill="white"/>
<path id="Vector_20" opacity="0.4" d="M544 438H446V450H544V438Z" fill="white"/>
<path id="Vector_21" opacity="0.4" d="M544 420H446V432H544V420Z" fill="white"/>
<path id="Vector_22" opacity="0.4" d="M544 402H446V414H544V402Z" fill="white"/>
<path id="Vector_23" opacity="0.4" d="M288 432H190V444H288V432Z" fill="white"/>
<path id="Vector_24" opacity="0.4" d="M288 414H190V426H288V414Z" fill="white"/>
<path id="Vector_25" opacity="0.4" d="M288 396H190V408H288V396Z" fill="white"/>
<path id="Vector_26" opacity="0.4" d="M351 272H324V307H351V272Z" fill="white"/>
<path id="Vector_27" opacity="0.4" d="M595 150H559V196H595V150Z" fill="white"/>
<path id="Vector_28" opacity="0.4" d="M383 475H410V440H383V475Z" fill="white"/>
<path id="Vector_29" opacity="0.4" d="M351 440H324V475H351V440Z" fill="white"/>
<path id="Vector_30" opacity="0.4" d="M383 419H410V384H383V419Z" fill="white"/>
<path id="Vector_31" opacity="0.4" d="M351 384H324V419H351V384Z" fill="white"/>
<path id="Vector_32" opacity="0.4" d="M383 363H410V328H383V363Z" fill="white"/>
<path id="Vector_33" opacity="0.4" d="M351 328H324V363H351V328Z" fill="white"/>
<path id="Vector_34" opacity="0.4" d="M383 307H410V272H383V307Z" fill="white"/>
<path id="Vector_35" opacity="0.4" d="M595 84H559V130H595V84Z" fill="white"/>
<path id="Vector_36" opacity="0.4" d="M595 414H559V460H595V414Z" fill="white"/>
<path id="Vector_37" opacity="0.4" d="M595 348H559V394H595V348Z" fill="white"/>
<path id="Vector_38" opacity="0.4" d="M595 282H559V328H595V282Z" fill="white"/>
<path id="Vector_39" opacity="0.4" d="M595 216H559V262H595V216Z" fill="white"/>
<path id="Vector_40" opacity="0.4" d="M806.5 178H672.5V217H806.5V178Z" fill="white"/>
<path id="Vector_41" opacity="0.4" d="M807 262H673V301H807V262Z" fill="white"/>
<path id="Vector_42" opacity="0.4" d="M807.5 346H673.5V385H807.5V346Z" fill="white"/>
<path id="Vector_43" opacity="0.4" d="M808 430H674V469H808V430Z" fill="white"/>
<path id="Vector_44" opacity="0.4" d="M48 97H30V135H48V97Z" fill="white"/>
<path id="Vector_45" opacity="0.4" d="M955 272H910V330H955V272Z" fill="white"/>
<path id="Vector_46" opacity="0.4" d="M955 356H910V414H955V356Z" fill="white"/>
<path id="Vector_47" opacity="0.4" d="M955 440H910V498H955V440Z" fill="white"/>
<path id="Vector_48" opacity="0.1" d="M264.68 47.68H257.8C258.451 47.7096 259.101 47.6071 259.711 47.3785C260.321 47.1499 260.878 46.8 261.349 46.35C261.82 45.8999 262.195 45.3591 262.451 44.7601C262.707 44.1611 262.839 43.5164 262.839 42.865C262.839 42.2135 262.707 41.5688 262.451 40.9699C262.195 40.3709 261.82 39.83 261.349 39.38C260.878 38.9299 260.321 38.5801 259.711 38.3515C259.101 38.1229 258.451 38.0203 257.8 38.05H202.07C200.831 38.1065 199.661 38.6384 198.805 39.5352C197.948 40.432 197.469 41.6246 197.469 42.865C197.469 44.1053 197.948 45.2979 198.805 46.1947C199.661 47.0915 200.831 47.6235 202.07 47.68H208.95C208.299 47.6503 207.649 47.7529 207.039 47.9815C206.429 48.2101 205.872 48.56 205.401 49.01C204.93 49.46 204.555 50.0009 204.299 50.5998C204.043 51.1988 203.911 51.8435 203.911 52.495C203.911 53.1464 204.043 53.7911 204.299 54.3901C204.555 54.9891 204.93 55.5299 205.401 55.98C205.872 56.43 206.429 56.7799 207.039 57.0085C207.649 57.2371 208.299 57.3396 208.95 57.31H199.32C198.669 57.2803 198.019 57.3829 197.409 57.6115C196.799 57.8401 196.242 58.19 195.771 58.64C195.3 59.09 194.925 59.6309 194.669 60.2299C194.413 60.8288 194.281 61.4735 194.281 62.125C194.281 62.7764 194.413 63.4211 194.669 64.0201C194.925 64.6191 195.3 65.1599 195.771 65.61C196.242 66.06 196.799 66.4099 197.409 66.6385C198.019 66.8671 198.669 66.9696 199.32 66.94H255.05C255.701 66.9696 256.351 66.8671 256.961 66.6385C257.571 66.4099 258.128 66.06 258.599 65.61C259.07 65.1599 259.445 64.6191 259.701 64.0201C259.957 63.4211 260.089 62.7764 260.089 62.125C260.089 61.4735 259.957 60.8288 259.701 60.2299C259.445 59.6309 259.07 59.09 258.599 58.64C258.128 58.19 257.571 57.8401 256.961 57.6115C256.351 57.3829 255.701 57.2803 255.05 57.31H264.68C265.331 57.3396 265.981 57.2371 266.591 57.0085C267.201 56.7799 267.758 56.43 268.229 55.98C268.7 55.5299 269.075 54.9891 269.331 54.3901C269.587 53.7911 269.719 53.1464 269.719 52.495C269.719 51.8435 269.587 51.1988 269.331 50.5998C269.075 50.0009 268.7 49.46 268.229 49.01C267.758 48.56 267.201 48.2101 266.591 47.9815C265.981 47.7529 265.331 47.6503 264.68 47.68Z" fill="#252223"/>
<path id="Vector_49" opacity="0.1" d="M929.68 10.68H922.8C923.451 10.7097 924.101 10.6071 924.711 10.3785C925.321 10.1499 925.878 9.80004 926.349 9.35C926.82 8.89997 927.195 8.35912 927.451 7.76014C927.707 7.16115 927.839 6.51646 927.839 5.86501C927.839 5.21356 927.707 4.56887 927.451 3.96988C927.195 3.3709 926.82 2.83005 926.349 2.38002C925.878 1.92998 925.321 1.5801 924.711 1.3515C924.101 1.12291 923.451 1.02035 922.8 1.05001H867.07C865.831 1.1065 864.661 1.63846 863.805 2.53526C862.948 3.43206 862.469 4.62466 862.469 5.86501C862.469 7.10535 862.948 8.29796 863.805 9.19476C864.661 10.0916 865.831 10.6235 867.07 10.68H873.95C873.299 10.6503 872.649 10.7529 872.039 10.9815C871.429 11.2101 870.872 11.56 870.401 12.01C869.93 12.4601 869.555 13.0009 869.299 13.5999C869.043 14.1989 868.911 14.8436 868.911 15.495C868.911 16.1465 869.043 16.7912 869.299 17.3901C869.555 17.9891 869.93 18.53 870.401 18.98C870.872 19.43 871.429 19.7799 872.039 20.0085C872.649 20.2371 873.299 20.3397 873.95 20.31H864.32C863.669 20.2803 863.019 20.3829 862.409 20.6115C861.799 20.8401 861.242 21.19 860.771 21.64C860.3 22.0901 859.925 22.6309 859.669 23.2299C859.413 23.8289 859.281 24.4736 859.281 25.125C859.281 25.7765 859.413 26.4212 859.669 27.0201C859.925 27.6191 860.3 28.16 860.771 28.61C861.242 29.06 861.799 29.4099 862.409 29.6385C863.019 29.8671 863.669 29.9697 864.32 29.94H920.05C921.289 29.8835 922.459 29.3516 923.316 28.4548C924.172 27.558 924.651 26.3654 924.651 25.125C924.651 23.8847 924.172 22.6921 923.316 21.7953C922.459 20.8985 921.289 20.3665 920.05 20.31H929.68C930.331 20.3397 930.981 20.2371 931.591 20.0085C932.201 19.7799 932.758 19.43 933.229 18.98C933.7 18.53 934.075 17.9891 934.331 17.3901C934.587 16.7912 934.719 16.1465 934.719 15.495C934.719 14.8436 934.587 14.1989 934.331 13.5999C934.075 13.0009 933.7 12.4601 933.229 12.01C932.758 11.56 932.201 11.2101 931.591 10.9815C930.981 10.7529 930.331 10.6503 929.68 10.68Z" fill="#252223"/>
<path id="Vector_50" opacity="0.1" d="M510.68 168.68H503.8C504.451 168.71 505.101 168.607 505.711 168.379C506.321 168.15 506.878 167.8 507.349 167.35C507.82 166.9 508.195 166.359 508.451 165.76C508.707 165.161 508.839 164.516 508.839 163.865C508.839 163.214 508.707 162.569 508.451 161.97C508.195 161.371 507.82 160.83 507.349 160.38C506.878 159.93 506.321 159.58 505.711 159.351C505.101 159.123 504.451 159.02 503.8 159.05H448.07C446.831 159.106 445.661 159.638 444.805 160.535C443.948 161.432 443.469 162.625 443.469 163.865C443.469 165.105 443.948 166.298 444.805 167.195C445.661 168.092 446.831 168.624 448.07 168.68H454.95C454.299 168.65 453.649 168.753 453.039 168.982C452.429 169.21 451.872 169.56 451.401 170.01C450.93 170.46 450.555 171.001 450.299 171.6C450.043 172.199 449.911 172.844 449.911 173.495C449.911 174.146 450.043 174.791 450.299 175.39C450.555 175.989 450.93 176.53 451.401 176.98C451.872 177.43 452.429 177.78 453.039 178.009C453.649 178.237 454.299 178.34 454.95 178.31H445.32C444.669 178.28 444.019 178.383 443.409 178.611C442.799 178.84 442.242 179.19 441.771 179.64C441.3 180.09 440.925 180.631 440.669 181.23C440.413 181.829 440.281 182.474 440.281 183.125C440.281 183.776 440.413 184.421 440.669 185.02C440.925 185.619 441.3 186.16 441.771 186.61C442.242 187.06 442.799 187.41 443.409 187.639C444.019 187.867 444.669 187.97 445.32 187.94H501.05C501.701 187.97 502.351 187.867 502.961 187.639C503.571 187.41 504.128 187.06 504.599 186.61C505.07 186.16 505.445 185.619 505.701 185.02C505.957 184.421 506.089 183.776 506.089 183.125C506.089 182.474 505.957 181.829 505.701 181.23C505.445 180.631 505.07 180.09 504.599 179.64C504.128 179.19 503.571 178.84 502.961 178.611C502.351 178.383 501.701 178.28 501.05 178.31H510.68C511.331 178.34 511.981 178.237 512.591 178.009C513.201 177.78 513.758 177.43 514.229 176.98C514.7 176.53 515.075 175.989 515.331 175.39C515.587 174.791 515.719 174.146 515.719 173.495C515.719 172.844 515.587 172.199 515.331 171.6C515.075 171.001 514.7 170.46 514.229 170.01C513.758 169.56 513.201 169.21 512.591 168.982C511.981 168.753 511.331 168.65 510.68 168.68Z" fill="#252223"/>
<path id="Vector_51" d="M50.58 478.55C50.58 478.55 117.95 530.1 116.07 600.18" stroke="#535461" stroke-miterlimit="10"/>
<path id="Vector_52" d="M119.73 602.88C119.73 602.88 95.06 519.12 124.36 457.47C136.66 431.6 140.74 402.55 135.06 374.47C132.344 361.138 128.411 348.083 123.31 335.47" stroke="#535461" stroke-width="2" stroke-miterlimit="10"/>
<path id="Vector_53" d="M172.26 353.42C166.68 362.04 134.9 376.92 134.9 376.92C134.9 376.92 135.48 341.83 141.06 333.21C143.797 329.207 147.99 326.431 152.745 325.476C157.499 324.521 162.439 325.462 166.509 328.097C170.58 330.733 173.46 334.855 174.534 339.584C175.609 344.313 174.792 349.274 172.26 353.41V353.42Z" fill="#6C63FF"/>
<path id="Vector_54" d="M170.91 450.59C161.74 455.21 126.8 452.02 126.8 452.02C126.8 452.02 145.01 422.02 154.18 417.4C158.568 415.296 163.606 414.995 168.212 416.564C172.818 418.133 176.626 421.445 178.818 425.79C181.009 430.135 181.409 435.166 179.933 439.803C178.456 444.44 175.22 448.312 170.92 450.59H170.91Z" fill="#6C63FF"/>
<path id="Vector_55" d="M153.34 523.88C145.09 529.98 110.1 532.74 110.1 532.74C110.1 532.74 122.98 500.1 131.23 493.99C133.191 492.515 135.425 491.443 137.802 490.835C140.179 490.228 142.653 490.097 145.082 490.451C147.51 490.804 149.844 491.634 151.95 492.894C154.055 494.154 155.891 495.819 157.35 497.791C158.809 499.764 159.863 502.006 160.452 504.388C161.04 506.77 161.151 509.246 160.779 511.671C160.406 514.096 159.557 516.424 158.28 518.519C157.003 520.615 155.324 522.437 153.34 523.88Z" fill="#6C63FF"/>
<path id="Vector_56" d="M95.87 378.91C103.23 386.06 137.54 393.47 137.54 393.47C137.54 393.47 129.14 359.4 121.78 352.24C120.044 350.471 117.972 349.067 115.685 348.111C113.398 347.154 110.943 346.665 108.465 346.671C105.986 346.677 103.534 347.179 101.252 348.147C98.9704 349.115 96.9052 350.529 95.1781 352.307C93.451 354.085 92.0968 356.19 91.1953 358.499C90.2937 360.808 89.863 363.274 89.9284 365.751C89.9938 368.229 90.554 370.669 91.5761 372.927C92.5982 375.185 94.0615 377.216 95.88 378.9L95.87 378.91Z" fill="#6C63FF"/>
<path id="Vector_57" d="M68.96 551.04C77.21 557.14 112.2 559.9 112.2 559.9C112.2 559.9 99.32 527.25 91.06 521.15C87.0937 518.265 82.148 517.064 77.3002 517.809C72.4525 518.554 68.0957 521.185 65.1789 525.128C62.2621 529.071 61.0218 534.007 61.7282 538.861C62.4345 543.714 65.0303 548.092 68.95 551.04H68.96Z" fill="#6C63FF"/>
<path id="Vector_58" d="M76.41 464.88C85.58 469.5 120.52 466.31 120.52 466.31C120.52 466.31 102.31 436.31 93.14 431.69C88.7523 429.586 83.7144 429.285 79.108 430.854C74.5015 432.423 70.6938 435.735 68.5024 440.08C66.311 444.425 65.9106 449.456 67.3872 454.093C68.8638 458.729 72.0996 462.602 76.4 464.88H76.41Z" fill="#6C63FF"/>
<path id="Vector_59" d="M141.5 296.56C141.5 306.83 122.91 336.56 122.91 336.56C122.91 336.56 104.32 306.79 104.32 296.56C104.263 294.083 104.701 291.62 105.609 289.315C106.517 287.009 107.877 284.909 109.608 283.137C111.34 281.365 113.408 279.957 115.691 278.995C117.975 278.034 120.427 277.539 122.905 277.539C125.383 277.539 127.835 278.034 130.119 278.995C132.402 279.957 134.47 281.365 136.202 283.137C137.933 284.909 139.293 287.009 140.201 289.315C141.109 291.62 141.547 294.083 141.49 296.56H141.5Z" fill="#6C63FF"/>
<path id="Vector_60" opacity="0.25" d="M141.5 296.56C141.5 306.83 122.91 336.56 122.91 336.56C122.91 336.56 104.32 306.79 104.32 296.56C104.263 294.083 104.701 291.62 105.609 289.315C106.517 287.009 107.877 284.909 109.608 283.137C111.34 281.365 113.408 279.957 115.691 278.995C117.975 278.034 120.427 277.539 122.905 277.539C125.383 277.539 127.835 278.034 130.119 278.995C132.402 279.957 134.47 281.365 136.202 283.137C137.933 284.909 139.293 287.009 140.201 289.315C141.109 291.62 141.547 294.083 141.49 296.56H141.5Z" fill="black"/>
<path id="Vector_61" d="M49.67 479.55C49.67 479.55 -29.06 527.05 116.07 600.18C116.07 600.18 148.07 540.82 112.69 492.42C105.828 482.986 95.7445 476.396 84.3492 473.899C72.9539 471.401 61.0384 473.17 50.86 478.87L49.67 479.55Z" fill="#6C63FF"/>
<path id="Vector_62" opacity="0.25" d="M172.26 353.42C166.68 362.04 134.9 376.92 134.9 376.92C134.9 376.92 135.48 341.83 141.06 333.21C143.797 329.207 147.99 326.431 152.745 325.476C157.499 324.521 162.439 325.462 166.509 328.097C170.58 330.733 173.46 334.855 174.534 339.584C175.609 344.313 174.792 349.274 172.26 353.41V353.42Z" fill="black"/>
<path id="Vector_63" opacity="0.25" d="M170.91 450.59C161.74 455.21 126.8 452.02 126.8 452.02C126.8 452.02 145.01 422.02 154.18 417.4C158.568 415.296 163.606 414.995 168.212 416.564C172.818 418.133 176.626 421.445 178.818 425.79C181.009 430.135 181.409 435.166 179.933 439.803C178.456 444.44 175.22 448.312 170.92 450.59H170.91Z" fill="black"/>
<path id="Vector_64" opacity="0.25" d="M95.87 378.91C103.23 386.06 137.54 393.47 137.54 393.47C137.54 393.47 129.14 359.4 121.78 352.24C120.044 350.471 117.972 349.067 115.685 348.111C113.398 347.154 110.943 346.665 108.465 346.671C105.986 346.677 103.534 347.179 101.252 348.147C98.9704 349.115 96.9052 350.529 95.1781 352.307C93.451 354.085 92.0968 356.19 91.1953 358.499C90.2937 360.808 89.863 363.274 89.9284 365.751C89.9938 368.229 90.554 370.669 91.5761 372.927C92.5982 375.185 94.0615 377.216 95.88 378.9L95.87 378.91Z" fill="black"/>
<path id="Vector_65" opacity="0.25" d="M153.34 523.88C145.09 529.98 110.1 532.74 110.1 532.74C110.1 532.74 122.98 500.1 131.23 493.99C133.191 492.515 135.425 491.443 137.802 490.835C140.179 490.228 142.653 490.097 145.082 490.451C147.51 490.804 149.844 491.634 151.95 492.894C154.055 494.154 155.891 495.819 157.35 497.791C158.809 499.764 159.863 502.006 160.452 504.388C161.04 506.77 161.151 509.246 160.779 511.671C160.406 514.096 159.557 516.424 158.28 518.519C157.003 520.615 155.324 522.437 153.34 523.88Z" fill="black"/>
<path id="Vector_66" opacity="0.25" d="M76.41 464.88C85.58 469.5 120.52 466.31 120.52 466.31C120.52 466.31 102.31 436.31 93.14 431.69C88.7523 429.586 83.7144 429.285 79.108 430.854C74.5015 432.423 70.6938 435.735 68.5024 440.08C66.311 444.425 65.9106 449.456 67.3872 454.093C68.8638 458.729 72.0996 462.602 76.4 464.88H76.41Z" fill="black"/>
<path id="Vector_67" d="M889.78 581.25C889.78 581.25 865.11 497.49 894.41 435.84C906.71 409.97 910.79 380.92 905.11 352.84C902.394 339.508 898.461 326.453 893.36 313.84" stroke="#535461" stroke-width="2" stroke-miterlimit="10"/>
<path id="Vector_68" d="M942.31 331.79C936.73 340.41 904.95 355.29 904.95 355.29C904.95 355.29 905.53 320.2 911.11 311.58C912.405 309.464 914.111 307.63 916.127 306.184C918.142 304.738 920.427 303.709 922.845 303.16C925.264 302.61 927.769 302.55 930.211 302.984C932.654 303.417 934.985 304.335 937.067 305.683C939.149 307.031 940.941 308.782 942.336 310.834C943.731 312.885 944.701 315.194 945.19 317.626C945.678 320.058 945.675 322.563 945.181 324.994C944.686 327.425 943.71 329.732 942.31 331.78V331.79Z" fill="#6C63FF"/>
<path id="Vector_69" d="M911.59 274.93C911.59 285.2 893 314.93 893 314.93C893 314.93 874.41 285.16 874.41 274.93C874.353 272.453 874.791 269.99 875.699 267.685C876.607 265.379 877.967 263.279 879.698 261.507C881.43 259.735 883.498 258.327 885.781 257.365C888.065 256.404 890.517 255.909 892.995 255.909C895.473 255.909 897.925 256.404 900.209 257.365C902.492 258.327 904.56 259.735 906.292 261.507C908.023 263.279 909.383 265.379 910.291 267.685C911.199 269.99 911.637 272.453 911.58 274.93H911.59Z" fill="#6C63FF"/>
<path id="Vector_70" d="M940.97 428.96C931.8 433.58 896.86 430.39 896.86 430.39C896.86 430.39 915.07 400.39 924.24 395.77C928.628 393.666 933.666 393.366 938.272 394.934C942.878 396.503 946.686 399.815 948.878 404.16C951.069 408.505 951.469 413.536 949.993 418.173C948.516 422.81 945.28 426.682 940.98 428.96H940.97Z" fill="#6C63FF"/>
<path id="Vector_71" d="M923.4 502.25C915.15 508.35 880.16 511.11 880.16 511.11C880.16 511.11 893.04 478.47 901.29 472.36C905.256 469.475 910.202 468.274 915.05 469.019C919.898 469.764 924.254 472.395 927.171 476.338C930.088 480.281 931.328 485.217 930.622 490.071C929.915 494.924 927.32 499.302 923.4 502.25Z" fill="#6C63FF"/>
<path id="Vector_72" opacity="0.25" d="M68.96 551.04C77.21 557.14 112.2 559.9 112.2 559.9C112.2 559.9 99.32 527.25 91.06 521.15C87.0937 518.265 82.148 517.064 77.3002 517.809C72.4525 518.554 68.0957 521.185 65.1789 525.128C62.2621 529.071 61.0218 534.007 61.7282 538.861C62.4345 543.714 65.0303 548.092 68.95 551.04H68.96Z" fill="black"/>
<path id="Vector_73" d="M846.5 443.25C855.67 447.87 890.61 444.68 890.61 444.68C890.61 444.68 872.4 414.68 863.23 410.06C858.846 407.988 853.826 407.71 849.241 409.286C844.655 410.863 840.867 414.169 838.684 418.499C836.502 422.829 836.097 427.84 837.557 432.464C839.018 437.088 842.227 440.959 846.5 443.25Z" fill="#6C63FF"/>
<path id="Vector_74" d="M778.5 573.1C778.5 573.1 765.24 528.1 780.99 494.96C787.682 481.107 789.7 465.457 786.74 450.36C785.28 443.205 783.168 436.199 780.43 429.43" stroke="#535461" stroke-width="2" stroke-miterlimit="10"/>
<path id="Vector_75" d="M839.01 529.41C847.26 535.51 882.25 538.27 882.25 538.27C882.25 538.27 869.37 505.63 861.12 499.52C857.154 496.635 852.208 495.434 847.36 496.179C842.513 496.924 838.156 499.555 835.239 503.498C832.322 507.441 831.082 512.377 831.788 517.231C832.495 522.084 835.09 526.462 839.01 529.41Z" fill="#6C63FF"/>
<path id="Vector_76" d="M806.73 439.04C803.73 443.67 786.65 451.67 786.65 451.67C786.65 451.67 786.96 432.81 789.96 428.18C790.642 427.013 791.554 425.997 792.64 425.193C793.726 424.388 794.964 423.812 796.279 423.499C797.594 423.187 798.958 423.144 800.29 423.373C801.622 423.603 802.893 424.1 804.028 424.835C805.162 425.569 806.136 426.526 806.89 427.648C807.644 428.769 808.164 430.032 808.416 431.36C808.669 432.687 808.649 434.052 808.36 435.372C808.07 436.692 807.515 437.94 806.73 439.04Z" fill="#6C63FF"/>
<path id="Vector_77" d="M865.92 357.25C873.28 364.4 907.59 371.81 907.59 371.81C907.59 371.81 899.19 337.74 891.83 330.58C888.293 327.144 883.537 325.254 878.606 325.325C873.676 325.396 868.976 327.423 865.54 330.96C862.104 334.497 860.214 339.253 860.285 344.184C860.356 349.114 862.383 353.814 865.92 357.25Z" fill="#6C63FF"/>
<path id="Vector_78" d="M790.22 408.48C790.22 414 780.22 429.99 780.22 429.99C780.22 429.99 770.22 413.99 770.22 408.48C770.22 405.828 771.274 403.284 773.149 401.409C775.024 399.534 777.568 398.48 780.22 398.48C782.872 398.48 785.416 399.534 787.291 401.409C789.166 403.284 790.22 405.828 790.22 408.48Z" fill="#6C63FF"/>
<path id="Vector_79" d="M806.01 491.25C801.08 493.73 782.3 492.02 782.3 492.02C782.3 492.02 792.09 475.9 797.01 473.42C799.359 472.359 802.028 472.245 804.459 473.104C806.889 473.963 808.895 475.727 810.056 478.029C811.217 480.331 811.444 482.992 810.69 485.457C809.937 487.922 808.26 490.001 806.01 491.26V491.25Z" fill="#6C63FF"/>
<path id="Vector_80" d="M751.22 545.25C755.66 548.53 774.46 550.01 774.46 550.01C774.46 550.01 767.5 532.46 763.1 529.18C760.963 527.727 758.347 527.157 755.8 527.591C753.252 528.024 750.972 529.427 749.436 531.505C747.899 533.582 747.227 536.174 747.56 538.737C747.893 541.299 749.204 543.633 751.22 545.25Z" fill="#6C63FF"/>
<path id="Vector_81" d="M765.68 452.74C769.68 456.58 788.07 460.57 788.07 460.57C788.07 460.57 783.56 442.26 779.6 438.42C778.675 437.433 777.559 436.644 776.321 436.1C775.082 435.556 773.745 435.27 772.393 435.258C771.04 435.245 769.699 435.508 768.45 436.029C767.202 436.55 766.072 437.319 765.13 438.29C764.187 439.26 763.451 440.411 762.966 441.674C762.482 442.937 762.258 444.286 762.31 445.638C762.361 446.989 762.687 448.317 763.266 449.539C763.845 450.762 764.666 451.854 765.68 452.75V452.74Z" fill="#6C63FF"/>
<path id="Vector_82" d="M796.56 530.64C792.12 533.92 773.32 535.4 773.32 535.4C773.32 535.4 780.24 517.86 784.68 514.58C786.816 513.155 789.419 512.606 791.949 513.047C794.479 513.489 796.742 514.887 798.269 516.952C799.797 519.016 800.471 521.589 800.153 524.138C799.835 526.686 798.548 529.014 796.56 530.64Z" fill="#6C63FF"/>
<path id="Vector_83" d="M755.22 498.94C760.15 501.42 778.93 499.71 778.93 499.71C778.93 499.71 769.14 483.59 764.22 481.11C761.871 480.049 759.202 479.935 756.771 480.794C754.341 481.653 752.336 483.417 751.174 485.719C750.013 488.021 749.786 490.682 750.54 493.147C751.293 495.612 752.97 497.691 755.22 498.95V498.94Z" fill="#6C63FF"/>
</g>
<path id="Vector_84" d="M397.57 356.19C396.8 356.75 396.38 357.06 396.38 357.06C396.817 356.83 397.218 356.536 397.57 356.19Z" fill="url(#paint0_linear)"/>
<path id="Vector_85" d="M398.5 357.13C397.73 357.69 397.31 358 397.31 358C397.747 357.77 398.148 357.476 398.5 357.13Z" fill="url(#paint1_linear)"/>
<path id="Vector_86" d="M398.5 356.19C397.73 356.75 397.31 357.06 397.31 357.06C397.747 356.83 398.148 356.536 398.5 356.19Z" fill="url(#paint2_linear)"/>
<g id="back-leg">
<path id="Vector_87" opacity="0.03" d="M432.12 400.25L455.38 460L475.5 494.71C475.5 494.71 503.09 556.05 501.27 567.91L545.27 560.84C545.27 560.84 511.06 466.84 501.49 454.12C501.49 454.12 491.49 448.19 491.91 438.12L479.6 378.37C479.6 378.37 491.6 366.81 484.88 352.37C484.54 351.63 484.147 350.883 483.7 350.13C474.5 334.62 439.88 343.25 439.88 343.25L432.12 400.25Z" fill="black"/>
<path id="Vector_88" d="M505.55 561.75C505.55 561.75 489.13 585.01 478.18 584.55C478.18 584.55 447.62 590.48 468.6 595.95C489.58 601.42 551.15 580.9 551.15 580.9L543.83 557.05L505.55 561.75Z" fill="#333333"/>
<path id="Vector_89" d="M432.12 400.25L455.38 460L475.5 494.71C475.5 494.71 503.09 556.05 501.27 567.91L545.27 560.84C545.27 560.84 511.06 466.84 501.49 454.12C501.49 454.12 491.49 448.19 491.91 438.12L479.6 378.37C479.6 378.37 491.6 366.81 484.88 352.37C484.54 351.63 484.147 350.883 483.7 350.13C474.5 334.62 439.88 343.25 439.88 343.25L432.12 400.25Z" fill="#535461"/>
</g>
<g id="Group" opacity="0.1">
<path id="Vector_90" opacity="0.1" d="M501.45 454.12C501.45 454.12 491.45 448.19 491.87 438.12L479.56 378.37C479.56 378.37 491.56 366.81 484.84 352.37C484.5 351.63 484.107 350.883 483.66 350.13C479.24 342.61 468.8 340.77 459.23 340.88C468.41 340.96 478.07 342.97 482.29 350.13C482.737 350.883 483.13 351.63 483.47 352.37C490.16 366.85 478.19 378.37 478.19 378.37L490.5 438.15C490.04 448.15 500.08 454.15 500.08 454.15C509.66 466.92 543.86 560.87 543.86 560.87L501.24 567.72C501.24 567.79 501.24 567.87 501.24 567.94L545.24 560.87C545.24 560.87 511.03 466.89 501.45 454.12Z" fill="black"/>
</g>
<g id="front-leg">
<path id="Vector_91" d="M417.5 339.64C417.5 339.64 387.4 382.06 375.5 424.93C375.5 424.93 365.01 443.17 366.38 461.87L347.22 554.46L382.34 567.69C382.34 567.69 380.52 556.29 387.34 549.9C394.16 543.51 410.14 478.75 408.78 468.72C408.78 468.72 430.67 413.99 452.56 392.55C474.45 371.11 485.35 366.17 488.56 347.66C488.65 347.66 437.14 322.76 417.5 339.64Z" fill="#535461"/>
<path id="Vector_92" d="M351.4 551.72C351.4 551.72 333.16 567.23 315.4 567.72C315.4 567.72 284.4 566.81 293.05 573.65C301.7 580.49 378.79 590.53 378.79 590.53L382.22 563.84L351.4 551.72Z" fill="#333333"/>
</g>
<g id="fronthand">
<path id="vector" d="M395.18 273.51C395.18 273.51 373.41 300.62 358.72 306.51C357.105 307.158 355.54 307.927 354.04 308.81C351.99 310.11 349.708 311.003 347.32 311.44C345.562 311.611 343.844 312.063 342.23 312.78C334.59 316.3 316.97 325.78 328.6 334.18C343.19 344.67 362.81 320.5 362.81 320.5C362.81 320.5 371.14 315.28 376.04 314.11C380.94 312.94 403.39 297.25 403.39 297.25L395.18 273.51Z" fill="#FDA57D"/>
<path id="Vector_93" d="M399.28 268.03L390.62 275.79L403.39 291.75L399.28 268.03Z" fill="#4D8AF0"/>
<path id="Vector_94" d="M343.261 310.1C341.347 306.13 336.577 304.464 332.607 306.378C328.637 308.292 326.97 313.061 328.884 317.031L338.395 336.758C340.309 340.728 345.079 342.395 349.049 340.481C353.019 338.567 354.685 333.797 352.771 329.827L343.261 310.1Z" fill="#CBDAE3"/>
<path id="Vector_95" d="M348.65 339.145C349.332 338.817 349.53 337.816 349.094 336.911C348.657 336.005 347.751 335.538 347.069 335.866C346.388 336.195 346.189 337.195 346.626 338.101C347.062 339.006 347.969 339.474 348.65 339.145Z" fill="#F2F2F2"/>
<path id="Vector_96" d="M339.216 306.227L328.353 311.464L340.83 337.343L351.693 332.106L339.216 306.227Z" fill="#F2F2F2"/>
</g>
<g id="Group_2" opacity="0.1">
<path id="Vector_97" opacity="0.1" d="M399.28 268.03L390.62 275.79L403.39 291.75L399.28 268.03Z" fill="black"/>
</g>
<path id="Vector_98" d="M421.24 177.25C421.24 177.25 400.48 195.04 409.17 200.05L395.17 234.71L400 361.5L419.79 328.66L406.27 257.51C406.27 257.51 402.41 215.09 413.51 205.06L424.13 184.06L421.24 177.25Z" fill="#4D8AF0"/>
<g id="Group_3" opacity="0.1">
<path id="Vector_99" opacity="0.1" d="M424.89 177.25C424.89 177.25 404.13 195.04 412.82 200.05L398.82 234.71L403.65 361.5L423.44 328.66L409.92 257.51C409.92 257.51 406.06 215.09 417.16 205.06L427.78 184.06L424.89 177.25Z" fill="black"/>
</g>
<path id="Vector_100" d="M405.21 158.57C405.21 158.57 422.09 179.09 421.63 190.95C421.17 202.81 453.56 170.43 453.56 170.43C453.56 170.43 441.25 155.38 444.44 139.43C447.63 123.48 405.21 158.57 405.21 158.57Z" fill="#FDA57D"/>
<path id="Vector_101" d="M438.96 175.45C438.96 175.45 426.65 187.31 420.26 183.2L411.5 204.97C406.146 218.278 403.718 232.581 404.38 246.91L407.5 329.15L421.18 327.33L425.74 249.33L432.58 201.9L438.96 175.45Z" fill="#F2F2F2"/>
<g id="Group_4" opacity="0.1">
<path id="Vector_102" opacity="0.1" d="M449.23 162.91C449.23 162.91 433.03 174.08 428.5 183.66C428.5 183.66 428.04 194.15 424.4 198.71C420.76 203.27 417.1 226.08 416.19 253.44C415.28 280.8 411.19 317.29 411.19 317.29C411.19 317.29 404.35 352.86 397.05 356.51C397.05 356.51 430.8 330.97 447.22 339.63C463.64 348.29 482.34 369.28 487.81 366.08C487.81 366.08 486.49 326.08 492.48 304.79C492.593 304.383 492.71 303.987 492.83 303.6C499.22 282.6 495.11 253.89 502.41 241.6C502.41 241.6 502.41 219.31 498.2 202.66C497.112 198.409 495.107 194.447 492.325 191.053C489.544 187.658 486.054 184.913 482.1 183.01L461.82 173.19C461.82 173.19 451.05 171.57 449.23 162.91Z" fill="black"/>
</g>
<g id="Group_5" opacity="0.1">
<path id="Vector_103" opacity="0.1" d="M449.23 162.91C449.23 162.91 433.95 175 429.39 184.57C429.39 184.57 428.93 195.06 425.29 199.62C421.65 204.18 417.99 226.99 417.08 254.35C416.17 281.71 412.08 318.2 412.08 318.2C412.08 318.2 405.24 353.77 397.94 357.42C397.94 357.42 431.69 331.88 448.11 340.54C464.53 349.2 483.23 370.19 488.7 366.99C488.7 366.99 487.38 326.99 493.37 305.7C493.483 305.293 493.6 304.897 493.72 304.51C500.11 283.51 496 254.8 503.3 242.51C503.3 242.51 503.3 220.22 499.09 203.57C498.002 199.319 495.997 195.357 493.215 191.963C490.434 188.568 486.944 185.823 482.99 183.92L462.71 174.1C462.71 174.1 451.05 171.57 449.23 162.91Z" fill="black"/>
</g>
<path id="Vector_104" d="M449 162.68C449 162.68 433.95 174.08 429.39 183.68C429.39 183.68 428.93 194.17 425.29 198.73C421.65 203.29 417.99 226.1 417.08 253.46C416.17 280.82 412.08 317.31 412.08 317.31C412.08 317.31 405.24 352.88 397.94 356.53C397.94 356.53 431.69 330.99 448.11 339.65C464.53 348.31 483.2 369.25 488.68 366.09C488.68 366.09 487.36 326.09 493.35 304.8C493.463 304.393 493.58 303.997 493.7 303.61C500.09 282.61 495.98 253.9 503.28 241.61C503.28 241.61 503.28 219.32 499.07 202.67C497.982 198.419 495.977 194.457 493.195 191.063C490.414 187.668 486.924 184.923 482.97 183.02L462.69 173.2C462.69 173.2 452.42 170.66 449 162.68Z" fill="#4D8AF0"/>
<g id="Group_6" opacity="0.1">
<path id="Vector_105" opacity="0.1" d="M490.73 189.36C490.73 189.36 537.02 242.04 530.64 267.12C530.64 267.12 506.92 261.65 500.54 268.94C500.54 268.94 495.54 252.06 480.47 242.49C465.4 232.92 451.5 171.57 490.73 189.36Z" fill="black"/>
</g>
<g id="Group_7" opacity="0.1">
<path id="Vector_106" opacity="0.1" d="M445.58 149.68C444.86 146 445.46 145.68 446.26 141.68C449.45 125.68 407.04 160.84 407.04 160.84C407.04 160.84 409.4 163.71 412.33 167.93C414.492 168.376 416.693 168.6 418.9 168.6C430.5 168.61 439.85 158.82 445.58 149.68Z" fill="black"/>
</g>
<path id="Vector_107" d="M417.07 166.32C434.953 166.32 449.45 151.823 449.45 133.94C449.45 116.057 434.953 101.56 417.07 101.56C399.187 101.56 384.69 116.057 384.69 133.94C384.69 151.823 399.187 166.32 417.07 166.32Z" fill="#FDA57D"/>
<g id="Group_8" opacity="0.1">
<path id="Vector_108" opacity="0.1" d="M387.98 125.08C383.21 125.72 377.13 124.08 376.21 119.41C375.05 113.41 383.03 109.56 384.27 103.6C384.73 101.36 384.18 99.03 384.45 96.77C384.99 92.2 388.68 88.69 392.45 86.03C404.347 77.6854 418.818 73.8303 433.29 75.15C435.097 75.1729 436.858 75.7296 438.35 76.75C439.92 78.04 440.53 80.14 441.6 81.87C445.3 87.87 453.6 88.54 459.54 92.26C466.54 96.61 469.95 105.15 470.26 113.35C470.57 121.55 468.26 129.6 465.91 137.48C463.91 144.18 461.91 151.06 457.55 156.54C453.19 162.02 446.06 165.86 439.27 164.21C442.38 161.97 440.12 156.77 436.75 154.94C433.38 153.11 429.2 152.8 426.32 150.28C423.44 147.76 422.58 143.64 421.64 139.89C420.46 135.16 418.74 130.36 415.29 126.89C408.5 120.14 396.29 123.96 387.98 125.08Z" fill="black"/>
</g>
<path id="Vector_109" d="M388.89 124.63C384.12 125.27 378.04 123.63 377.12 118.96C375.96 112.96 383.94 109.11 385.18 103.15C385.64 100.91 385.09 98.58 385.36 96.32C385.9 91.75 389.59 88.24 393.36 85.58C405.257 77.2354 419.728 73.3803 434.2 74.7C436.008 74.7229 437.768 75.2796 439.26 76.3C440.83 77.59 441.44 79.69 442.51 81.42C446.21 87.42 454.51 88.09 460.45 91.81C467.45 96.16 470.86 104.7 471.17 112.9C471.48 121.1 469.17 129.15 466.82 137.03C464.82 143.73 462.82 150.61 458.46 156.09C454.1 161.57 446.97 165.41 440.18 163.76C443.29 161.52 441.03 156.32 437.66 154.49C434.29 152.66 430.11 152.35 427.23 149.83C424.35 147.31 423.5 143.19 422.5 139.44C421.32 134.71 419.6 129.91 416.15 126.44C409.42 119.68 397.2 123.51 388.89 124.63Z" fill="#72351C"/>
<path id="Vector_110" d="M436.62 91.77L439.55 76.77C439.579 76.6261 439.579 76.4779 439.551 76.334C439.522 76.19 439.465 76.0532 439.383 75.9314C439.302 75.8095 439.196 75.7051 439.074 75.6242C438.951 75.5433 438.814 75.4875 438.67 75.46L428.32 73.46C428.176 73.431 428.028 73.4307 427.884 73.4593C427.74 73.4879 427.603 73.5448 427.481 73.6266C427.36 73.7085 427.255 73.8137 427.174 73.9361C427.093 74.0586 427.038 74.1958 427.01 74.34L424.08 89.34L414.08 126.42L432.43 130L436.62 91.77Z" fill="#CBDAE3"/>
<g id="Group_9" opacity="0.1">
<path id="Vector_111" opacity="0.1" d="M421.4 150.59C430.214 150.59 437.36 143.444 437.36 134.63C437.36 125.816 430.214 118.67 421.4 118.67C412.586 118.67 405.44 125.816 405.44 134.63C405.44 143.444 412.586 150.59 421.4 150.59Z" fill="black"/>
</g>
<path id="Vector_112" d="M421.4 151.04C430.214 151.04 437.36 143.894 437.36 135.08C437.36 126.266 430.214 119.12 421.4 119.12C412.586 119.12 405.44 126.266 405.44 135.08C405.44 143.894 412.586 151.04 421.4 151.04Z" fill="#CBDAE3"/>
<path id="Vector_113" d="M421.4 145.54C427.177 145.54 431.86 140.857 431.86 135.08C431.86 129.303 427.177 124.62 421.4 124.62C415.623 124.62 410.94 129.303 410.94 135.08C410.94 140.857 415.623 145.54 421.4 145.54Z" fill="#E9E9E9"/>
<path id="Vector_114" d="M421.4 138.27C423.162 138.27 424.59 136.842 424.59 135.08C424.59 133.318 423.162 131.89 421.4 131.89C419.638 131.89 418.21 133.318 418.21 135.08C418.21 136.842 419.638 138.27 421.4 138.27Z" fill="#F48681"/>
<g id="backhand">
<path id="Vector_115" d="M501.45 261.65L506.01 298.14V334.14C506.01 334.14 499.62 380.66 519.69 372C539.76 363.34 525.16 331.41 525.16 331.41C525.16 331.41 525.16 313.62 527.9 304.5C530.64 295.38 526.5 255.25 526.5 255.25L501.45 261.65Z" fill="#FDA57D"/>
<path id="Vector_116" d="M490.73 188.45C490.73 188.45 537.02 241.13 530.64 266.21C530.64 266.21 506.92 260.74 500.54 268.03C500.54 268.03 495.54 251.15 480.47 241.58C465.4 232.01 451.5 170.66 490.73 188.45Z" fill="#4D8AF0"/>
</g>
<path id="Vector_117" opacity="0.05" d="M436.886 90.4088L424.353 87.9612L424.265 88.4127L436.798 90.8603L436.886 90.4088Z" fill="black"/>
</g>
<defs>
<linearGradient id="paint0_linear" x1="1013.85" y1="761.938" x2="1015.26" y2="761.938" gradientUnits="userSpaceOnUse">
<stop stop-color="#808080" stop-opacity="0.25"/>
<stop offset="0.54" stop-color="#808080" stop-opacity="0.12"/>
<stop offset="1" stop-color="#808080" stop-opacity="0.1"/>
</linearGradient>
<linearGradient id="paint1_linear" x1="1015.89" y1="763.687" x2="1017.31" y2="763.687" gradientUnits="userSpaceOnUse">
<stop stop-color="#808080" stop-opacity="0.25"/>
<stop offset="0.54" stop-color="#808080" stop-opacity="0.12"/>
<stop offset="1" stop-color="#808080" stop-opacity="0.1"/>
</linearGradient>
<linearGradient id="paint2_linear" x1="1015.89" y1="761.938" x2="1017.31" y2="761.938" gradientUnits="userSpaceOnUse">
<stop stop-color="#808080" stop-opacity="0.25"/>
<stop offset="0.54" stop-color="#808080" stop-opacity="0.12"/>
<stop offset="1" stop-color="#808080" stop-opacity="0.1"/>
</linearGradient>
<clipPath id="clip0">
<rect width="955" height="680.5" fill="white"/>
</clipPath>
</defs>
</svg>
</body>
</html>
view raw index.html hosted with ❤ by GitHub
/* animating front hand */
#fronthand{
animation: fronthandrot 1.5s ease infinite alternate;
transform-origin: top right;
transform-box: fill-box;
}
@keyframes fronthandrot{
from{
transform: rotateZ(-25deg);
}
to{
transform: rotateZ(0deg) ;
}
}
/* animating back hand */
#backhand{
animation: backhandrot 1.5s ease infinite alternate;
transform-origin: top;
transform-box: fill-box;
}
@keyframes backhandrot{
from{
transform: rotateZ(-5deg) ;
}
to{
transform: rotateZ(30deg) translateY(5px) ;
}
}
/* animating front leg */
#front-leg{
animation: frontleg 1.5s ease infinite alternate ;
transform-origin: top;
transform-box: fill-box;
}
@keyframes frontleg{
from{
transform: rotateZ(0deg) ;
}
to{
transform: rotateZ(-40deg) ;
}
}
/* animating back leg */
#back-leg{
animation: backleg 1.5s ease infinite alternate;
transform-origin: top;
transform-box: fill-box;
}
@keyframes backleg{
from{
transform: rotateZ(0deg) ;
}
to{
transform: rotateZ(40deg) ;
}
}
/* animating background */
#front-Background{ /* Two consecutive background for continuous translation of the background*/
animation: movebg 30s linear infinite;
}
@keyframes movebg {
from{
transform: translateX(0);
}
to{
transform: translateX(100%);
}
}
#back-bg{
animation: backScroll 30s linear infinite;
}
@keyframes backScroll {
from {transform: translateX(-100%);}
to {transform: translateX(0%);}
}
view raw style.css hosted with ❤ by GitHub
After checking the code, you may have some doubts. So, I am going to discuss the steps you need to take to create this awesome SVG animation. The steps are-
  1. First, collect an SVG image as per your need. I took a walking man SVG. You can visit unDraw for some awesome SVGs.
  2. Now, to create an animation you should break an SVG into groups that are identified by some ids so that you can apply CSS properties to them. For grouping the parts of an SVG, you can use Figma. You can find some tutorials on the internet for using it.
  3. After grouping the parts, you need to use it to your HTML file as used in the index.html file. You can find that I have used two groups consisting of the same vectors( vector_2 to Vector_83) as it will help in creating the moving background.
  4. Now, add the styles to make the parts animating. If you don't understand any property, take a look at the tutorials.

I hope it is clear now. Congratulations on creating an awesome SVG animation. If you find any difficulty or have any doubts, let me know through your comments or contact through the contact page. Best of luck.
Happy coding😄.
By at
Labels: ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)

SVG animation - Create walking man animation

  Don't you want your website to seem attractive? I am sure you want to. But, How can you do that? What about some animations? It will b...

–>