SVG Как зациклить анимацию криволинейной фигуры

#css #svg #css_animation #svg_animation

Вопрос заключается в том, чтобы зациклить анимацию таким образом, чтобы она шла бесконечно.

В данный момент она выполняется как бы с реверсом. Есть ли какие-нибудь способы,
статьи или ещё другие возможные источники информации по правильной анимации подобного?

Волна может идти в любом направлении, - влево или вправо , главное, чтобы была бесшовность
и не было такого как в данном примере, что идёт эффект "назад" (реверс). Кроме JS существуют
ли способы в самом SVG создать данный эффект?

пример на JS
    

Ответы

Ответ 1

Форма анимированной волны целиком зависит от начального и конечного патча.
Чтобы не было реверса движения верхушек волн, необходимо, чтобы узловые точки по
координате "X" совпадали в обоих патчах. 

Это можно сделать в векторном редакторе. 

Открываем в редакторе начальный патч и перемещаем узловые точки по вертикали.

   

Где была вершина волны должна появиться впадина

  

Сохраняем формулы патчей и пишем команду анимации: 

values="Начальный патч; Конечный патч; Начальный патч"  








Связанный вопрос, где более подробно, на примерах рассказано о данной технике анимации
с помощью анимации атрибута d path


Ответ 2

Может просто двигать волну вправо или влево? Единственное - она должна быть идеально
затайлена (я создал path скриптом).



for (var i = 0; i < 5; i++)
  wave(20 + i * 3, 70 - i * 10, 2 + 1 * Math.random(), 0.4 + i * 0.05, 40 + i * 25)

function wave(amp, freq, time, scaleY, translateY) {
  let pts = [];
  for (var x = 0; x < 2000; x += 10)
    pts.push([x, (Math.sin(x / freq) * amp + translateY).toFixed(1)])
  svg.innerHTML += ``;
}
.wave {
  fill: steelblue;
  stroke: white;
  opacity: 0.5;
  stroke-width: 2px;
  animation: wave var(--t) linear infinite;
}

@keyframes wave {
    0% {transform: scale(1, var(--sy)) translate(0px, 0px)}
   50% {transform:                     translate(calc(var(--tx)*0.5), 0px)}
  100% {transform: scale(1, var(--sy)) translate(var(--tx), 0px)}
}



Ответ 3

Несколько волн

Чем хорош SVG, так это тем, что создав один объект  можно его многократно использовать.
Меняя у клонов параметры: окраску, размеры, позицию размещения и даже будет сохранена
анимация у потомков от родителя. 

Сохранив в секции  код одной волны, будем её клонировать с помощью команды  

 
       
        


Ниже полный код: 






Ответ 4

Ответ немного не по теме, но показать, как и в ответе @Stranger in the Q взаимодействие
CSS правил и форм SVG.   

Css изменяет размер волны и перемещает её. 



body {
  width: 960px;
  height: 100%;
  background-color: #d3d3d3;
}



#wave1 {
  animation: popup 5s ease infinite;
}

@keyframes popup {
  0% {
    transform: translate( -500px, 0) scale(1, 1);
  }
  100% {
    transform: translate(400px, 0) scale(1, 0);
  }
}