Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Flying Duck Animation</title> | |
| <style> | |
| body { | |
| margin: 0; | |
| padding: 20px; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| min-height: 100vh; | |
| background: linear-gradient(135deg, #6B73FF 0%, #9A9CE3 100%); | |
| } | |
| svg { | |
| max-width: 100%; | |
| height: auto; | |
| border-radius: 10px; | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"> | |
| <defs> | |
| <clipPath id="clip0_22_911"> | |
| <rect width="400" height="400" fill="white"/> | |
| </clipPath> | |
| </defs> | |
| <g clip-path="url(#clip0_22_911)"> | |
| <!-- Background Sky --> | |
| <rect width="400" height="400" fill="#7D7FEE"/> | |
| <!-- Background Clouds Layer --> | |
| <g id="background-clouds" transform-origin="center"> | |
| <!-- Cloud 1 - Top Right --> | |
| <path d="M317.398 246.302C289.685 256.415 283.912 281.162 284.489 292.272C276.406 285.376 257.353 292.272 245.229 307.786C233.105 323.301 237.723 330.771 248.116 343.987C256.43 354.56 271.979 354.905 278.715 353.756C281.602 360.077 287.375 362.375 298.345 364.674C307.121 366.513 319.707 361.609 324.903 358.928C365.317 376.741 410.928 370.995 427.671 365.823C444.415 360.651 455.962 353.181 446.724 335.943C439.334 322.152 419.781 319.087 410.928 319.279C419.588 308.361 421.898 299.742 405.155 281.928C391.76 267.678 371.091 279.055 362.431 286.525C365.895 276.757 352.039 233.66 317.398 246.302Z" fill="#A2A4FE"/> | |
| <!-- Cloud 2 - Top Center --> | |
| <path d="M344.979 208.065C341.779 218.865 325.645 218.565 317.979 217.065C304.478 231.565 288.979 221.565 280.979 212.065C274.579 204.465 277.312 198.898 279.479 197.065C278.645 195.398 277.779 190.965 280.979 186.565C284.179 182.165 290.645 183.398 293.479 184.565C294.812 181.732 299.579 175.865 307.979 175.065C316.379 174.265 320.145 181.065 320.979 184.565C335.979 180.065 348.979 194.565 344.979 208.065Z" fill="#A2A4FE"/> | |
| <!-- Cloud 3 - Left Side --> | |
| <path d="M63.1178 153.987C84.2348 159.639 88.7652 176.466 88.3908 184.173C90.0757 180.319 98.5 172.741 118.718 173.255C143.991 173.897 156.909 215.001 146.238 232.342C137.701 246.215 129.202 241.548 126.019 237.48C122.462 245.401 107.598 262.271 76.5967 266.382C45.5952 270.492 35.9728 253.108 35.0368 243.903C13.1335 249.683 -3.71509 238.765 -7.64644 235.553C-11.5778 232.342 -35.7275 202.798 -11.0162 179.035C8.7529 160.024 20.0602 171.114 23.2427 179.035C27.7357 168.331 42.0009 148.335 63.1178 153.987Z" fill="#A2A4FE"/> | |
| <!-- Cloud 4 - Top Left --> | |
| <path d="M110.269 62.9058C94.2689 54.1058 83.2689 62.2391 79.7689 67.4058C76.7689 58.9057 57.7688 52.4058 43.2688 70.9058C31.6688 85.7058 46.4355 93.4058 55.2689 95.4058C53.6022 100.072 52.5689 110.406 61.7689 114.406C70.9689 118.406 79.6022 111.072 82.7689 106.906C98.7689 117.306 109.769 108.906 113.269 103.406C120.769 111.406 161.769 115.906 160.269 95.4058C159.069 79.0058 146.102 75.5725 139.769 75.9058C133.769 56.7058 117.602 59.2391 110.269 62.9058Z" fill="#A2A4FE"/> | |
| </g> | |
| <!-- Main Duck Character --> | |
| <g id="duck-main" transform-origin="center"> | |
| <!-- Duck Body --> | |
| <g id="duck-body" transform-origin="center"> | |
| <!-- Main Body --> | |
| <path d="M254.552 143.362C252.837 166.631 257.307 182.451 259.757 187.452C274.147 217.763 273.229 235.828 268.33 255.73C263.431 275.631 244.142 292.165 214.442 298.595C184.743 305.025 179.232 294.002 173.108 292.165C166.984 290.328 163.923 300.126 145.552 294.002C127.181 287.879 137.285 282.674 117.996 275.019C98.7065 267.365 105.136 256.036 93.1953 247.769C81.2543 239.502 72.9875 243.483 72.0689 235.828C71.1504 228.174 79.1111 226.643 114.015 217.457C148.92 208.272 184.437 194.8 202.195 184.39C219.953 173.98 221.791 136.013 222.403 125.603C223.015 115.193 221.484 91.3113 237.712 76.6147C253.939 61.9181 272.73 75.7138 273.229 82.7383C273.654 88.7215 275.344 93.5313 276.671 94.7561C275.548 98.4302 270.133 101.796 267.717 108.764C265.268 115.826 256.695 114.275 254.552 143.362Z" fill="#EEF6F9"/> | |
| <!-- Body Shading --> | |
| <path d="M191.479 156.527C198.582 177.103 207.502 197.556 211.074 205.21C220.137 240.482 199.133 239.502 187.498 234.603C186.682 232.664 179.721 227.132 158.411 220.519C131.774 212.252 138.51 200.923 130.243 195.412C121.976 189.901 117.383 186.839 114.934 181.634C112.484 176.429 116.771 174.592 113.403 169.999C110.035 165.407 105.748 167.856 104.217 153.466C102.687 139.075 101.768 145.505 98.7062 135.401C95.6444 125.297 98.7062 125.297 101.768 121.011C104.83 116.724 100.237 118.867 100.237 111.213C100.237 105.089 105.34 103.763 107.892 103.865C107.381 103.456 106.055 101.721 104.83 98.0472C103.299 93.4545 105.442 91.6174 108.504 90.3927C111.566 89.168 119.22 94.373 136.979 102.027C154.737 109.682 182.599 130.808 191.479 156.527Z" fill="#EEF6F9"/> | |
| <!-- Wing Detail --> | |
| <path id="wing-detail" d="M275.678 163.57C270.045 175.082 261.9 184.9 258.532 188.37C229.751 216.845 255.47 251.749 269.248 242.87C283.027 233.991 299.56 170.918 299.866 167.244C300.173 163.57 294.661 166.938 295.886 165.407C297.111 163.876 300.785 150.71 297.723 149.179C294.661 147.648 292.824 151.629 292.212 150.71C291.6 149.792 294.968 138.157 290.069 139.688C285.17 141.219 282.72 149.179 275.678 163.57Z" fill="#D9E5EA"/> | |
| <!-- Body Details --> | |
| <path d="M137.702 259.556C137.925 259.462 138.177 259.542 138.309 259.734L138.358 259.822L138.464 260.061C139.037 261.276 140.202 262.821 141.951 263.755C143.79 264.737 146.33 265.074 149.627 263.543L149.723 263.51C149.949 263.456 150.189 263.567 150.291 263.786C150.407 264.037 150.298 264.334 150.048 264.45C146.487 266.103 143.617 265.778 141.481 264.637C139.504 263.581 138.203 261.853 137.557 260.481L137.436 260.211L137.406 260.114C137.361 259.887 137.48 259.65 137.702 259.556Z" fill="#93A3A8"/> | |
| <path d="M123.543 235.713C123.747 235.583 124.009 235.619 124.171 235.785L124.234 235.864L124.387 236.091C126.095 238.49 131.601 242.495 141.135 239.938L141.236 239.921C141.467 239.907 141.685 240.058 141.748 240.291C141.82 240.558 141.661 240.832 141.395 240.903L140.917 241.026C131.279 243.432 125.494 239.376 123.569 236.665L123.392 236.403L123.346 236.313C123.263 236.096 123.34 235.843 123.543 235.713Z" fill="#93A3A8"/> | |
| <!-- Beak --> | |
| <path d="M262.394 104.839C261.421 101.864 260.955 98.1282 262.207 94.373C264.962 86.1062 271.392 86.7185 273.229 87.0247C275.066 87.3309 274.454 91.9236 279.659 95.9039C284.864 99.8842 290.069 102.64 291.6 103.252C293.131 103.865 294.355 106.62 291.6 106.926C289.229 107.19 275.522 105.64 270.768 104.617C273.801 105.784 280.018 108.421 280.884 109.07C282.108 109.988 283.027 111.519 282.721 112.131C282.503 112.567 275.919 112.538 270.488 111.6C266.738 110.953 263.576 108.457 262.394 104.839Z" fill="#F68505"/> | |
| <!-- Eye --> | |
| <path d="M255.024 88.4644C254.504 90.4257 253.022 91.7345 251.715 91.3876C250.407 91.0407 249.769 89.1695 250.289 87.2082C250.81 85.2468 252.291 83.9381 253.599 84.285C254.906 84.6319 255.545 86.5031 255.024 88.4644Z" fill="#AA5D3C"/> | |
| </g> | |
| <!-- Duck Feet --> | |
| <g id="duck-feet" transform-origin="center"> | |
| <!-- Left Foot --> | |
| <path d="M192.704 324.62C192.704 318.942 194.164 307 195.132 299.993C195.344 298.452 195.85 296.72 197.397 296.562C200.192 296.275 204.725 298.353 204.032 300.432C203.337 302.519 201.855 314.829 201.092 321.678C201.026 322.27 201.488 322.782 202.084 322.78C208.617 322.759 230.207 322.692 227.914 325.845C225.465 329.213 223.015 328.6 221.484 331.356C219.954 334.112 229.139 342.379 223.015 340.848C216.892 339.317 216.279 339.623 214.442 341.154C212.605 342.685 215.973 345.134 214.442 345.134C212.911 345.134 202.807 338.398 198.521 334.724C194.234 331.05 192.704 332.581 192.704 324.62Z" fill="#F68505"/> | |
| <!-- Right Foot --> | |
| <path d="M165.147 327.988C165.983 330.704 172.667 338.065 177.339 342.896C178.356 343.948 177.928 345.724 176.465 345.714C172.052 345.681 170.188 341.512 167.903 341.766C165.147 342.072 166.066 348.502 163.616 349.727C161.167 350.951 160.554 347.89 157.799 343.909C155.043 339.929 154.737 341.46 149.532 343.909C144.327 346.359 138.509 347.583 141.877 343.909C145.245 340.235 154.125 326.457 156.574 320.64C158.292 316.559 159.665 302.606 160.321 293.727C160.482 291.552 161.946 289.077 163.977 289.873C165.642 290.526 166.204 292.198 166.233 293.985C166.384 303.246 164.052 324.429 165.147 327.988Z" fill="#F68505"/> | |
| </g> | |
| </g> | |
| <!-- Duck Hat --> | |
| <g id="duck-hat" transform-origin="256 70"> | |
| <!-- Hat Base --> | |
| <path d="M244.448 63.1429C238.569 66.3272 237.508 73.451 237.712 76.6148C240.366 78.0437 247.877 80.8401 256.695 80.5952C265.513 80.3502 269.759 77.3292 270.78 75.6963C271.698 67.1233 263.125 61.9182 260.369 61.3059C257.614 60.6935 251.796 59.1626 244.448 63.1429Z" fill="#EAE101"/> | |
| <!-- Hat Top Elements --> | |
| <path d="M247.65 50.4823C250.719 51.0522 254.509 54.0444 256.02 55.4693C251.486 57.6066 238.931 57.6316 238.931 53.332C238.931 49.2764 243.814 49.7699 247.65 50.4823Z" fill="#EAE101"/> | |
| <path d="M265.171 52.4824C260.666 52.4824 257.194 54.3999 256.021 55.3586C264.819 59.3133 269.746 56.4371 270.45 55.3586C271.154 54.28 270.802 52.4824 265.171 52.4824Z" fill="#EAE101"/> | |
| <path d="M271.698 82.7384C264.105 82.7384 258.328 81.1055 256.389 80.289C262.513 80.7789 268.534 77.4313 270.78 75.6963C272.617 76.1045 276.903 77.2272 279.353 78.4519C282.415 79.9828 282.415 80.9013 281.802 81.5137C281.19 82.1261 281.19 82.7384 271.698 82.7384Z" fill="#EAE101"/> | |
| <!-- Hat Detail --> | |
| <path d="M255.982 54.4917C256.533 54.5373 256.942 55.0205 256.897 55.5708L256.467 60.7583C256.421 61.3086 255.938 61.7179 255.388 61.6724C254.837 61.6268 254.428 61.1436 254.474 60.5933L254.903 55.4058C254.949 54.8554 255.432 54.4462 255.982 54.4917Z" fill="#EAE101"/> | |
| </g> | |
| </g> | |
| </svg> | |
| <script> | |
| // Wait for DOM to be fully loaded | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Get animation elements | |
| const duckMain = document.getElementById('duck-main'); | |
| const duckBody = document.getElementById('duck-body'); | |
| const duckFeet = document.getElementById('duck-feet'); | |
| const duckHat = document.getElementById('duck-hat'); | |
| const backgroundClouds = document.getElementById('background-clouds'); | |
| const wingDetail = document.getElementById('wing-detail'); | |
| // Main duck bobbing animation - gentle up and down movement | |
| const duckBobbing = duckMain.animate([ | |
| { transform: 'translate(0, 0px)' }, | |
| { transform: 'translate(2px, -6px)' }, | |
| { transform: 'translate(0, 0px)' }, | |
| { transform: 'translate(-1px, -3px)' }, | |
| { transform: 'translate(0, 0px)' } | |
| ], { | |
| duration: 2800, // Slightly irregular timing for natural feel | |
| iterations: Infinity, | |
| easing: 'cubic-bezier(0.4, 0.0, 0.6, 1.0)' | |
| }); | |
| // Wing flapping animation - subtle rotation to simulate wing movement | |
| const wingFlapping = duckBody.animate([ | |
| { transform: 'rotate(0deg)' }, | |
| { transform: 'rotate(1.5deg)' }, | |
| { transform: 'rotate(-1deg)' }, | |
| { transform: 'rotate(1deg)' }, | |
| { transform: 'rotate(0deg)' } | |
| ], { | |
| duration: 1200, // Faster than bobbing for wing beat rhythm | |
| iterations: Infinity, | |
| easing: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)' | |
| }); | |
| // Wing detail animation - more pronounced movement for the wing element | |
| if (wingDetail) { | |
| const wingDetailAnimation = wingDetail.animate([ | |
| { transform: 'rotate(0deg) scale(1)' }, | |
| { transform: 'rotate(2deg) scale(1.02)' }, | |
| { transform: 'rotate(-1.5deg) scale(0.98)' }, | |
| { transform: 'rotate(1.5deg) scale(1.01)' }, | |
| { transform: 'rotate(0deg) scale(1)' } | |
| ], { | |
| duration: 1200, | |
| iterations: Infinity, | |
| easing: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)' | |
| }); | |
| } | |
| // Hat bouncing animation - follows duck movement with slight delay and physics | |
| const hatBouncing = duckHat.animate([ | |
| { transform: 'translate(0, 0px) rotate(0deg)' }, | |
| { transform: 'translate(1px, -4px) rotate(-0.5deg)' }, | |
| { transform: 'translate(0, -1px) rotate(0deg)' }, | |
| { transform: 'translate(-0.5px, -2px) rotate(0.3deg)' }, | |
| { transform: 'translate(0, 0px) rotate(0deg)' } | |
| ], { | |
| duration: 2900, // Slightly offset from duck bobbing | |
| iterations: Infinity, | |
| easing: 'cubic-bezier(0.34, 1.56, 0.64, 1)', // Bouncy easing | |
| delay: 100 // Small delay to show hat following duck movement | |
| }); | |
| // Feet animation - subtle movement to simulate flying/paddling motion | |
| const feetMovement = duckFeet.animate([ | |
| { transform: 'rotate(0deg)' }, | |
| { transform: 'rotate(-1deg)' }, | |
| { transform: 'rotate(1.5deg)' }, | |
| { transform: 'rotate(-0.5deg)' }, | |
| { transform: 'rotate(0deg)' } | |
| ], { | |
| duration: 1800, | |
| iterations: Infinity, | |
| easing: 'ease-in-out' | |
| }); | |
| // Background clouds parallax animation - different speeds for depth effect | |
| const cloudsMovement = backgroundClouds.animate([ | |
| { transform: 'translateX(0px)' }, | |
| { transform: 'translateX(-100px)' } | |
| ], { | |
| duration: 25000, // Slow movement for background elements | |
| iterations: Infinity, | |
| easing: 'linear' | |
| }); | |
| // Individual cloud elements for varied parallax speeds | |
| const cloudPaths = backgroundClouds.querySelectorAll('path'); | |
| cloudPaths.forEach((cloud, index) => { | |
| // Create individual animations with different speeds | |
| const speed = 20000 + (index * 5000); // 20s, 25s, 30s, 35s | |
| const distance = 80 + (index * 20); // Different distances for parallax | |
| cloud.animate([ | |
| { transform: 'translateX(0px)' }, | |
| { transform: `translateX(-${distance}px)` } | |
| ], { | |
| duration: speed, | |
| iterations: Infinity, | |
| easing: 'linear', | |
| delay: index * 1000 // Stagger start times | |
| }); | |
| }); | |
| // Add subtle breathing effect to the duck body | |
| const breathingEffect = duckMain.animate([ | |
| { transform: 'scale(1)' }, | |
| { transform: 'scale(1.005)' }, | |
| { transform: 'scale(1)' } | |
| ], { | |
| duration: 4000, | |
| iterations: Infinity, | |
| easing: 'ease-in-out' | |
| }); | |
| // Console log for debugging | |
| console.log('Flying duck animations initialized successfully!'); | |
| }); | |
| </script> | |
| </body> | |
| </html> |