Анимация svg элемента (движущийся пар над стаканчиком кофе)

Рейтинг: 1Ответов: 1Опубликовано: 26.05.2023

Как сделать анимацию движения паров над стаканчиком? Чтобы все три волны двигались одинаково синусоидально(как змея), но при этом были статичны(неподвижны). Я пробовал SVGator , SVG Artista , svg path, но у меня не вышло. Получалось так, что волны просто крутились вертикально вокруг своей оси.

svg код одной волны:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="39.6386 27 9.223 33">
    <path d="M 44 28 C 32 41 57 48 44 59" stroke="#000" stroke-width="1" fill="none"/>
</svg>

Стаканчик с парами(пары должны двигаться по синусоиде)

svg трёх волнистых линий:

<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="19mm" height="13mm" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" viewBox="9095.67 5418.178 443.667 306.467" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xodm="http://www.corel.com/coreldraw/odm/2003">
  <defs>
    <style type="text/css">
      .fil0 {fill:#1D1D1E;fill-rule:nonzero}
    </style>
  </defs>
  <g id="Слой_x0020_1">
    <metadata id="CorelCorpID_0Corel-Layer"/>
    <g id="логотип_x0020-22.eps">
      <path class="fil0" d="M9131.155 5566.487c4.227 3.566 8.426 7.066 12.141 10.996 17.41 18.471 25.668 38.739 24.55 60.264 -1.163 22.847 -19.784 43.263 -29.047 48.645 -12.205 7.094 -24.01 11.945 -24.104 11.991 -7.56 3.1 -10.939 11.228 -7.588 18.136 2.476 5.102 7.941 8.128 13.685 8.128a16.267 16.267 0 0 0 6.06 -1.163c0.54 -0.261 13.816 -5.707 27.939 -13.89 16.814 -9.794 41.234 -38.124 42.919 -70.505 1.509 -28.824 -9.198 -55.618 -31.831 -79.591 -4.627 -4.916 -9.664 -9.143 -14.523 -13.239 -15.427 -13.025 -27.651 -23.285 -25.565 -51.949 2.933 -40.201 46.019 -48.58 47.881 -48.933 8.035 -1.433 13.341 -8.593 11.824 -16.023 -1.546 -7.438 -9.478 -12.317 -17.465 -10.939 -23.368 4.05 -68.456 24.764 -72.068 74.098 -3.035 41.783 18.155 59.64 35.192 73.977z"/>
      <path class="fil0" d="M9306.267 5566.458c4.227 3.566 8.426 7.076 12.159 11.023 17.391 18.471 25.668 38.739 24.532 60.264 -1.182 22.847 -19.784 43.263 -29.029 48.645 -12.196 7.094 -24.03 11.945 -24.122 11.991 -7.541 3.1 -10.939 11.228 -7.56 18.136 2.449 5.102 7.932 8.128 13.657 8.128 2.02 0 4.068 -0.363 6.06 -1.163 0.54 -0.261 13.816 -5.707 27.939 -13.89 16.832 -9.794 41.234 -38.124 42.919 -70.505 1.498 -28.861 -9.198 -55.618 -31.831 -79.573 -4.627 -4.934 -9.664 -9.161 -14.523 -13.276 -15.455 -13.006 -27.642 -23.285 -25.547 -51.931 2.933 -40.201 46 -48.58 47.862 -48.933 8.063 -1.433 13.341 -8.593 11.824 -16.023 -1.527 -7.438 -9.441 -12.317 -17.465 -10.939 -23.34 4.05 -68.456 24.764 -72.05 74.098 -3.035 41.756 18.136 59.622 35.174 73.949z"/>
      <path class="fil0" d="M9472.637 5566.487c4.218 3.566 8.426 7.066 12.141 10.996 17.419 18.471 25.687 38.758 24.55 60.264 -1.182 22.847 -19.802 43.263 -29.047 48.645 -12.196 7.094 -24.03 11.945 -24.15 11.991 -7.495 3.1 -10.911 11.209 -7.56 18.136 2.495 5.102 7.96 8.128 13.685 8.128 2.02 0 4.068 -0.363 6.051 -1.163 0.549 -0.233 13.853 -5.707 27.949 -13.89 16.832 -9.776 41.253 -38.124 42.947 -70.505 1.471 -28.824 -9.208 -55.59 -31.858 -79.591 -4.627 -4.897 -9.646 -9.143 -14.505 -13.239 -15.455 -13.025 -27.66 -23.285 -25.547 -51.949 2.914 -40.201 46 -48.58 47.844 -48.933 8.081 -1.433 13.36 -8.593 11.843 -16.023 -1.546 -7.438 -9.291 -12.317 -17.456 -10.939 -23.377 4.05 -68.484 24.764 -72.059 74.098 -3.035 41.783 18.155 59.64 35.174 73.977z"/>
    </g>
  </g>
</svg>

css svg svg-animation
Источник: Stack Overflow на русском

Ответы

▲ 2Принят

Синусоида

Для первого code block всё довольно просто.

Никогда не пользовался SVGator, SVG Artista и прочими, пробовал Vectr, пользуюсь Incscape и Boxy SVG, но в них нет анимаций. Возможно есть какие-то очень удобные программы для анимации, но большинство программ для того же рисования выдают очень громоздкий код на выходе, что не есть хорошо. Последний редактор, как раз, нравится тем, что выдаёт более менее чистый код, умеет в defs и symbols, с результирующим кодом потом удобно работать.
Собственно, по анимации предлагаю покодить без редакторов.

Разберём, для начала, что такое d="M 44 28 C 32 41 57 48 44 59".
Объяснение всем значениям есть в Mozilla, M задаёт стартовую точку через (x,y), затем в C идёт три пары (x,y). Последняя — это финальная анкерная точка, а вот первые две отвечают за искривление Безье (Bezier curve).

Чтобы получить синусоидальное движение в контрольных точках необходимо поменять местами x, а y можно оставить на месте.
Как делать анимацию смотрим в <animate>, а также подсказку по тому, как менять d атрибут <path> в данном ответе на английском SO. Вместо from и to используем values, чтобы анимация шла также и в обратную сторону. Подсказка здесь.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="39 27 9 33">
  <path id="steam"
    d="M 44 28 C 32 41 57 48 44 59"
    stroke="#000" fill="none"
    stroke-width="1" />
  <animate href="#steam"
    attributeName="d"
    attributeType="XML"
    values="M 44 28 C 32 41 57 48 44 59;
            M 44 28 C 57 41 32 48 44 59;
            M 44 28 C 32 41 57 48 44 59"
    dur="3s"
    repeatCount="indefinite" />
</svg>

Пар

А вот здесь я сейчас ругаться буду.

Пар от ТС

Это что за издевательство над ?
Первый code block был нормальным, здесь зачем столько якорных точек на такую простую фигуру? Чтобы получить закруглённые концы? Есть же stroke-linecap.

Варианты рисования пара с минимумом якорных точек

Красный вариант полностью повторяет ваш используя всего 3 точки, зелёный вариант немного не сходится с оригиналом, так как верхнее закругление чуть меньше нижнего, но оно надо? Анимировать чёрный вариант архисложно, красный более-менее, про зелёный уже написано выше.

Потом. Зачем делать 3 одинаковые змейки и городить три разных path? Есть же symbol для одинаковых элементов. Для простых немногосоставных не так критично, но в вашем случае сильно сэкономило бы количество кода.

#steam, .cup-body {
    fill: none;
    stroke: black
}

#steam {
    stroke-linecap: round;
    stroke-width: 6px
}

.cup-body {
    stroke-width : 8px
}

use { y: 10 }
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 420" width="19%" height="19%">
  <defs>
    <symbol id="steam" viewBox="55 10 60 90">
      <path d="M90 21c-22 8-15 21-6 30 10 10 18 24-6 36">
        <animate
          attributeName="d"
          dur="2s"
          repeatCount="indefinite"
          values="M90 21c-22 8-15 21-6 30 10 10 18 24-6 36;
                  M90 21c10 17 3 22-6 29-11 9-29 22-6 37;
                  M90 21c-22 8-15 21-6 30 10 10 18 24-6 36"/>
      </path>
    </symbol>
  </defs>
  <path d="M171 274c0-25 21-46 48-50l-11 96c-22-7-37-25-37-46Z"/>
  <path d="M31 212h190M26 170h200l-29 235H54L26 170Zm19 165h160" class="cup-body"/>
  <path d="M14 148h223l3 23H11l3-23Zm18-30h181l14 30H21l11-30Z" class="cup-body"/>
  <use height="90" x="-35" href="#steam"/>
  <use height="90" x="6" href="#steam"/>
  <use height="90" x="45" href="#steam"/>
</svg>