Skip to content

Commit

Permalink
Merge pull request #85 from VikasYadav-1/add-svg-animation
Browse files Browse the repository at this point in the history 
Add svg animation
  • Loading branch information
@pulkit-30
pulkit-30 authored Oct 27, 2021
2 parents 6d2ede2 + b515bd2 commit db8854b
Show file tree
Hide file tree
Showing 4 changed files with 138 additions and 0 deletions.
Binary file added svg-soccer/Screenshot (286).png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
73 changes: 73 additions & 0 deletions svg-soccer/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>SVG-soccer </title>

</head>
<body>
<div class="svg-soccer-animation">
<svg width="857" height="527" viewBox="0 0 857 527" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="svg-soccer" filter="url(#filter0_d)">
<path id="Vector" d="M853 516.723H4V518.723H853V516.723Z" fill="#3F3D56"/>
<g id="body">
<path id="Vector_2" d="M436.309 9.76134C436.309 9.76134 420.278 -7.11515 404.143 3.51302C388.008 14.1412 380.354 24.4654 381.936 31.654C383.518 38.8426 388.2 48.8416 388.2 48.8416C388.2 48.8416 385.29 33.9489 398.65 32.8468C412.011 31.7447 430.469 22.9031 430.469 22.9031L442.955 49.567C442.955 49.567 444.72 43.3881 449.614 45.1603C454.508 46.9326 450.714 11.7381 436.309 9.76134Z" fill="#2F2E41"/>
<path id="Vector_3" d="M358.096 255.565C358.096 255.565 328.096 276.565 330.096 295.565C332.096 314.565 345.096 366.565 345.096 366.565L372.096 362.565C372.096 362.565 375.096 322.565 365.096 307.565L413.096 280.565L358.096 255.565Z" fill="#FFB8B8"/>
<path id="Vector_4" d="M418.096 202.565C418.096 202.565 353.096 243.565 353.096 256.565L405.096 299.565L423.096 279.565L421.096 309.565L477.096 320.565C477.096 320.565 497.096 244.565 496.096 241.565C495.096 238.565 492.096 194.565 492.096 194.565L418.096 202.565Z" fill="#2F2E41"/>
<path id="Vector_5" d="M424.596 305.065C424.596 305.065 422.596 342.065 427.596 357.065C432.596 372.065 437.596 428.065 437.596 428.065H465.596C465.596 428.065 478.596 379.065 462.596 357.065C462.596 357.065 457.596 328.065 471.596 314.065L424.596 305.065Z" fill="#FFB8B8"/>
<path id="Vector_6" d="M372.096 357.565L343.096 363.565L348.248 384.748C350.784 395.173 351.073 406.019 349.096 416.565V416.565C349.096 416.565 379.096 424.565 379.096 420.565C379.096 416.565 372.096 400.565 374.096 389.565C376.096 378.565 372.096 357.565 372.096 357.565Z" fill="#6C63FF"/>
<path id="Vector_7" d="M467.596 423.565L435.916 421.565C435.916 421.565 437.836 454.565 433.996 465.565C430.156 476.565 432.076 480.565 432.076 480.565L459.916 482.565L467.596 423.565Z" fill="#6C63FF"/>
<path id="Vector_8" d="M464.788 499.866C464.644 495.745 460.3 476.276 459.322 479.204C458.344 482.133 441.653 483.687 437.036 476.568C437.036 476.568 430.672 468.053 426.278 474.274C421.884 480.495 413.514 490.98 413.514 490.98C413.514 490.98 384.397 498.064 386.85 505.745C387.346 507.298 389.413 508.349 392.395 509.039C392.287 509.205 392.209 509.389 392.166 509.583L392.018 510.276C391.927 510.703 392.01 511.149 392.247 511.515C392.485 511.881 392.858 512.138 393.285 512.229L393.978 512.377C394.405 512.468 394.85 512.385 395.216 512.148C395.583 511.91 395.839 511.537 395.93 511.11L396.078 510.417C396.13 510.167 396.122 509.909 396.055 509.662C396.87 509.763 397.72 509.847 398.597 509.917C398.311 510.15 398.113 510.474 398.034 510.834L397.886 511.527C397.795 511.954 397.878 512.4 398.115 512.766C398.353 513.132 398.726 513.389 399.153 513.48L399.846 513.628C400.273 513.719 400.718 513.636 401.084 513.399C401.451 513.161 401.708 512.788 401.799 512.361L401.946 511.668C402.007 511.381 401.989 511.084 401.895 510.806C401.801 510.528 401.635 510.281 401.413 510.09C403.744 510.194 406.195 510.217 408.644 510.185C408.438 510.402 408.295 510.671 408.231 510.963L408.084 511.656C407.993 512.083 408.075 512.529 408.312 512.895C408.55 513.261 408.923 513.518 409.35 513.609L410.043 513.757C410.47 513.848 410.915 513.765 411.282 513.528C411.648 513.29 411.905 512.917 411.996 512.49L412.143 511.797C412.21 511.486 412.184 511.162 412.07 510.865C411.955 510.568 411.757 510.311 411.5 510.124C413.343 510.071 415.155 509.992 416.884 509.899C416.678 510.115 416.536 510.383 416.473 510.675L416.325 511.368C416.234 511.795 416.316 512.241 416.554 512.607C416.791 512.973 417.164 513.23 417.591 513.321L418.284 513.469C418.711 513.56 419.157 513.477 419.523 513.24C419.889 513.002 420.146 512.629 420.237 512.202L420.385 511.509C420.457 511.167 420.418 510.81 420.273 510.492C420.128 510.173 419.884 509.909 419.579 509.739C425.667 509.345 430.155 508.842 430.155 508.842C430.155 508.842 435.399 508.109 441.801 506.973L441.674 507.57C441.583 507.997 441.665 508.443 441.903 508.809C442.14 509.175 442.513 509.432 442.94 509.523L443.633 509.671C444.06 509.762 444.506 509.679 444.872 509.442C445.238 509.204 445.495 508.831 445.586 508.404L445.734 507.711C445.785 507.467 445.78 507.214 445.719 506.973C445.657 506.731 445.542 506.506 445.38 506.316C446.669 506.071 447.972 505.814 449.263 505.546L449.145 506.096C449.054 506.523 449.137 506.968 449.374 507.334C449.612 507.701 449.985 507.957 450.412 508.048L451.105 508.196C451.532 508.287 451.977 508.205 452.343 507.967C452.71 507.73 452.966 507.357 453.057 506.93L453.205 506.237C453.26 505.978 453.252 505.709 453.181 505.454C453.11 505.199 452.978 504.965 452.797 504.772C454.2 504.449 455.556 504.116 456.814 503.775C456.798 503.826 456.776 503.875 456.765 503.928L456.617 504.621C456.526 505.048 456.608 505.494 456.846 505.86C457.083 506.226 457.457 506.483 457.883 506.574L458.577 506.722C459.003 506.813 459.449 506.73 459.815 506.493C460.181 506.255 460.438 505.882 460.529 505.455L460.677 504.762C460.756 504.391 460.704 504.004 460.531 503.667C460.358 503.329 460.073 503.062 459.725 502.91C462.799 501.905 464.823 500.864 464.788 499.866Z" fill="#2F2E41"/>
<path id="Vector_9" d="M418.096 72.5652C434.112 72.5652 447.096 59.5815 447.096 43.5652C447.096 27.549 434.112 14.5652 418.096 14.5652C402.079 14.5652 389.096 27.549 389.096 43.5652C389.096 59.5815 402.079 72.5652 418.096 72.5652Z" fill="#FFB8B8"/>
<path id="Vector_10" d="M444.096 40.5652C444.096 40.5652 460.096 60.5652 468.096 59.5652L433.096 86.5652C433.096 86.5652 429.096 69.5652 424.096 67.5652C419.096 65.5652 444.096 40.5652 444.096 40.5652Z" fill="#FFB8B8"/>
<path id="Vector_11" d="M506.596 189.065C506.596 189.065 506.593 78.7189 488.083 69.2134C469.583 59.7134 457.345 54.2913 457.345 54.2913C457.073 57.912 456.044 61.4353 454.325 64.6335C452.605 67.8317 450.234 70.6337 447.365 72.8584C441.231 77.5941 435.12 81.5209 431.706 81.5335L431.596 81.0652L431.179 79.8764L421.096 95.5652C421.096 95.5652 412.096 97.5652 409.096 103.565C407.473 106.811 415.126 139.488 410.596 169.065C406.752 194.159 390.555 216.811 390.096 219.565C389.32 224.221 409.006 212.023 417.871 206.321C418.002 206.468 418.096 206.565 418.096 206.565C418.096 206.565 413.096 208.565 423.096 205.565C428.762 203.865 436.673 203.771 442.468 204.008C442.461 205.746 442.502 207.126 442.596 208.065C443.596 218.065 493.596 232.065 500.596 229.065C507.596 226.065 506.596 189.065 506.596 189.065Z" fill="#2F2E41"/>
<path id="Vector_12" d="M436.596 297.065C436.596 297.065 450.596 284.065 458.596 291.065C466.596 298.065 471.596 303.065 471.596 303.065C471.596 303.065 448.596 289.065 436.596 297.065Z" fill="#6C63FF"/>
<path id="Vector_13" d="M440.232 452.614C440.232 452.614 448.123 445.286 452.632 449.232C457.141 453.177 459.959 455.995 459.959 455.995C459.959 455.995 446.996 448.105 440.232 452.614Z" fill="#2F2E41"/>
<path id="Vector_14" d="M351.829 384.459C351.829 384.459 357.246 375.152 362.708 377.615C368.17 380.077 371.686 381.953 371.686 381.953C371.686 381.953 356.987 378.177 351.829 384.459Z" fill="#2F2E41"/>
<path id="Vector_15" opacity="0.2" d="M484.596 156.065L465.596 228.065L481.596 194.065L484.596 156.065Z" fill="black"/>
</g>
<g id="bg">
<path id="Vector_16" d="M456.86 507C446.169 506.988 435.736 510.291 427 516.454H486.68C477.956 510.298 467.538 506.995 456.86 507V507Z" fill="#E6E6E6"/>
<path id="Vector_17" d="M852.787 446.43C850.117 398.018 811.22 358.547 762.848 355.239C740.55 353.672 718.396 359.86 700.138 372.756C681.88 385.651 668.641 404.461 662.662 425.999C661.488 425.957 660.315 425.91 659.131 425.91C638.195 425.914 617.824 432.696 601.064 445.242C584.304 457.788 572.057 475.424 566.154 495.51C552.282 489.415 536.779 488.092 522.074 491.75C507.369 495.407 494.293 503.839 484.893 515.723H787.166C824.302 515.723 854.37 484.964 852.855 447.859C852.836 447.383 852.813 446.907 852.787 446.43Z" fill="#E6E6E6"/>
</g>
<g id="right-hand">
<path id="Vector_18" d="M449.539 100.695C449.539 100.695 429.791 73.7083 410.604 101.724C391.38 129.795 373.506 152.839 373.506 152.839L325.76 168.407L298.138 170.857L305.747 195.415L386.061 183.764C386.061 183.764 475.475 130.65 449.539 100.695Z" fill="#2F2E41"/>
<path id="Vector_19" d="M302.237 174.82C302.237 174.82 263.702 162.817 269.617 182.565C275.533 202.314 307.99 192.338 307.99 192.338L302.237 174.82Z" fill="#FFB8B8"/>
</g>
<g id="shoe">
<path id="Vector_20" d="M387.404 431.111C386.404 427.111 378.096 408.975 377.75 412.043C377.404 415.111 361.404 420.111 355.404 414.111C355.404 414.111 347.404 407.111 344.404 414.111C341.404 421.111 335.404 433.111 335.404 433.111C335.404 433.111 308.404 446.111 312.404 453.111C313.213 454.527 315.455 455.124 318.515 455.177C318.443 455.362 318.406 455.558 318.404 455.757V456.465C318.404 456.902 318.578 457.32 318.886 457.629C319.195 457.938 319.614 458.111 320.05 458.111H320.759C321.195 458.111 321.614 457.938 321.922 457.629C322.231 457.32 322.404 456.902 322.404 456.465V455.757C322.403 455.502 322.341 455.25 322.225 455.023C323.042 454.952 323.891 454.857 324.763 454.742C324.532 455.03 324.406 455.388 324.404 455.757V456.465C324.404 456.902 324.578 457.32 324.886 457.629C325.195 457.938 325.614 458.111 326.05 458.111H326.759C327.195 458.111 327.614 457.938 327.922 457.629C328.231 457.32 328.404 456.902 328.404 456.465V455.757C328.404 455.464 328.324 455.176 328.174 454.924C328.025 454.672 327.81 454.465 327.553 454.324C329.855 453.94 332.257 453.451 334.646 452.91C334.489 453.164 334.406 453.458 334.404 453.757V454.465C334.404 454.902 334.578 455.32 334.886 455.629C335.195 455.938 335.614 456.111 336.05 456.111H336.759C337.195 456.111 337.614 455.938 337.922 455.629C338.231 455.32 338.404 454.902 338.404 454.465V453.757C338.404 453.439 338.311 453.127 338.138 452.861C337.964 452.594 337.717 452.384 337.426 452.255C339.218 451.818 340.973 451.363 342.645 450.911C342.489 451.166 342.406 451.458 342.404 451.757V452.465C342.404 452.902 342.578 453.32 342.886 453.629C343.195 453.938 343.614 454.111 344.05 454.111H344.759C345.195 454.111 345.614 453.938 345.922 453.629C346.231 453.32 346.404 452.902 346.404 452.465V451.757C346.403 451.407 346.291 451.066 346.082 450.785C345.874 450.504 345.582 450.296 345.247 450.193C351.12 448.539 355.404 447.111 355.404 447.111C355.404 447.111 360.38 445.301 366.404 442.855V443.465C366.404 443.902 366.578 444.32 366.886 444.629C367.195 444.938 367.614 445.111 368.05 445.111H368.759C369.195 445.111 369.614 444.938 369.922 444.629C370.231 444.32 370.404 443.902 370.404 443.465V442.757C370.404 442.507 370.346 442.261 370.236 442.038C370.125 441.814 369.965 441.618 369.768 441.466C370.977 440.957 372.197 440.435 373.404 439.903V440.465C373.404 440.902 373.578 441.32 373.886 441.629C374.195 441.938 374.614 442.111 375.05 442.111H375.759C376.195 442.111 376.614 441.938 376.922 441.629C377.231 441.32 377.404 440.902 377.404 440.465V439.757C377.404 439.492 377.34 439.231 377.217 438.997C377.095 438.762 376.917 438.561 376.7 438.41C378.005 437.801 379.262 437.193 380.42 436.597C380.415 436.65 380.404 436.702 380.404 436.757V437.465C380.404 437.902 380.578 438.32 380.886 438.629C381.195 438.938 381.614 439.111 382.05 439.111H382.759C383.195 439.111 383.614 438.938 383.922 438.629C384.231 438.32 384.404 437.902 384.404 437.465V436.757C384.404 436.377 384.273 436.01 384.033 435.716C383.793 435.422 383.459 435.22 383.087 435.144C385.883 433.521 387.647 432.08 387.404 431.111Z" fill="#2F2E41"/>
</g>
<g id="left-hand">
<path id="Vector_21" d="M497.211 83.4821C487.299 63.5561 457.137 74.4237 462.038 96.1328C462.111 96.4564 462.188 96.7833 462.268 97.1132C467.433 117.663 475.875 137.247 487.268 155.113L476.268 204.113L464.268 229.113L489.268 235.113L520.268 160.113C520.268 160.113 511.717 112.64 497.211 83.4821Z" fill="#2F2E41"/>
<path id="Vector_22" d="M469.768 227.613C469.768 227.613 439.768 254.613 459.768 259.613C479.768 264.613 487.768 231.613 487.768 231.613L469.768 227.613Z" fill="#FFB8B8"/>
</g>
<g id="soccer-ball">
<path id="Vector_23" d="M328.82 390C328.819 392.533 328.608 395.062 328.19 397.56V397.57C327.041 404.29 324.382 410.662 320.411 416.204C316.44 421.746 311.262 426.314 305.268 429.562C299.274 432.811 292.62 434.655 285.809 434.956C278.998 435.257 272.207 434.007 265.95 431.3H265.94C264.088 430.501 262.294 429.576 260.57 428.53C255.226 425.303 250.61 421.002 247.016 415.898C243.422 410.794 240.927 404.999 239.69 398.88C239.11 395.956 238.819 392.981 238.82 390C238.82 388.64 238.88 387.29 239 385.96V385.95C240.037 374.467 245.443 363.82 254.102 356.207C262.761 348.593 274.012 344.594 285.533 345.034C297.054 345.474 307.967 350.32 316.02 358.572C324.073 366.823 328.651 377.851 328.81 389.38V389.39C328.82 389.6 328.82 389.79 328.82 390Z" fill="#6C63FF"/>
<path id="Vector_24" d="M294.897 374.97H274.743L264.665 357.52L271.5 345.672L271.9 345.564C280.553 343.252 289.692 343.508 298.203 346.3L298.565 346.42L304.975 357.52L294.897 374.97ZM275.897 372.97H293.743L302.665 357.52L297.216 348.082C289.308 345.574 280.855 345.335 272.817 347.391L266.975 357.52L275.897 372.97Z" fill="white"/>
<path id="Vector_25" d="M293.897 410.971H273.743L263.665 393.517L273.743 376.062H293.897L303.975 393.517L293.897 410.971ZM274.897 408.971H292.743L301.665 393.517L292.743 378.062H274.897L265.975 393.517L274.897 408.971Z" fill="white"/>
<path id="Vector_26" d="M283.82 436C277.535 436.012 271.315 434.724 265.551 432.217L264.523 431.771L274.742 414.06H294.897L304.685 431.015L303.713 431.481C297.509 434.471 290.707 436.016 283.82 436V436ZM267.383 430.816C272.881 433.029 278.769 434.109 284.695 433.991C290.621 433.874 296.462 432.563 301.868 430.135L293.743 416.06H275.897L267.383 430.816Z" fill="white"/>
<path id="Vector_27" d="M327.897 392.97H307.743L297.665 375.52L307.742 358.06H316.919L317.215 358.371C325.174 366.744 329.673 377.816 329.81 389.367V389.657L327.897 392.97ZM308.897 390.97H326.743L327.806 389.129C327.613 378.321 323.428 367.967 316.057 360.06H308.897L299.975 375.52L308.897 390.97Z" fill="white"/>
<path id="Vector_28" d="M307.465 429.481L297.665 412.52L307.742 395.06H327.896L329.19 397.29L329.176 397.737C328.083 404.106 325.664 410.173 322.075 415.546C318.487 420.919 313.808 425.477 308.344 428.926L307.465 429.481ZM299.975 412.52L308.149 426.668C313.102 423.378 317.338 419.119 320.602 414.15C323.866 409.18 326.092 403.601 327.144 397.749L326.744 397.06H308.897L299.975 412.52Z" fill="white"/>
<path id="Vector_29" d="M260.926 429.913L260.053 429.386C254.592 426.085 249.875 421.687 246.201 416.47C242.528 411.253 239.976 405.33 238.709 399.076L238.635 398.706L240.743 395.06H260.897L270.975 412.52L260.926 429.913ZM240.746 399.051C241.961 404.792 244.309 410.234 247.653 415.056C250.997 419.879 255.269 423.986 260.22 427.137L268.665 412.52L259.742 397.06H241.897L240.746 399.051Z" fill="white"/>
<path id="Vector_30" d="M260.897 390.97H240.743L238 386.229V385.96C238.987 374.627 244.151 364.066 252.489 356.327L252.777 356.06H260.897L270.975 373.52L260.897 390.97ZM241.896 388.97H259.743L268.665 373.52L259.742 358.06H253.566C245.851 365.341 241.04 375.174 240.024 385.733L241.896 388.97Z" fill="white"/>
</g>
</g>
<defs>
<filter id="filter0_d" x="0" y="0" width="857" height="526.723" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
</defs>
</svg>

