본문 바로가기
svg

svg animation : animateMotion ; This is an awesome feature.

by peach1227 2024. 1. 12.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1023 640" id="svgfile61">
                  <style type="text/css">
rect.background {fill:#eeeeff;stroke:none}
</style>

  <defs>
    <linearGradient id="myGradient" gradientTransform="rotate(90)">
      <stop offset="5%" stop-color="gold" />
      <stop offset="95%" stop-color="red" />
    </linearGradient>
  </defs>
                  <rect class="background" width="1023" height="640"></rect>
                  <g transform="translate(0,10)">
                     <path d="M 200 300  c 0 -80 240 -160 240 -80 c 0 80 240 160 240 80 c 0 -120 -240 -200 -240 -80 c 0 120 -240 200 -240 80" style="fill:none; stroke:black;opacity:1">
                        <animate attributeType="css" attributeName="opacity" from="1" to="0" dur="8s" fill="freeze"></animate>
                     </path>
                     <path transform="scale(2.4,1.2)" style="stroke:none;fill:white;opacity:1.0" d="M300,50 c10,-20,20,-30,25,50 c10,-10,20,-20,25,50 c-10,70,-20,80,-25,50 c-10,60,-20,70,-25,50 c-10,20,-20,40,-25,-50 c-10,50,-20,30,-25,-50 c20,-80,30,-70,25,-50 c20,-70,30,-70,25,-50z"></path>
                     <path id="plane01" d="M0 0  c -2 2 -5 2 -7 2  c 0 10 -1 16 -1 18  c-1 1 -3 1 -4 0  c -1.2 -9 -1.2 -9 -2 -18  l-10 -0.5  c -.4 1.5 -.4 1.5 -1 3  c-1 0.5 -1 0.5 -2 0  c-1 -3 -1 -6 0 -9 c 1 -.5 1 -.5 2 0 c .6 1.5 .6 1.5 1 3  l10 -0.5  c .8 -9 .8 -9 2 -18  c 1 -1 3 -1 4 0 c0 2 1 8 1 18  c 2 0  5 0  7 2z" style="stroke:none;fill:red;stroke-width:1">
                        <animateMotion dur="6s" repeatCount="indefinite" path="M 200 300  c 0 -80 240 -160 240 -80 c 0 80 240 160 240 80 c 0 -120 -240 -200 -240 -80 c 0 120 -240 200 -240 80" rotate="auto"></animateMotion>
                     </path>
                     <path id="plane02" d="M0 0 c16 2 16 14 6 20v8l2 6h-16l2 -6h12v-8h-12v8v-8c-10 -6 -10 -18 6 -20z" style="fill:green;stroke:black;stroke-width:1">
                        <animateMotion begin="1s" dur="6s" repeatCount="indefinite" path="M 200 300  c 0 -80 240 -160 240 -80 c 0 80 240 160 240 80 c 0 -120 -240 -200 -240 -80 c 0 120 -240 200 -240 80" rotate="-30"></animateMotion>
                     </path>
                     <path id="plane03" d="M0 0 c16 2 16 14 6 20v8l2 6h-16l2 -6h12v-8h-12v8v-8c-10 -6 -10 -18 6 -20z" style="fill:lime;stroke:black;stroke-width:1">
                        <animateMotion begin="2s" dur="6s" repeatCount="indefinite" path="M 200 300  c 0 -80 240 -160 240 -80 c 0 80 240 160 240 80 c 0 -120 -240 -200 -240 -80 c 0 120 -240 200 -240 80" rotate="0"></animateMotion>
                     </path>
                     <path id="plane04" d="M0 0 v -5 h20 v-10 l10 15 l-10 15 v-10 h-20 v-5z" style="stroke:none;fill:blue">
                        <animateMotion begin="3.5s" dur="6s" repeatCount="indefinite" path="M 200 300  c 0 -80 240 -160 240 -80 c 0 80 240 160 240 80 c 0 -120 -240 -200 -240 -80 c 0 120 -240 200 -240 80" rotate="auto-reverse"></animateMotion>
                     </path>
<!--additional child-->
                     <path id="plane04-1" d="M0 0 v -5 h20 v-10 l10 15 l-10 15 v-10 h-20 v-5z" style="stroke:none;fill:blue">
                        <animateMotion begin="4.5s" dur="6s" repeatCount="indefinite" path="M 200 300  c 0 -80 240 -160 240 -80 c 0 80 240 160 240 80 c 0 -120 -240 -200 -240 -80 c 0 120 -240 200 -240 80" rotate="auto-reverse"></animateMotion>
                     </path>

                     <path id="plane05" d="M0 0  c -2 2 -5 2 -7 2  c 0 10 -1 16 -1 18  c-1 1 -3 1 -4 0  c -1.2 -9 -1.2 -9 -2 -18  l-10 -0.5  c -.4 1.5 -.4 1.5 -1 3  c-1 0.5 -1 0.5 -2 0  c-1 -3 -1 -6 0 -9 c 1 -.5 1 -.5 2 0 c .6 1.5 .6 1.5 1 3  l10 -0.5  c .8 -9 .8 -9 2 -18  c 1 -1 3 -1 4 0 c0 2 1 8 1 18  c 2 0  5 0  7 2z" style="stroke:none;fill:green">
                        <animateMotion begin="9s" dur="12s" repeatCount="indefinite" path="M70,50 C270,-70,720,250 520,350 C320,450,-120,140,70,50z" rotate="auto"></animateMotion>
                     </path>
                     <path id="plane06" d="M0 0  c -2 2 -5 2 -7 2  c 0 10 -1 16 -1 18  c-1 1 -3 1 -4 0  c -1.2 -9 -1.2 -9 -2 -18  l-10 -0.5  c -.4 1.5 -.4 1.5 -1 3  c-1 0.5 -1 0.5 -2 0  c-1 -3 -1 -6 0 -9 c 1 -.5 1 -.5 2 0 c .6 1.5 .6 1.5 1 3  l10 -0.5  c .8 -9 .8 -9 2 -18  c 1 -1 3 -1 4 0 c0 2 1 8 1 18  c 2 0  5 0  7 2z" style="stroke:none;fill:red">
                        <animateMotion begin="9.5s" dur="12s" repeatCount="indefinite" path="M105,75 C405,-105,1080,375 780,525 C480,675,-180,210,105,75z" rotate="auto"></animateMotion>
                     </path>
                     <path id="plane07" d="M0 0  c -2 2 -5 2 -7 2  c 0 10 -1 16 -1 18  c-1 1 -3 1 -4 0  c -1.2 -9 -1.2 -9 -2 -18  l-10 -0.5  c -.4 1.5 -.4 1.5 -1 3  c-1 0.5 -1 0.5 -2 0  c-1 -3 -1 -6 0 -9 c 1 -.5 1 -.5 2 0 c .6 1.5 .6 1.5 1 3  l10 -0.5  c .8 -9 .8 -9 2 -18  c 1 -1 3 -1 4 0 c0 2 1 8 1 18  c 2 0  5 0  7 2z" style="stroke:none;fill:brown">
                        <animateMotion begin="10s" dur="11s" repeatCount="indefinite" path="M77,55 C297,-77,792,275 572,385 C352,495,-132,154,77,55z" rotate="auto"></animateMotion>
                     </path>
                     <path id="plane08" d="M0 0  c -2 2 -5 2 -7 2  c 0 10 -1 16 -1 18  c-1 1 -3 1 -4 0  c -1.2 -9 -1.2 -9 -2 -18  l-10 -0.5  c -.4 1.5 -.4 1.5 -1 3  c-1 0.5 -1 0.5 -2 0  c-1 -3 -1 -6 0 -9 c 1 -.5 1 -.5 2 0 c .6 1.5 .6 1.5 1 3  l10 -0.5  c .8 -9 .8 -9 2 -18  c 1 -1 3 -1 4 0 c0 2 1 8 1 18  c 2 0  5 0  7 2z" style="stroke:none;fill:orange">
                        <animateMotion begin="10.5s" dur="14s" repeatCount="indefinite" path="M84,60 C324,-84,864,300 624,420 C384,540,-144,168,84,60z" rotate="auto"></animateMotion>
                     </path>
                     <path id="plane09" d="M0 0  c -3 3 -7.5 3 -10.5 3  c 0 15 -1.5 24 -1.5 27  c-1.5 1.5 -4.5 1.5 -6 0  c -1.8 -13.5 -1.8 -13.5 -3 -27  l-15 -0.75  c -.6 2.25 -.6 2.25 -1.5 4.5  c-1.5 0.75 -1.5 0.75 -3 0  c-1.5 -4.5 -1.5 -9 0 -13.5 c 1.5 -.75 1.5 -.75 3 0 c .9 2.25 .9 2.25 1.5 4.5  l15 -0.75  c 1.2 -13.5 1.2 -13.5 3 -27  c 1.5 -1.5 4.5 -1.5 6 0 c0 3 1.5 12 1.5 27  c 3 0  7.5 0  10.5 3z" style="stroke:none;fill:turquoise">
                        <animateMotion begin="11s" dur="18s" repeatCount="indefinite" path="M0,100 C200,-140,650,500 450,700 C250,900,-190,280,0,100z" rotate="auto"></animateMotion>
                     </path>
                     <path id="plane10" d="M0 0  c -2 2 -5 2 -7 2  c 0 10 -1 16 -1 18  c-1 1 -3 1 -4 0  c -1.2 -9 -1.2 -9 -2 -18  l-10 -0.5  c -.4 1.5 -.4 1.5 -1 3  c-1 0.5 -1 0.5 -2 0  c-1 -3 -1 -6 0 -9 c 1 -.5 1 -.5 2 0 c .6 1.5 .6 1.5 1 3  l10 -0.5  c .8 -9 .8 -9 2 -18  c 1 -1 3 -1 4 0 c0 2 1 8 1 18  c 2 0  5 0  7 2z" style="stroke:none;fill:darkgrey">
                        <animateMotion begin="11.5s" dur="12s" repeatCount="indefinite" path="M140,50 C540,-70,1440,250 1040,350 C640,450,-240,140,140,50z" rotate="auto"></animateMotion>
                     </path>
                     <path id="plane11" d="M0 0  c -2 2 -5 2 -7 2  c 0 10 -1 16 -1 18  c-1 1 -3 1 -4 0  c -1.2 -9 -1.2 -9 -2 -18  l-10 -0.5  c -.4 1.5 -.4 1.5 -1 3  c-1 0.5 -1 0.5 -2 0  c-1 -3 -1 -6 0 -9 c 1 -.5 1 -.5 2 0 c .6 1.5 .6 1.5 1 3  l10 -0.5  c .8 -9 .8 -9 2 -18  c 1 -1 3 -1 4 0 c0 2 1 8 1 18  c 2 0  5 0  7 2z" style="stroke:none;fill:yellow">
                        <animateMotion begin="12s" dur="10s" repeatCount="indefinite" path="M70,100 C270,-140,720,500 520,700 C320,900,-120,280,70,100z" rotate="auto"></animateMotion>
                     </path>
                     <path id="plane12" d="M0 0  c -2 2 -5 2 -7 2  c 0 10 -1 16 -1 18  c-1 1 -3 1 -4 0  c -1.2 -9 -1.2 -9 -2 -18  l-10 -0.5  c -.4 1.5 -.4 1.5 -1 3  c-1 0.5 -1 0.5 -2 0  c-1 -3 -1 -6 0 -9 c 1 -.5 1 -.5 2 0 c .6 1.5 .6 1.5 1 3  l10 -0.5  c .8 -9 .8 -9 2 -18  c 1 -1 3 -1 4 0 c0 2 1 8 1 18  c 2 0  5 0  7 2z" style="stroke:none;fill:lightcoral">
                        <animateMotion begin="12.5s" dur="9s" repeatCount="indefinite" path="M70,50 C270,-70,720,250 520,350 C320,450,-120,140,70,50z" rotate="auto"></animateMotion>
                     </path>
                     <path id="plane13" d="M0 0  c -2 2 -5 2 -7 2  c 0 10 -1 16 -1 18  c-1 1 -3 1 -4 0  c -1.2 -9 -1.2 -9 -2 -18  l-10 -0.5  c -.4 1.5 -.4 1.5 -1 3  c-1 0.5 -1 0.5 -2 0  c-1 -3 -1 -6 0 -9 c 1 -.5 1 -.5 2 0 c .6 1.5 .6 1.5 1 3  l10 -0.5  c .8 -9 .8 -9 2 -18  c 1 -1 3 -1 4 0 c0 2 1 8 1 18  c 2 0  5 0  7 2z" style="stroke:none;fill:mediumpurple">
                        <animateMotion begin="13s" dur="8s" repeatCount="indefinite" path="M105,75 C405,-105,1080,375 780,525 C480,675,-180,210,105,75z" rotate="auto"></animateMotion>
                     </path>
                     <path id="plane14" d="M0 0  c -2 2 -5 2 -7 2  c 0 10 -1 16 -1 18  c-1 1 -3 1 -4 0  c -1.2 -9 -1.2 -9 -2 -18  l-10 -0.5  c -.4 1.5 -.4 1.5 -1 3  c-1 0.5 -1 0.5 -2 0  c-1 -3 -1 -6 0 -9 c 1 -.5 1 -.5 2 0 c .6 1.5 .6 1.5 1 3  l10 -0.5  c .8 -9 .8 -9 2 -18  c 1 -1 3 -1 4 0 c0 2 1 8 1 18  c 2 0  5 0  7 2z" style="stroke:none;fill:darkcyan">
                        <animateMotion begin="13.5s" dur="7s" repeatCount="indefinite" path="M77,55 C297,-77,792,275 572,385 C352,495,-132,154,77,55z" rotate="auto"></animateMotion>
                     </path>
                     <path id="plane15" d="M0 0  c -2 2 -5 2 -7 2  c 0 10 -1 16 -1 18  c-1 1 -3 1 -4 0  c -1.2 -9 -1.2 -9 -2 -18  l-10 -0.5  c -.4 1.5 -.4 1.5 -1 3  c-1 0.5 -1 0.5 -2 0  c-1 -3 -1 -6 0 -9 c 1 -.5 1 -.5 2 0 c .6 1.5 .6 1.5 1 3  l10 -0.5  c .8 -9 .8 -9 2 -18  c 1 -1 3 -1 4 0 c0 2 1 8 1 18  c 2 0  5 0  7 2z" style="stroke:none;fill:royalblue">
                        <animateMotion begin="14s" dur="6.5s" repeatCount="indefinite" path="M84,60 C324,-84,864,300 624,420 C384,540,-144,168,84,60z" rotate="auto"></animateMotion>
                     </path>
                     <path id="plane16" d="M0 0  c -3 3 -7.5 3 -10.5 3  c 0 15 -1.5 24 -1.5 27  c-1.5 1.5 -4.5 1.5 -6 0  c -1.8 -13.5 -1.8 -13.5 -3 -27  l-15 -0.75  c -.6 2.25 -.6 2.25 -1.5 4.5  c-1.5 0.75 -1.5 0.75 -3 0  c-1.5 -4.5 -1.5 -9 0 -13.5 c 1.5 -.75 1.5 -.75 3 0 c .9 2.25 .9 2.25 1.5 4.5  l15 -0.75  c 1.2 -13.5 1.2 -13.5 3 -27  c 1.5 -1.5 4.5 -1.5 6 0 c0 3 1.5 12 1.5 27  c 3 0  7.5 0  10.5 3z" style="stroke:none;fill:crimson">
                        <animateMotion begin="14.5s" dur="12s" repeatCount="indefinite" path="M70,50 C270,-70,720,250 520,350 C320,450,-120,140,70,50z" rotate="auto"></animateMotion>
                     </path>
                     <path id="plane17" d="M0 0  c -2 2 -5 2 -7 2  c 0 10 -1 16 -1 18  c-1 1 -3 1 -4 0  c -1.2 -9 -1.2 -9 -2 -18  l-10 -0.5  c -.4 1.5 -.4 1.5 -1 3  c-1 0.5 -1 0.5 -2 0  c-1 -3 -1 -6 0 -9 c 1 -.5 1 -.5 2 0 c .6 1.5 .6 1.5 1 3  l10 -0.5  c .8 -9 .8 -9 2 -18  c 1 -1 3 -1 4 0 c0 2 1 8 1 18  c 2 0  5 0  7 2z" style="stroke:none;fill:fuchsia">
                        <animateMotion begin="15s" dur="6s" repeatCount="indefinite" path="M70,50 C270,-70,720,250 520,350 C320,450,-120,140,70,50z" rotate="auto"></animateMotion>
                     </path>
                     <path id="plane18" d="M0 0  c -2 2 -5 2 -7 2  c 0 10 -1 16 -1 18  c-1 1 -3 1 -4 0  c -1.2 -9 -1.2 -9 -2 -18  l-10 -0.5  c -.4 1.5 -.4 1.5 -1 3  c-1 0.5 -1 0.5 -2 0  c-1 -3 -1 -6 0 -9 c 1 -.5 1 -.5 2 0 c .6 1.5 .6 1.5 1 3  l10 -0.5  c .8 -9 .8 -9 2 -18  c 1 -1 3 -1 4 0 c0 2 1 8 1 18  c 2 0  5 0  7 2z" style="stroke:none;fill:olive">
                        <animateMotion begin="15.5s" dur="4s" repeatCount="indefinite" path="M70,50 C270,-70,720,250 520,350 C320,450,-120,140,70,50z" rotate="auto"></animateMotion>
                     </path>
<!--additional child dragonfly-->
<path id="plane19" d="M -13.7891 2.7196 l 0.018 -0.0011 l 0.018 -0.0011 l 0.0162 -0.008 l 0.0162 -0.008 l 0.018 -0.0011 l 0.018 -0.0011 l 0.0162 -0.008 l 0.0162 -0.008 l 0.018 -0.0011 l 0.018 -0.0011 l 0.0162 -0.008 l 0.0162 -0.008 l 0.018 -0.0011 l 0.018 -0.0011 l 0.0162 -0.008 l 0.0558 0.0034 l 0.0558 0.0034 l 0.0162 -0.008 l 0.018 -0.0011 l 0.018 -0.0011 l 0.0162 -0.008 l -0.0866 -0.05 l -0.0991 -0.0283 l -0.0991 -0.0283 l -0.8545 -0.3201 q -0.8545 -0.3201 -0.9968 -0.3735 t -1.0111 0.0514 t -1.3651 0.1644 t -1.1568 0.0538 t -1.3609 -0.0929 t -1.116 -0.067 t -1.4212 -0.0584 q -1.0125 -0.0765 -1.7423 -0.0822 q -0.7368 -0.0039 -2.15 -0.1559 t -1.7731 -0.1289 t -0.4156 0.0199 l -0.0558 -0.0034 l -0.1299 -0.075 l -0.0011 -0.018 l -0.008 -0.0162 l 0.075 -0.1299 l 0.018 -0.0011 l 0.0162 -0.008 l -0.0011 -0.018 l -0.008 -0.0162 l 0.012 -0.0507 l 0.0164 -0.0483 l -0.0816 -0.0586 l -0.0791 -0.063 l -0.0011 -0.018 l -0.008 -0.0162 l -0.008 -0.0162 l -0.0011 -0.018 l -0.0011 -0.018 l -0.008 -0.0162 l 0.05 -0.0866 l 0.038 -0.0358 l 0.0337 -0.0383 l 0.0483 0.0164 q 0.0507 0.012 0.2865 0.0038 t 0.7446 -0.0897 t 0.9246 -0.1013 t 1.1819 -0.0971 t 1.1349 -0.1357 q 0.3668 -0.0654 1.0511 -0.1206 q 0.6775 -0.0535 1.363 -0.0907 t 1.8207 -0.1035 t 2.1192 -0.1506 q 0.9858 -0.0775 1.9299 0.0172 q 0.9373 0.0966 1.0794 -0.0696 q 0.1353 -0.1644 0.4244 -0.315 t 0.8263 -0.3312 l 0.5373 -0.1805 l 0.018 -0.0011 l 0.0162 -0.008 l 0.0162 -0.008 l 0.018 -0.0011 l 0.018 -0.0011 l 0.0162 -0.008 l 0.0162 -0.008 l 0.018 -0.0011 l 0.018 -0.0011 l 0.0162 -0.008 l 0.0162 -0.008 l 0.018 -0.0011 l 0.018 -0.0011 l 0.0162 -0.008 l 0.0162 -0.008 l 0.018 -0.0011 l 0.018 -0.0011 l 0.0162 -0.008 l 0.0558 0.0034 l 0.0558 0.0034 l -0.1299 -0.075 l -0.1207 -0.0409 l -0.1207 -0.0409 l -0.164 -0.0658 q -0.164 -0.0658 -0.3372 -0.1659 t -0.3614 -0.3241 t -0.2785 -0.5477 q -0.0836 -0.3253 -0.04 -1.0507 t 0.1996 -1.6457 t 0.5462 -2.1961 t 1.6704 -3.9432 t 2.6052 -4.9623 t 1.6708 -2.6438 l 0.3458 -0.3488 l 0.018 -0.0011 l 0.0162 -0.008 l 0.0558 0.0034 l 0.0558 0.0034 l 0.0866 0.05 l 0.0525 0.0592 q 0.0525 0.0592 0.0832 0.1059 t 0.2489 0.519 t 0.2816 1.2423 q 0.0567 0.7718 -0.1926 1.7536 l -0.2494 0.9819 l -0.0283 0.0991 l -0.0283 0.0991 l -0.0283 0.0991 l -0.0283 0.0991 l 0.0841 -0.0958 l 0.0841 -0.0958 l 0.1717 -0.2473 q 0.1717 -0.2473 0.6741 -0.9676 t 1.8873 -2.5188 t 1.8147 -2.2432 l 0.4299 -0.4446 l 0.038 -0.0358 l 0.0337 -0.0383 l 0.1032 0.0712 l 0.1007 0.0755 l 0.1723 0.3016 q 0.1723 0.3016 0.2083 0.8593 q 0.0428 0.5559 -0.094 1.3429 t -0.5353 1.8271 t -1.6387 3.7882 t -1.8645 4.3795 t -1.4181 3.4363 q -0.8006 1.8068 -0.3369 2.1034 t 0.6012 0.3586 l 0.1349 0.0664 l -0.3144 0.4247 q -0.3188 0.4222 -0.4405 0.5828 l -0.1216 0.1607 l -0.1 0.1732 l 0.008 0.0162 l 0.0011 0.018 l 0.0358 0.038 l 0.0383 0.0337 l 0.1847 -0.2398 q 0.1803 -0.2423 0.5115 -0.386 q 0.3244 -0.1418 0.5692 -0.1159 t 0.6004 0.2601 t 0.5059 0.4537 q 0.1485 0.2127 0.1284 0.5476 t -0.3076 0.8328 t -0.6437 0.6849 q -0.3494 0.1851 -0.5634 0.2059 t -0.4522 -0.1167 t -0.3389 -0.213 l -0.1032 -0.0712 l -0.0337 0.0383 l -0.038 0.0358 l -0.15 0.2598 l 0.008 0.0162 l 0.0011 0.018 l 0.0011 0.018 l 0.008 0.0162 l 0.008 0.0162 l 0.0011 0.018 l 0.1223 0.3882 l 0.008 0.0162 l 0.008 0.0162 l 0.0011 0.018 l 0.0308 0.0467 l 0.0308 0.0467 l 0.0358 0.038 l 0.0383 0.0337 l -0.1 0.1732 l -0.1782 -0.0913 q -0.1808 -0.087 -0.3015 -0.1279 l -0.1207 -0.0409 l -0.0162 0.008 l -0.018 0.0011 l -0.018 0.0011 l -0.0162 0.008 l 0.0011 0.018 l 0.008 0.0162 l 0.0116 0.1799 q 0.0116 0.1799 -0.0043 0.2574 l -0.0159 0.0774 l -0.0245 0.0725 l -0.0288 0.07 l -0.0483 -0.0164 l -0.0507 -0.012 l -0.0217 -0.0125 q -0.0217 -0.0125 -0.1873 -0.1255 l -0.1682 -0.1086 l -0.0288 0.07 l -0.0245 0.0725 l -0.0225 0.1891 q -0.0225 0.1891 -0.0146 0.2053 l 0.0011 0.018 l 0.0011 0.018 l 0.008 0.0162 l -0.05 0.0866 l -0.018 0.0011 l -0.0162 0.008 l -0.0958 -0.0841 q -0.0958 -0.0841 -0.1607 -0.1216 l -0.065 -0.0375 l 0.0011 0.018 l 0.008 0.0162 l 0.008 0.0162 l 0.0011 0.018 l 0.0011 0.018 l 0.008 0.0162 l 0.008 0.0162 l 0.0011 0.018 l 0.0308 0.0467 l 0.0308 0.0467 l 0.0011 0.018 l 0.008 0.0162 l 0.5758 1.6027 q 0.5758 1.6027 0.887 2.7638 t 0.4216 2.1198 t 0.1407 1.2764 q 0.032 0.3245 0.5621 1.7564 t 1.0235 2.7272 t 0.7875 2.4061 q 0.3008 1.109 0.3082 1.5463 t -0.1194 1.0569 t -0.3392 0.9877 t -0.4244 0.4651 q -0.2138 0.0902 -0.4119 0.0335 t -0.9008 -1.0397 t -1.5489 -2.2972 q -0.8445 -1.3074 -0.8487 -1.05 t 0.0431 0.7754 t -0.0944 1.0136 t -0.4884 1.0459 t -0.4753 0.6032 q -0.1355 0.0546 -0.3394 -0.0921 t -1.4919 -2.8359 q -1.2898 -2.6961 -2.2202 -4.7344 t -1.1425 -3.1711 t -0.378 -2.8452 t -0.1499 -2.5403 t 0.0478 -0.9827 t 0.3034 -0.5754 t 0.6528 -0.6507 q 0.3743 -0.2284 0.5284 -0.2953 q 0.1566 -0.0713 0.2416 -0.0684 q 0.0825 0.0072 0.0987 -0.0008 z" style="stroke:none;fill:url(#myGradient)">
                        <animateMotion begin="0.5s" dur="4s" repeatCount="indefinite" path="M70,50 C270,-70,720,250 520,350 C320,450,-120,140,70,50z" rotate="auto"></animateMotion>
                     </path>

<path id="plane20" d="M -13.7891 2.7196 l 0.018 -0.0011 l 0.018 -0.0011 l 0.0162 -0.008 l 0.0162 -0.008 l 0.018 -0.0011 l 0.018 -0.0011 l 0.0162 -0.008 l 0.0162 -0.008 l 0.018 -0.0011 l 0.018 -0.0011 l 0.0162 -0.008 l 0.0162 -0.008 l 0.018 -0.0011 l 0.018 -0.0011 l 0.0162 -0.008 l 0.0558 0.0034 l 0.0558 0.0034 l 0.0162 -0.008 l 0.018 -0.0011 l 0.018 -0.0011 l 0.0162 -0.008 l -0.0866 -0.05 l -0.0991 -0.0283 l -0.0991 -0.0283 l -0.8545 -0.3201 q -0.8545 -0.3201 -0.9968 -0.3735 t -1.0111 0.0514 t -1.3651 0.1644 t -1.1568 0.0538 t -1.3609 -0.0929 t -1.116 -0.067 t -1.4212 -0.0584 q -1.0125 -0.0765 -1.7423 -0.0822 q -0.7368 -0.0039 -2.15 -0.1559 t -1.7731 -0.1289 t -0.4156 0.0199 l -0.0558 -0.0034 l -0.1299 -0.075 l -0.0011 -0.018 l -0.008 -0.0162 l 0.075 -0.1299 l 0.018 -0.0011 l 0.0162 -0.008 l -0.0011 -0.018 l -0.008 -0.0162 l 0.012 -0.0507 l 0.0164 -0.0483 l -0.0816 -0.0586 l -0.0791 -0.063 l -0.0011 -0.018 l -0.008 -0.0162 l -0.008 -0.0162 l -0.0011 -0.018 l -0.0011 -0.018 l -0.008 -0.0162 l 0.05 -0.0866 l 0.038 -0.0358 l 0.0337 -0.0383 l 0.0483 0.0164 q 0.0507 0.012 0.2865 0.0038 t 0.7446 -0.0897 t 0.9246 -0.1013 t 1.1819 -0.0971 t 1.1349 -0.1357 q 0.3668 -0.0654 1.0511 -0.1206 q 0.6775 -0.0535 1.363 -0.0907 t 1.8207 -0.1035 t 2.1192 -0.1506 q 0.9858 -0.0775 1.9299 0.0172 q 0.9373 0.0966 1.0794 -0.0696 q 0.1353 -0.1644 0.4244 -0.315 t 0.8263 -0.3312 l 0.5373 -0.1805 l 0.018 -0.0011 l 0.0162 -0.008 l 0.0162 -0.008 l 0.018 -0.0011 l 0.018 -0.0011 l 0.0162 -0.008 l 0.0162 -0.008 l 0.018 -0.0011 l 0.018 -0.0011 l 0.0162 -0.008 l 0.0162 -0.008 l 0.018 -0.0011 l 0.018 -0.0011 l 0.0162 -0.008 l 0.0162 -0.008 l 0.018 -0.0011 l 0.018 -0.0011 l 0.0162 -0.008 l 0.0558 0.0034 l 0.0558 0.0034 l -0.1299 -0.075 l -0.1207 -0.0409 l -0.1207 -0.0409 l -0.164 -0.0658 q -0.164 -0.0658 -0.3372 -0.1659 t -0.3614 -0.3241 t -0.2785 -0.5477 q -0.0836 -0.3253 -0.04 -1.0507 t 0.1996 -1.6457 t 0.5462 -2.1961 t 1.6704 -3.9432 t 2.6052 -4.9623 t 1.6708 -2.6438 l 0.3458 -0.3488 l 0.018 -0.0011 l 0.0162 -0.008 l 0.0558 0.0034 l 0.0558 0.0034 l 0.0866 0.05 l 0.0525 0.0592 q 0.0525 0.0592 0.0832 0.1059 t 0.2489 0.519 t 0.2816 1.2423 q 0.0567 0.7718 -0.1926 1.7536 l -0.2494 0.9819 l -0.0283 0.0991 l -0.0283 0.0991 l -0.0283 0.0991 l -0.0283 0.0991 l 0.0841 -0.0958 l 0.0841 -0.0958 l 0.1717 -0.2473 q 0.1717 -0.2473 0.6741 -0.9676 t 1.8873 -2.5188 t 1.8147 -2.2432 l 0.4299 -0.4446 l 0.038 -0.0358 l 0.0337 -0.0383 l 0.1032 0.0712 l 0.1007 0.0755 l 0.1723 0.3016 q 0.1723 0.3016 0.2083 0.8593 q 0.0428 0.5559 -0.094 1.3429 t -0.5353 1.8271 t -1.6387 3.7882 t -1.8645 4.3795 t -1.4181 3.4363 q -0.8006 1.8068 -0.3369 2.1034 t 0.6012 0.3586 l 0.1349 0.0664 l -0.3144 0.4247 q -0.3188 0.4222 -0.4405 0.5828 l -0.1216 0.1607 l -0.1 0.1732 l 0.008 0.0162 l 0.0011 0.018 l 0.0358 0.038 l 0.0383 0.0337 l 0.1847 -0.2398 q 0.1803 -0.2423 0.5115 -0.386 q 0.3244 -0.1418 0.5692 -0.1159 t 0.6004 0.2601 t 0.5059 0.4537 q 0.1485 0.2127 0.1284 0.5476 t -0.3076 0.8328 t -0.6437 0.6849 q -0.3494 0.1851 -0.5634 0.2059 t -0.4522 -0.1167 t -0.3389 -0.213 l -0.1032 -0.0712 l -0.0337 0.0383 l -0.038 0.0358 l -0.15 0.2598 l 0.008 0.0162 l 0.0011 0.018 l 0.0011 0.018 l 0.008 0.0162 l 0.008 0.0162 l 0.0011 0.018 l 0.1223 0.3882 l 0.008 0.0162 l 0.008 0.0162 l 0.0011 0.018 l 0.0308 0.0467 l 0.0308 0.0467 l 0.0358 0.038 l 0.0383 0.0337 l -0.1 0.1732 l -0.1782 -0.0913 q -0.1808 -0.087 -0.3015 -0.1279 l -0.1207 -0.0409 l -0.0162 0.008 l -0.018 0.0011 l -0.018 0.0011 l -0.0162 0.008 l 0.0011 0.018 l 0.008 0.0162 l 0.0116 0.1799 q 0.0116 0.1799 -0.0043 0.2574 l -0.0159 0.0774 l -0.0245 0.0725 l -0.0288 0.07 l -0.0483 -0.0164 l -0.0507 -0.012 l -0.0217 -0.0125 q -0.0217 -0.0125 -0.1873 -0.1255 l -0.1682 -0.1086 l -0.0288 0.07 l -0.0245 0.0725 l -0.0225 0.1891 q -0.0225 0.1891 -0.0146 0.2053 l 0.0011 0.018 l 0.0011 0.018 l 0.008 0.0162 l -0.05 0.0866 l -0.018 0.0011 l -0.0162 0.008 l -0.0958 -0.0841 q -0.0958 -0.0841 -0.1607 -0.1216 l -0.065 -0.0375 l 0.0011 0.018 l 0.008 0.0162 l 0.008 0.0162 l 0.0011 0.018 l 0.0011 0.018 l 0.008 0.0162 l 0.008 0.0162 l 0.0011 0.018 l 0.0308 0.0467 l 0.0308 0.0467 l 0.0011 0.018 l 0.008 0.0162 l 0.5758 1.6027 q 0.5758 1.6027 0.887 2.7638 t 0.4216 2.1198 t 0.1407 1.2764 q 0.032 0.3245 0.5621 1.7564 t 1.0235 2.7272 t 0.7875 2.4061 q 0.3008 1.109 0.3082 1.5463 t -0.1194 1.0569 t -0.3392 0.9877 t -0.4244 0.4651 q -0.2138 0.0902 -0.4119 0.0335 t -0.9008 -1.0397 t -1.5489 -2.2972 q -0.8445 -1.3074 -0.8487 -1.05 t 0.0431 0.7754 t -0.0944 1.0136 t -0.4884 1.0459 t -0.4753 0.6032 q -0.1355 0.0546 -0.3394 -0.0921 t -1.4919 -2.8359 q -1.2898 -2.6961 -2.2202 -4.7344 t -1.1425 -3.1711 t -0.378 -2.8452 t -0.1499 -2.5403 t 0.0478 -0.9827 t 0.3034 -0.5754 t 0.6528 -0.6507 q 0.3743 -0.2284 0.5284 -0.2953 q 0.1566 -0.0713 0.2416 -0.0684 q 0.0825 0.0072 0.0987 -0.0008 z" style="stroke:none;fill:red">
                        <animateMotion begin="0.7s" dur="4s" repeatCount="indefinite" path="M84,60 C324,-84,864,300 624,420 C384,540,-144,168,84,60z" rotate="auto"></animateMotion>
                     </path>



                     <path style="stroke:none;fill:white" d="M0,-70 c10,-20,20,-30,25,50 c10,-10,20,-20,25,50 c-10,70,-20,80,-25,50 c-10,60,-20,70,-25,50 c-10,20,-20,40,-25,-50 c-10,50,-20,30,-25,-50 c20,-80,30,-70,25,-50 c20,-70,30,-70,25,-50z"></path>
                     <path transform="scale(3.0,0.5)" style="stroke:none;fill:gray;opacity:0.3" d="M100,300 c10,-20,20,-30,25,50 c10,-10,20,-20,25,50 c-10,70,-20,80,-25,50 c-10,60,-20,70,-25,50 c-10,20,-20,40,-25,-50 c-10,50,-20,30,-25,-50 c20,-80,30,-70,25,-50 c20,-70,30,-70,25,-50z"></path>

<!--addtional child-->
<path transform="scale(3.0,0.5) translate(10,50)" style="stroke:none;fill:gray;opacity:0.3" d="M100,300 c10,-20,20,-30,25,50 c10,-10,20,-20,25,50 c-10,70,-20,80,-25,50 c-10,60,-20,70,-25,50 c-10,20,-20,40,-25,-50 c-10,50,-20,30,-25,-50 c20,-80,30,-70,25,-50 c20,-70,30,-70,25,-50z"></path>

                   <path transform="scale(2.0,1.5)" style="stroke:none;fill:white;opacity:0.9" d="M300,200 c10,-20,20,-30,25,50 c10,-10,20,-20,25,50 c-10,70,-20,80,-25,50 c-10,60,-20,70,-25,50 c-10,20,-20,40,-25,-50 c-10,50,-20,30,-25,-50 c20,-80,30,-70,25,-50 c20,-70,30,-70,25,-50z"></path>
  <!--addtional child-->
<path transform="scale(2.0,1.5) translate(-110,100) rotate(30)" style="transform-box:fill-box;transform-origin:50% 50%;stroke:none;fill:white;opacity:0.9" d="M300,200 c10,-20,20,-30,25,50 c10,-10,20,-20,25,50 c-10,70,-20,80,-25,50 c-10,60,-20,70,-25,50 c-10,20,-20,40,-25,-50 c-10,50,-20,30,-25,-50 c20,-80,30,-70,25,-50 c20,-70,30,-70,25,-50z"></path>
                  </g>

<g transform="translate(0,10)"><text y="600">We are the world! This was inspired by https://www.content-animation.org.uk/declarative_animation/motion.htm</text></g>
               </svg>
We are the world! This was inspired by https://www.content-animation.org.uk/declarative_animation/motion.htm
반응형