Как задать вращения path по кругу на дном месте?

Question

[JsNoobUser]

Есть такой svg:

<svg width="1069" height="490" viewBox="0 0 1069 490" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path class="decor-arrow decor-arrow-3" data-start="600" d="M841.464 432.49C841.464 432.49 855.182 437.63 863.677 452.31C872.172 466.989 875.206 485.084 875.206 485.084M875.206 485.084L884.467 465.891M875.206 485.084L857.938 473.874" stroke="#6AB1FF" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/>
    <path class="decor-arrow decor-arrow-1" data-start="200" d="M271.26 127.26C271.26 127.26 248.956 126.8 229.339 109.999C209.722 93.1976 196.228 68.7318 196.228 68.7318M196.228 68.7318L193.803 86.8691M196.228 68.7318L214.303 73.8691" stroke="#6AB1FF" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/>
    <path class="decor-star" data-start="200" d="M868.5 21L870.291 28.2532C871.807 34.3964 876.604 39.1929 882.747 40.7094L890 42.5L882.747 44.2906C876.604 45.8071 871.807 50.6036 870.291 56.7468L868.5 64L866.709 56.7468C865.193 50.6036 860.396 45.8071 854.253 44.2906L847 42.5L854.253 40.7094C860.396 39.1929 865.193 34.3964 866.709 28.2532L868.5 21Z" fill="#6AB1FF" stroke="#6AB1FF" stroke-width="2"/>
    <path class="decor-star" data-start="200" d="M30.9287 413.31L28.2843 417.688C26.0812 421.335 26.0812 425.903 28.2843 429.551L30.9287 433.929L26.5507 431.284C22.9032 429.081 18.3351 429.081 14.6876 431.284L10.3095 433.929L12.954 429.551C15.1571 425.903 15.1571 421.335 12.9539 417.688L10.3095 413.31L14.6876 415.954C18.3351 418.157 22.9032 418.157 26.5507 415.954L30.9287 413.31Z" fill="#605DEC" stroke="#605DEC" stroke-width="2" stroke-linejoin="round"/>
    <path class="decor-star" data-start="200" d="M1061.81 172.605L1061.41 173.279C1059.2 176.926 1059.2 181.494 1061.41 185.142L1061.81 185.815L1061.14 185.408C1057.49 183.205 1052.93 183.205 1049.28 185.408L1048.6 185.815L1049.01 185.142C1051.21 181.494 1051.21 176.926 1049.01 173.279L1048.6 172.605L1049.28 173.012C1052.93 175.215 1057.49 175.215 1061.14 173.012L1061.81 172.605Z" fill="#605DEC" stroke="#605DEC" stroke-width="2"/>
    <path class="decor-star" data-start="200" d="M804.626 4.80892L804.394 5.56087C803.14 9.63336 804.246 14.0655 807.267 17.0709L807.825 17.6259L807.073 17.3943C803 16.14 798.568 17.2462 795.563 20.2672L795.008 20.8249L795.239 20.073C796.494 16.0005 795.387 11.5683 792.367 8.56293L791.809 8.00801L792.561 8.2396C796.633 9.49388 801.065 8.38762 804.071 5.36671L804.626 4.80892Z" fill="#605DEC" stroke="#605DEC" stroke-width="2"/>
    <path class="decor-pulse" data-start="200" d="M313.5 21L315.287 31.742C316.065 36.422 319.548 40.1931 324.152 41.3401L329 42.5482L324.482 43.6739C319.713 44.8624 316.164 48.8601 315.549 53.7369L313.5 70L311.451 53.7369C310.836 48.8601 307.287 44.8624 302.518 43.6739L298 42.5482L302.848 41.3401C307.452 40.1931 310.935 36.422 311.713 31.742L313.5 21Z" stroke="#605DEC" stroke-width="4" stroke-linejoin="round"/>
    <path class="decor-arrow decor-arrow-2" data-start="400" d="M975.578 109.946C975.578 109.946 989.072 105.788 996.034 83.0061C998.993 73.324 986.5 43.5 972.946 50.1553C959.392 56.8106 984.697 90.501 1009.62 81.2818C1034.54 72.0625 1041.12 57.3682 1048.16 33.1325M1048.16 33.1325L1027.93 45.5926M1048.16 33.1325L1055.57 54.3487" stroke="#6AB1FF" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Можно ли анимировать звездочки, чтобы они вращались вокруг своей оси? Прописывал transform rotate, но они вращаются по какому-то непонятному кругу

Comments

[Максим]

transform-origin: center

Answer 1

[RAX7]

.decor-star {
  transform-origin: center;
  transform-box: fill-box; /* Осторожно! Не работает в IE */
}

Answer 2

[Антон Антон]

https://developer.mozilla.org/en-US/docs/Web/SVG/A...
либо делать звезды через элемент g с переносом, а анимацию уже внутри него.