</div>
</body>
</html>
2 changes: 2 additions & 0 deletions svg-soccer/readme.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
<b> soccer-svg </b>
<img src="Screenshot (286).png" alt="soccer_svg">
63 changes: 63 additions & 0 deletions svg-soccer/style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
*{
box-sizing: border-box;
margin: 0px;
padding: 0px;
}
body{
background-color: rgba(211, 211, 211, 0.274);
}
.svg-soccer-animation{
position: absolute;
top: 8%;
left: 15%;
padding: 40px;
/* border: 2px solid gray; */
border-radius: 150px;
box-shadow: 0px 5px 10px 3px rgba(124, 122, 122, 0.562);
background-color: rgba(128, 128, 128, 0.096);
}
#Vector_16 ,#Vector_17 ,#Vector_6,#Vector_7{
animation: changecolor 1.5s infinite 0s alternate ease-in;
}
/* ball color */
#Vector_23 {
animation: changecolor 1.5s infinite 0s alternate ease-in;
}
@keyframes changecolor{
0%{fill: rgba(250, 2, 2, 0.733);}
100%{fill: rgb(0, 153, 255);}
}
#soccer-ball{
animation: ball-motion 1s ease-out 0s infinite alternate ;
}
@keyframes ball-motion {
0%{transform: translateY(0);}
100%{transform: translateY(-100px);}
}
#shoe{
animation: s-rotate 2s ease-in infinite;
transform-origin: right;
transform-box: fill-box;
}
@keyframes s-rotate{
5%{transform: rotate(8deg);}
70%{transform: rotate(-4deg);}
}
#right-hand{
animation: rh-rotate 2s none 0.1s infinite ;
transform-origin: right;
transform-box: fill-box;
}
@keyframes rh-rotate{
40%{transform: rotate(-10deg);}
90%{transform: rotate(12deg);}
}
#left-hand{
animation: lh-rotate 2s none 0.1s infinite ;
transform-origin: top left;
transform-box: fill-box;
}
@keyframes lh-rotate{
40%{transform: rotate(7deg);}
90%{transform: rotate(-5deg);}
}

0 comments on commit db8854b

Please sign in to comment.