<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"> <path stroke-width="0" d="M 70.772 6.021 C 71.996 5.859 73.111 5.859 74.335 6.021 C 75.639 6.193 77.195 6.638 78.373 7.089 C 79.416 7.49 80.19 7.864 81.105 8.515 C 82.148 9.257 83.308 10.174 84.252 11.424 C 85.343 12.87 86.55 14.985 87.102 16.888 C 87.642 18.749 87.658 21.157 87.577 22.707 C 87.516 23.88 87.335 24.523 86.983 25.557 C 86.566 26.785 86.053 28.174 85.083 29.595 C 83.879 31.359 81.15 34.023 79.917 35.237 C 79.158 35.984 78.654 36.271 78.195 36.721 C 77.822 37.087 77.91 37.197 77.304 37.731 C 75.835 39.025 70.731 42.429 67.447 45.094 C 64.02 47.874 59.632 51.716 57.173 54.12 C 55.454 55.802 55.001 56.774 53.432 58.277 C 51.491 60.137 47.84 62.683 46.128 64.393 C 44.912 65.608 44.738 66.551 43.575 67.541 C 42.17 68.736 39.884 70.2 37.993 70.866 C 36.238 71.485 34.414 71.64 32.648 71.579 C 30.891 71.518 28.828 70.997 27.423 70.51 C 26.295 70.119 25.59 69.704 24.691 69.085 C 23.707 68.406 22.689 67.603 21.781 66.531 C 20.75 65.312 20.099 64.352 18.931 62.018 C 16.899 57.958 12.888 48.065 10.855 42.303 C 9.181 37.558 7.734 32.792 7.173 29.714 C 6.804 27.683 6.861 26.519 6.936 25.082 C 7.004 23.765 7.217 22.538 7.53 21.401 C 7.824 20.331 8.113 19.464 8.717 18.431 C 9.434 17.206 10.543 15.683 11.746 14.572 C 12.971 13.44 14.664 12.359 16.021 11.721 C 17.18 11.177 18.23 10.969 19.347 10.771 C 20.447 10.576 21.405 10.431 22.672 10.534 C 24.218 10.659 26.313 10.949 28.017 11.721 C 29.827 12.543 31.812 13.985 33.183 15.462 C 34.494 16.875 35.308 18.277 36.152 20.332 C 37.213 22.915 36.248 29.74 38.646 30.13 C 42.218 30.711 56.24 16.001 59.786 12.731 C 61.421 11.223 61.378 10.722 62.458 9.821 C 63.652 8.826 65.293 7.727 66.734 7.089 C 68.067 6.5 69.467 6.193 70.772 6.021 Z" style="fill: inherit; stroke: inherit; stroke-width: 2px;"></path> </symbol> </defs> <g> <g> <use width="100" height="100" transform="matrix(1, 0, 0, 1, 53.325417, 55.700714)" style="fill: rgb(200, 43, 90);" xlink:href="#symbol-0"></use> <use width="100" height="100" transform="matrix(1, 0, 0, 1, 194.655579, 55.700714)" style="fill: rgb(124, 179, 176);" xlink:href="#symbol-0"></use> <use width="100" height="100" transform="matrix(1, 0, 0, 1, 335.985748, 55.700714)" style="fill: rgb(190, 40, 40);" xlink:href="#symbol-0"></use> </g> <g> <use width="100" height="100" transform="matrix(1, 0, 0, 1, 49.16864, 228.503555)" style="fill: rgb(61, 28, 28);" xlink:href="#symbol-0"></use> <use width="100" height="100" transform="matrix(1, 0, 0, 1, 190.201889, 228.503555)" style="fill: rgb(153, 18, 139);" xlink:href="#symbol-0"></use> <use width="100" height="100" transform="matrix(1, 0, 0, 1, 331.235138, 228.503555)" style="fill: rgb(45, 67, 160);" xlink:href="#symbol-0"></use> </g> </g> </svg>
반응형
'svg' 카테고리의 다른 글
svg pattern : animation (0) | 2023.12.24 |
---|---|
svg marker attributes (0) | 2023.12.24 |
svg symbol : fill attribute stroke attribute (1) | 2023.12.22 |
svg elements transform-box:fill-box ; transform-origin:50% 50% ; (1) | 2023.12.21 |
svg rotation about tx,ty point (1) | 2023.12.19 |