<svg width="" height="" viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:bx="https://boxy-svg.com">
<defs> <path id="flight1" style="fill: none; stroke: rgb(0, 0, 0);" d="M 37.44 449.275 C 23.435 435.27 29.244 355.331 39.251 365.338 C 35.775 339.846 145.663 207.571 146.739 215.459 C 140.546 231.27 297.186 291.722 313.406 248.188 C 287.056 228.772 293.899 39.719 328.503 65.217 C 336.265 -5.751 460.784 115.784 457.729 143.719 C 500.95 149.893 471.277 323.623 463.164 322.464"></path></defs>
<g>
<path d="M86.3068 16.9072L36.6351 54.0893L30.45 72.5729L25.9844 48.0953L86.3068 16.9072Z" fill="url(#paint0_linear)"></path>
<path d="M86.783 16.9312C86.783 16.8595 86.783 16.7879 86.7353 16.7163C86.7353 16.7163 86.7353 16.6924 86.7114 16.6924C86.7114 16.6924 86.7114 16.6685 86.6875 16.6685C86.6875 16.6446 86.6636 16.6446 86.6636 16.6207C86.6636 16.6207 86.6636 16.6207 86.6636 16.5969C86.6397 16.573 86.6159 16.5491 86.5681 16.5252C86.5681 16.5252 86.5442 16.5252 86.5442 16.5013C86.5203 16.4774 86.4965 16.4774 86.4726 16.4536H86.4487C86.4248 16.4536 86.3771 16.4297 86.3293 16.4297C86.3293 16.4297 86.3293 16.4297 86.3054 16.4297C86.2815 16.4297 86.2338 16.4297 86.2099 16.4297C86.2099 16.4297 86.2099 16.4297 86.186 16.4297L1.79197 33.7431C1.60093 33.7909 1.45764 33.9342 1.40988 34.1252C1.386 34.3163 1.48152 34.5073 1.64869 34.6267L25.5532 48.4058L29.995 72.6446C29.995 72.6685 30.0188 72.6924 30.0188 72.7163C30.0188 72.7163 30.0188 72.7163 30.0188 72.7401C30.0188 72.764 30.0427 72.7879 30.0427 72.8118C30.0666 72.8357 30.0905 72.8595 30.1144 72.8834C30.1382 72.9073 30.1621 72.9312 30.2099 72.9551C30.2099 72.9551 30.2338 72.9551 30.2338 72.9789C30.2576 73.0028 30.3054 73.0028 30.3293 73.0267C30.3532 73.0267 30.377 73.0267 30.4009 73.0506H30.4248C30.4726 73.0506 30.5203 73.0506 30.5681 73.0267C30.592 73.0267 30.592 73.0028 30.6159 73.0028C30.6397 73.0028 30.6636 72.9789 30.6875 72.9789L48.2159 61.9222L65.8397 72.9789C65.9591 73.0506 66.1024 73.0745 66.2457 73.0267C66.389 72.9789 66.4845 72.8834 66.5323 72.7401L86.7114 17.0745C86.7114 17.0506 86.7353 17.0028 86.7353 16.9789C86.783 16.9551 86.783 16.9551 86.783 16.9312ZM83.0338 18.0774L25.983 47.57L3.20093 34.4357L83.0338 18.0774ZM36.3472 53.7073C36.3233 53.7073 36.3233 53.7312 36.3233 53.7312L36.2994 53.7551C36.2756 53.7789 36.2756 53.8028 36.2517 53.8028C36.2517 53.8028 36.2517 53.8267 36.2278 53.8267C36.2039 53.8506 36.2039 53.8983 36.18 53.9222L30.6159 70.6625L26.5084 48.358L81.4099 19.9879L36.3472 53.7073ZM31.3323 71.4506L36.8726 54.8058L47.3323 61.373L31.3323 71.4506ZM65.8875 71.8566L37.4696 54.0416L85.3263 18.2446L65.8875 71.8566Z" fill="#00112C"></path>
<animateMotion path="M 0 0 C 0 0 116.716 41.854 121.347 108.156 C 122.337 122.324 253.847 88.691 310.734 101.828 C 370.356 115.596 415.171 278.273 384.42 297.168" calcMode="linear" begin="0s" dur="2s" fill="freeze" repeatCount="indefinite" rotate="auto"></animateMotion>
</g>
<g id="g2">
<path d="M86.3068 16.9072L36.6351 54.0893L30.45 72.5729L25.9844 48.0953L86.3068 16.9072Z" fill="url(#paint0_linear2)"></path>
<path d="M86.783 16.9312C86.783 16.8595 86.783 16.7879 86.7353 16.7163C86.7353 16.7163 86.7353 16.6924 86.7114 16.6924C86.7114 16.6924 86.7114 16.6685 86.6875 16.6685C86.6875 16.6446 86.6636 16.6446 86.6636 16.6207C86.6636 16.6207 86.6636 16.6207 86.6636 16.5969C86.6397 16.573 86.6159 16.5491 86.5681 16.5252C86.5681 16.5252 86.5442 16.5252 86.5442 16.5013C86.5203 16.4774 86.4965 16.4774 86.4726 16.4536H86.4487C86.4248 16.4536 86.3771 16.4297 86.3293 16.4297C86.3293 16.4297 86.3293 16.4297 86.3054 16.4297C86.2815 16.4297 86.2338 16.4297 86.2099 16.4297C86.2099 16.4297 86.2099 16.4297 86.186 16.4297L1.79197 33.7431C1.60093 33.7909 1.45764 33.9342 1.40988 34.1252C1.386 34.3163 1.48152 34.5073 1.64869 34.6267L25.5532 48.4058L29.995 72.6446C29.995 72.6685 30.0188 72.6924 30.0188 72.7163C30.0188 72.7163 30.0188 72.7163 30.0188 72.7401C30.0188 72.764 30.0427 72.7879 30.0427 72.8118C30.0666 72.8357 30.0905 72.8595 30.1144 72.8834C30.1382 72.9073 30.1621 72.9312 30.2099 72.9551C30.2099 72.9551 30.2338 72.9551 30.2338 72.9789C30.2576 73.0028 30.3054 73.0028 30.3293 73.0267C30.3532 73.0267 30.377 73.0267 30.4009 73.0506H30.4248C30.4726 73.0506 30.5203 73.0506 30.5681 73.0267C30.592 73.0267 30.592 73.0028 30.6159 73.0028C30.6397 73.0028 30.6636 72.9789 30.6875 72.9789L48.2159 61.9222L65.8397 72.9789C65.9591 73.0506 66.1024 73.0745 66.2457 73.0267C66.389 72.9789 66.4845 72.8834 66.5323 72.7401L86.7114 17.0745C86.7114 17.0506 86.7353 17.0028 86.7353 16.9789C86.783 16.9551 86.783 16.9551 86.783 16.9312ZM83.0338 18.0774L25.983 47.57L3.20093 34.4357L83.0338 18.0774ZM36.3472 53.7073C36.3233 53.7073 36.3233 53.7312 36.3233 53.7312L36.2994 53.7551C36.2756 53.7789 36.2756 53.8028 36.2517 53.8028C36.2517 53.8028 36.2517 53.8267 36.2278 53.8267C36.2039 53.8506 36.2039 53.8983 36.18 53.9222L30.6159 70.6625L26.5084 48.358L81.4099 19.9879L36.3472 53.7073ZM31.3323 71.4506L36.8726 54.8058L47.3323 61.373L31.3323 71.4506ZM65.8875 71.8566L37.4696 54.0416L85.3263 18.2446L65.8875 71.8566Z" fill="#00112C"></path>
<animateMotion calcMode="linear" begin="0s" dur="2s" fill="freeze" repeatCount="indefinite" rotate="auto">
<mpath href="#flight1"/>
</animateMotion>
</g>
<defs>
<linearGradient id="paint0_linear" x1="25.9844" y1="16.9072" x2="86.3068" y2="16.9072" gradientUnits="userSpaceOnUse">
<stop stop-color="#A177FF"></stop>
<stop offset="1" stop-color="#22CEFF"></stop>
</linearGradient>
<linearGradient id="paint0_linear2" x1="25.9844" y1="16.9072" x2="86.3068" y2="16.9072" gradientUnits="userSpaceOnUse">
<stop stop-color="#A177FF"></stop>
<stop offset="1" stop-color="#FFCE22"></stop>
</linearGradient>
</defs>
</svg>
반응형
'svg' 카테고리의 다른 글
| svg animation : using g transform attribute (1) | 2024.01.09 |
|---|---|
| svg bike animation : This is for reference (0) | 2024.01.05 |
| svg patternTransform attribute : translate(tx,xy) (1) | 2023.12.30 |
| svg transform : translate, rotate with an example (0) | 2023.12.29 |
| svg pattern : patternTransform attribute with matrix value (0) | 2023.12.29 |
