본문 바로가기
svg

svg animation : symbol

by peach1227 2024. 1. 13.
≪svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:bx="https://boxy-svg.com">
  ≪defs>
    ≪symbol id="symbol-0" viewBox="0 0 100 100" bx:pinned="true">
      ≪g transform="matrix(0.32033, 0, 0, 0.410118, -59.738705, -245.79715)" style="transform-origin: 50% 100%; transform-box: fill-box;">
        ≪g transform="matrix(0.746624, 0, 0, 0.746624, -134.089722, -250.801743)" style="">
          ≪g transform="translate(-1.3145 -10.074)" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="5">
            ≪path d="m299.1 803.71c26.876-51.683 41.893-109.67 45.908-159.66" stroke="#005200">≪/path>
            ≪path d="m302.59 755.66c-34.207-10.389-50.389-40.227-39.437-72.578 24.545-0.19758 49.357 19.999 45.481 61.691" stroke="#005200">≪/path>
            ≪path d="m329.99 652.2c-9.6422 8.5065-24.462 8.0078-32.692 4.5934 4.0224-18.657 16.355-24.037 37.44-19.15" stroke="#005200">≪/path>
            ≪path d="m360.71 657.56c5.2761 7.1251 14.174 14.484 26.591 12.836 2.377-12.997-6.6585-30.157-24.416-29.204" stroke="#005200">≪/path>
            ≪path d="m304.16 596.34c-17.431-11.133-22.724-50.147 8.753-53.294" style="stroke: rgb(214, 12, 32);">≪/path>
            ≪path d="m349.96 542.29c9.6773-20.989-11.242-37.994-19.112-36.626-3.975 0.6913 2.1589 15.029 0.60772 28.349-1.602 13.756-11.948 19.62-16.751 40.837-3.664 16.185 13.336 50.833 35.483 53.909 9.6023 1.3337 22.852-13.775 25.37-30.05" style="stroke: rgb(217, 16, 36);">≪/path>
            ≪path d="m341.38 605.95c-12.604-36.409 5.6354-42.087 18.462-53.088 6.9242-5.9383 21.89-12.525 32.386-21.068 7.5263-6.1259 7.2205-18.541 13.935-14.975 5.554 2.9493 12.415 21.268 0.92426 32.305-12.376 11.887-38.752 4.3556-47.934 24.188" style="stroke: rgb(203, 5, 25);">≪/path>
            ≪path d="m380.26 624.47c17.532-9.5348 32.122-27.061 21.514-54.85" style="stroke: rgb(195, 16, 34);">≪/path>
            ≪path d="m376.14 518.17c-16.573-0.4784-18.025-9.974-13.303-14.987 6.9756-7.4048 24.809-1.8274 29.993 5.6415" style="stroke: rgb(221, 24, 43);">≪/path>
            ≪path d="m350.12 771.79c23.448 2.8666 59.444-4.8698 62.498-42.659-37.142-7.859-63.36 5.3374-78.2 36.107" stroke="#005200">≪/path>
          ≪/g>
        ≪/g>
        ≪animateTransform type="skewX" additive="sum" attributeName="transform" values="0; 5;0;-5;0" begin="0s" dur="2s" fill="freeze" repeatCount="indefinite">≪/animateTransform>
      ≪/g>
    ≪/symbol>
    ≪linearGradient gradientUnits="userSpaceOnUse" x1="360.804" y1="540.5" x2="360.804" y2="564.5" id="gradient-0">
      ≪stop offset="0" style="stop-color: rgb(84.706% 84.706% 84.706%)">≪/stop>
      ≪stop offset="1" style="stop-color: rgb(48.42% 48.42% 48.42%)">≪/stop>
    ≪/linearGradient>
    ≪radialGradient gradientUnits="userSpaceOnUse" cx="296.021" cy="221.496" r="8.61" id="gradient-1">
      ≪stop offset="0" style="stop-color: rgb(77.647% 22.353% 22.353%)">≪/stop>
      ≪stop offset="1" style="stop-color: rgb(55.217% 0% 7.1842%)">≪/stop>
    ≪/radialGradient>
  ≪/defs>
  ≪g transform="matrix(0.342034, 0, 0, 0.342034, 213.609695, -18.580887)">
    ≪defs>≪/defs>
    ≪g transform="translate(-214.95 -451.89)">
      ≪g transform="translate(-1.3145 -10.074)" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="5">
        ≪path d="m299.1 803.71c26.876-51.683 41.893-109.67 45.908-159.66" stroke="#005200">≪/path>
        ≪path d="m302.59 755.66c-34.207-10.389-50.389-40.227-39.437-72.578 24.545-0.19758 49.357 19.999 45.481 61.691" stroke="#005200">≪/path>
        ≪path d="m329.99 652.2c-9.6422 8.5065-24.462 8.0078-32.692 4.5934 4.0224-18.657 16.355-24.037 37.44-19.15" stroke="#005200">≪/path>
        ≪path d="m360.71 657.56c5.2761 7.1251 14.174 14.484 26.591 12.836 2.377-12.997-6.6585-30.157-24.416-29.204" stroke="#005200">≪/path>
        ≪path d="m304.16 596.34c-17.431-11.133-22.724-50.147 8.753-53.294" stroke="#99000f">≪/path>
        ≪path d="m349.96 542.29c9.6773-20.989-11.242-37.994-19.112-36.626-3.975 0.6913 2.1589 15.029 0.60772 28.349-1.602 13.756-11.948 19.62-16.751 40.837-3.664 16.185 13.336 50.833 35.483 53.909 9.6023 1.3337 22.852-13.775 25.37-30.05" stroke="#99000f">≪/path>
        ≪path d="m341.38 605.95c-12.604-36.409 5.6354-42.087 18.462-53.088 6.9242-5.9383 21.89-12.525 32.386-21.068 7.5263-6.1259 7.2205-18.541 13.935-14.975 5.554 2.9493 12.415 21.268 0.92426 32.305-12.376 11.887-38.752 4.3556-47.934 24.188" stroke="#99000f">≪/path>
        ≪path d="m380.26 624.47c17.532-9.5348 32.122-27.061 21.514-54.85" stroke="#99000f">≪/path>
        ≪path d="m376.14 518.17c-16.573-0.4784-18.025-9.974-13.303-14.987 6.9756-7.4048 24.809-1.8274 29.993 5.6415" stroke="#99000f">≪/path>
        ≪path d="m350.12 771.79c23.448 2.8666 59.444-4.8698 62.498-42.659-37.142-7.859-63.36 5.3374-78.2 36.107" stroke="#005200">≪/path>
      ≪/g>
    ≪/g>
  ≪/g>
  ≪use width="100" height="100" transform="matrix(1, 0, 0, 1, 352.612823, 181.591446)" xlink:href="#symbol-0">≪/use>
  ≪use width="100" height="100" transform="matrix(1, 0, 0, 1, 273.040375, 267.695953)" xlink:href="#symbol-0">≪/use>
  ≪use width="100" height="100" transform="matrix(1, 0, 0, 1, 147.743469, 338.954865)" xlink:href="#symbol-0">≪/use>
  ≪use width="100" height="100" transform="matrix(1, 0, 0, 1, 375.771973, 47.980995)" xlink:href="#symbol-0">≪/use>
  ≪use width="100" height="100" transform="matrix(1, 0, 0, 1, 125.771973, 32.541569)" xlink:href="#symbol-0">≪/use>
  ≪use width="100" height="100" transform="matrix(1, 0, 0, 1, 15.91449, 163.776718)" xlink:href="#symbol-0">≪/use>
  ≪use width="100" height="100" transform="matrix(1, 0, 0, 1, -3.087886, 32.541569)" xlink:href="#symbol-0">≪/use>
  ≪use width="100" height="100" transform="matrix(1, 0, 0, 1, 239.192398, 391.211395)" xlink:href="#symbol-0">≪/use>
  ≪path style="stroke: rgb(0, 0, 0); fill: none;" d="M 11.876 370.546 L 70.071 295.131 L 157.957 217.34 C 157.957 217.34 137.173 173.99 139.549 170.428 C 141.925 166.866 198.337 146.675 199.525 146.081 C 200.713 145.487 267.221 127.078 267.221 127.078 C 267.221 127.078 307.007 67.696 307.601 67.102 C 308.195 66.508 342.637 19.596 342.637 19.596">≪/path>
  ≪path style="stroke: rgb(0, 0, 0); fill: none;" d="M 91.449 485.748 L 124.703 397.268 L 182.304 318.29 L 239.311 307.007 C 239.311 307.007 289.192 258.314 290.38 256.532 C 291.568 254.75 332.542 208.432 334.323 207.245 C 336.104 206.058 359.857 163.895 361.639 160.926 C 363.421 157.957 374.109 124.703 374.703 121.14 C 375.297 117.577 391.924 57.601 391.924 57.601 L 437.648 24.347">≪/path>
  ≪rect x="204.276" y="191.211" width="24.347" height="31.473" style="stroke: rgb(0, 0, 0); fill: rgb(218, 81, 81);">≪/rect>
  ≪ellipse style="stroke: rgb(0, 0, 0); fill: rgb(171, 117, 164);" cx="294.537" cy="159.739" rx="17.815" ry="13.064">≪/ellipse>
  ≪path d="M 296.022 214.964 L 304.632 228.028 L 287.411 228.028 L 296.022 214.964 Z" style="stroke: rgb(0, 0, 0); fill: url(#gradient-1);" bx:shape="triangle 287.411 214.964 17.221 13.064 0.5 0 1@ba80e1fe">≪/path>
  ≪path d="M 351.247 105.701 m -10.986 0 a 10.986 13.658 0 1 0 21.972 0 a 10.986 13.658 0 1 0 -21.972 0 Z M 351.247 105.701 m -6.591 0 a 6.591 8.195 0 0 1 13.182 0 a 6.591 8.195 0 0 1 -13.182 0 Z" style="stroke: rgb(0, 0, 0); fill: rgb(202, 71, 71);" bx:shape="ring 351.247 105.701 6.591 8.195 10.986 13.658 1@d173c025">≪/path>
  ≪path style="stroke: rgb(0, 0, 0); fill: rgb(216, 216, 216);" transform="matrix(0.593824, 0, 0, 0.818515, -34.441803, -67.214485)" d="M 698 148.5 A 18.5 18.5 0 1 1 679.5 130 L 679.5 148.5 Z" bx:shape="pie 679.5 148.5 0 18.5 90 360 1@39952469">≪/path>
  ≪path style="stroke: rgb(0, 0, 0); fill: url(#gradient-0);" transform="matrix(0.593824, 0, 0, 2.400039, -34.441803, -1031.781982)" d="M 349.608 546.5 A 12 12 0 1 1 349.608 558.5 A 8.781 8.781 0 1 0 349.608 546.5 Z" bx:shape="crescent 360 552.5 12 300 0.7 1@394186c2">≪/path>
  ≪path d="M 49.881 432.304 Q 49.881 431.996 50.161 431.818 Q 50.461 431.629 50.852 431.743 Q 51.288 431.871 51.564 432.304 Q 51.873 432.791 51.824 433.426 Q 51.768 434.135 51.283 434.732 Q 50.746 435.394 49.881 435.669 Q 48.933 435.971 47.918 435.704 Q 46.816 435.414 45.995 434.547 Q 45.111 433.613 44.834 432.304 Q 44.536 430.902 45.024 429.5 Q 45.544 428.007 46.796 426.961 Q 48.124 425.854 49.881 425.574 Q 51.735 425.279 53.526 425.99 Q 55.409 426.737 56.681 428.378 Q 58.013 430.097 58.294 432.304 Q 58.587 434.609 57.652 436.791 Q 56.678 439.063 54.648 440.561 Q 52.538 442.117 49.881 442.399 Q 47.125 442.691 44.553 441.532 Q 41.89 440.332 40.167 437.912 Q 38.386 435.411 38.104 432.304 Q 37.812 429.097 39.196 426.135 Q 40.622 423.082 43.431 421.133 Q 46.323 419.127 49.881 418.844 Q 53.539 418.553 56.891 420.162 Q 60.335 421.814 62.509 425.013 Q 64.74 428.296 65.024 432.304 Q 65.314 436.412 63.481 440.156 Q 61.603 443.989 58.013 446.389 Q 54.34 448.845 49.881 449.129 Q 45.322 449.419 41.188 447.361 Q 36.964 445.257 34.339 441.277 Q 31.658 437.214 31.374 432.304 Q 31.084 427.294 33.367 422.77 Q 35.696 418.156 40.066 415.305 Q 44.521 412.398 49.881 412.114 Q 49.749 412.121 49.881 412.114" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);" bx:shape="spiral 49.881 432.304 0 20.19 0 1080 1@2df9eda1">≪/path>
  ≪path style="stroke: rgb(0, 0, 0); fill: rgb(180, 84, 84);" transform="matrix(0.593824, 0, 0, 0.706169, -34.441803, -90.132889)" d="M 453.237 482.5 L 457.763 482.5 L 458.719 489.414 A 12.025 12.025 0 0 1 461.417 490.531 L 466.981 486.318 L 470.182 489.519 L 465.969 495.083 A 12.025 12.025 0 0 1 467.086 497.781 L 474 498.737 L 474 503.263 L 467.086 504.219 A 12.025 12.025 0 0 1 465.969 506.917 L 470.182 512.481 L 466.981 515.682 L 461.417 511.469 A 12.025 12.025 0 0 1 458.719 512.586 L 457.763 519.5 L 453.237 519.5 L 452.281 512.586 A 12.025 12.025 0 0 1 449.583 511.469 L 444.019 515.682 L 440.818 512.481 L 445.031 506.917 A 12.025 12.025 0 0 1 443.914 504.219 L 437 503.263 L 437 498.737 L 443.914 497.781 A 12.025 12.025 0 0 1 445.031 495.083 L 440.818 489.519 L 444.019 486.318 L 449.583 490.531 A 12.025 12.025 0 0 1 452.281 489.414 Z M 455.5 495.45 A 5.55 5.55 0 0 0 455.5 506.55 A 5.55 5.55 0 0 0 455.5 495.45" bx:shape="cog 455.5 501 5.55 12.025 18.5 0.38 8 1@cc914903">≪/path>
≪/svg>
반응형