본문 바로가기
svg

svg path animateMotion rotate attribute 2 : groupified object

by peach1227 2023. 10. 1.

<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <clipPath id="e">
      <rect x="11.928" y="86.692" width="232.84" height="261.32"></rect>
    </clipPath>
    <radialGradient id="f" cx="427.52" cy="295.49" r="13.423" gradientTransform="matrix(-3.0555 2.952 -1.5398 -1.5277 2139.4 -549.39)" gradientUnits="userSpaceOnUse">
      <stop stop-color="#f15b5a" stop-opacity=".289" offset="0"></stop>
      <stop stop-color="#f15b5a" stop-opacity="0" offset="1"></stop>
    </radialGradient>
    <rect id="d" x="11.928" y="86.692" width="232.84" height="261.32"></rect>
  </defs>

<g style="transform-origin:50%;transform:translate(-250px,-200px)">
<animateMotion dur="3s" repeatCount="indefinite" rotate="auto"><mpath href="#path-heart"/></animateMotion>
  <g transform="matrix(0.30348, 0, 0, 0.30348, 163.828705, 88.751411)">
    <defs></defs>
    <g clip-path="url(#e)" fill="#82d4f2" fill-opacity=".352" stroke="#010101" stroke-width="6.123">
      <path d="m188.18 271.8c26.352 1.698-227.56 15.87-119.48-79.223 132.24-116.35 312.52 516.94 129.66 66.221"></path>
      <path d="m172.35 288.39s-66.019-154.76 6.18-170.37c120.74-26.105 4.406 168.69 6.463 163.52"></path>
    </g>
    <g fill="#010101">
      <path d="m359.29 175.08c-8.346-6.814-9.602-19.874-12.453-30.026-5.055-21.475-8.421-44.89 0.23-65.823 9.02-16.796 24.918-38.643 45.431-39.703l3.411 3.218c-20.529-0.095-36.746 22.356-45.447 38.973-8.534 20.906-5.08 44.303 0.089 65.674 1.044 3.758 12.928 33.033 5.429 24.178l3.31 3.51z"></path>
      <path d="m398.36 49.683c-5.308-4.222-6.795-11.684-3.329-16.667 3.472-4.983 10.585-5.601 15.895-1.378 8e-3 7e-3 0.018 0.014 0.027 0.022 5.307 4.221 6.797 11.685 3.33 16.668-3.47 4.982-10.585 5.6-15.894 1.377-0.01-6e-3 -0.02-0.014-0.03-0.022z"></path>
      <path d="m318.85 151.53c-7.639-7.311-10.174-19.62-13.691-29.407-6.626-20.584-31.795-28.679-27.107-47.179 5.475-14.604 42.883-36.074 59.609-34.695l3.171 3.391c-16.87-2.458-49.975 21.36-55.202 35.835-4.601 18.487 16.14 24.753 22.851 45.255 1.292 3.62 14.43 32.26 7.247 23.146l3.12 3.65z"></path>
      <path d="m336.26 42.855c-4.891-4.484-6.89-11.628-4.462-15.955 2.428-4.325 8.362-4.198 13.254 0.286 0.01 9e-3 0.018 0.017 0.026 0.025 4.895 4.485 6.89 11.628 4.462 15.954-2.428 4.327-8.361 4.198-13.254-0.288-0.01-6e-3 -0.02-0.013-0.03-0.022z"></path>
      <path d="m314.03 326.04l0.879-0.291c3.707 2.362 4.352 7.655 5.915 11.539 2.497 7.646 5.604 15.077 7.142 23.101 1.469 4.973 1.185 13.23 3.23 17.996-1.869 0.627-4.382-0.248-4.096-3.315-0.071-9.902-5.903-26.21-8.915-35.158-1.788-4.529-1.365-9.906-4.155-13.872z"></path>
      <path d="m323.81 318.86c2.003 3.532 4.054 9.991 5.503 13.806 2.125 6.173 3.027 12.778 4.18 19.282 0.159 2.032 0.064 13.202-1.067 14.991-2.538-1.366-1.606-5.313-1.884-9.109-0.872-6.425-2.981-18.795-4.739-24.946-1.86-4.784-2.139-10.396-4.756-14.799 1.04 1.043 1.945-0.468 2.763 0.775z"></path>
      <path d="m283.97 365.56l1.057-0.336c4.516 2.905 5.375 9.293 7.319 13.998 3.13 9.254 6.997 18.258 8.977 27.954 1.853 6.015 1.633 15.968 4.175 21.743-2.247 0.729-5.298-0.364-5-4.058-0.234-11.94-7.526-31.686-11.299-42.518-2.229-5.484-1.798-11.957-5.229-16.783z"></path>
      <path d="m296.56 360.68c2.475 4.287 5.045 12.102 6.857 16.723 2.661 7.476 3.849 15.45 5.341 23.308 0.225 2.448 0.275 15.913-1.063 18.054-3.088-1.686-2.022-6.425-2.418-11.011-1.146-7.759-3.881-22.7-6.099-30.142-2.321-5.793-2.739-12.564-5.971-17.912 1.27 1.28 2.34-0.54 3.35 0.98z"></path>
      <path d="m245 396.59l1.057-0.338c4.515 2.904 5.376 9.293 7.319 13.997 3.131 9.257 6.998 18.261 8.979 27.955 1.848 6.017 1.629 15.967 4.174 21.743-2.248 0.728-5.297-0.364-5-4.061-0.234-11.936-7.527-31.683-11.3-42.515-2.228-5.479-1.797-11.956-5.229-16.781z"></path>
      <path d="m261.25 393.13c2.475 4.289 5.045 12.102 6.856 16.722 2.662 7.475 3.85 15.453 5.34 23.311 0.227 2.45 0.277 15.909-1.063 18.054-3.089-1.684-2.021-6.429-2.417-11.013-1.146-7.757-3.881-22.698-6.1-30.14-2.319-5.791-2.741-12.564-5.971-17.912 1.27 1.28 2.34-0.53 3.35 0.98z"></path>
    </g>
    <g stroke="#010101">
      <g fill="#272626">
        <path d="m166.58 272.53c25.944-34.866 73.261-43.625 105.62-19.549 32.36 24.077 37.566 71.919 11.622 106.79-25.945 34.868-78.18 57.499-110.54 33.422-32.36-24.07-32.65-85.79-6.7-120.66z" stroke-width="9"></path>
        <path d="m248.36 306.16c-30.432-22.638-39.92-61.395-21.194-86.564 18.726-25.168 58.575-27.215 89.004-4.574 30.431 22.642 39.919 61.401 21.193 86.566-18.725 25.169-58.572 27.217-89.003 4.572z" stroke-width="3.385"></path>
      </g>
      <path d="m440.24 231.05c56.798-124.51-96.63-129.25-109.11-128.01-49.089 4.871-114.67 39.615-80.547 130.28 22.64 50.68 115.39 119 189.66-2.27z" fill="#fee800" stroke-width="6.123"></path>
      <path d="m289.53 110.77c19.228-3.722 44.783 8.713 51.565 43.764 6.78 35.048-14.34 61.464-33.571 65.181-19.231 3.721-40.318-21.675-47.099-56.724-6.78-35.05 9.87-48.5 29.1-52.22z" fill="#fff" stroke-width="5"></path>
    </g>
    <path d="m337.09 300.85c-11.414-11.326-2.305-38.248 20.345-60.133 22.65-21.884 50.267-30.443 61.683-19.118 11.415 11.326 2.305 38.247-20.348 60.13-22.65 21.885-50.266 30.443-61.68 19.121z" fill="url(#f)"></path>
    <g fill="#fee800">
      <path d="m178.28 261.8c11.182 58.317 70.843 100.28 108.23 93.352 6.754-8.445 10.34-21.22 10.656-26.829-49.757-2.145-86.406-67.101-91.655-83.164-9.787 2.655-20.031 9.188-27.23 16.641z"></path>
      <path d="m149.96 319.76c12.904 52.448 49.241 74.29 81.933 77.904 11.982-5.008 25.87-12.532 33.72-19.148-55.81-3.788-97.188-63.949-102.82-98.173-8.88 13.34-12.42 36.75-12.83 39.42z"></path>
    </g>
    <path d="m382.22 82.492c19.231-3.722 44.784 8.713 51.566 43.763 6.781 35.049-14.34 61.464-33.571 65.181-19.231 3.721-40.317-21.675-47.099-56.725-6.78-35.056 9.87-48.509 29.1-52.228z" fill="#fff" stroke="#010101" stroke-width="5"></path>
    <path d="m327.3 239.39c1.942 2.965 3.836 5.539 5.966 7.586 2.117 2.05 4.357 3.582 6.717 4.696 4.709 2.203 9.907 3.004 15.482 3.052 5.57 0.048 11.413-0.684 17.483-1.665 6.102-0.964 12.319-2.394 19.306-3.34-2.084 2.876-4.585 5.274-7.279 7.456-2.708 2.16-5.659 4.017-8.797 5.582-6.269 3.109-13.361 5.021-20.832 4.965-3.725-0.035-7.545-0.589-11.237-1.85-3.684-1.242-7.24-3.246-10.141-5.979-2.902-2.727-5.089-6.151-6.213-9.751-1.11-3.61-1.3-7.31-0.46-10.75z" fill="#1d1d1b"></path>
    <path d="m286.03 192.21c4.028 12.519 14.987 21.306 24.513 19.53 9.528-1.775 14.021-13.451 9.993-25.97-4.028-12.522-15.07-21.194-24.594-19.416-9.531 1.779-13.944 13.332-9.912 25.856zm30.848-8.934c1.209 3.758-0.304 7.298-3.313 7.862-3.008 0.561-6.379-2.068-7.588-5.825-1.218-3.757 0.187-7.278 3.19-7.84 3.013-0.562 6.497 2.048 7.711 5.803z" fill="#010101"></path>
    <path d="m379.59 162.92c4.031 12.519 14.988 21.305 24.517 19.528 9.526-1.776 14.019-13.45 9.991-25.97-4.023-12.522-15.07-21.195-24.594-19.415-9.529 1.779-13.943 13.331-9.914 25.857zm30.85-8.936c1.207 3.758-0.303 7.298-3.313 7.862-3.009 0.562-6.383-2.068-7.59-5.826-1.217-3.756 0.187-7.277 3.189-7.841 3.016-0.558 6.5 2.05 7.714 5.805z" fill="#010101"></path>
  </g>

</g>
<path id="path-heart" d="M250,200 q0,-50 100,-50 t100,100c0,50 -100,100 -200,150
c-100,-50 -200,-100 -200,-150q0,-100 100,-100t100,50z" fill="none" stroke="red" style=""/>
<text x="230" y="250">LOVE</text>
</svg>
LOVE
반응형