Как сделать анимацию превращения прямой линии в волнистую?

Question

[Alexander3928]

Как сделать анимацию из прямой линии до формы самой svg?

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 320">
        <path fill="#F9F9F9" fill-opacity="1" d="M0,128L40,138.7C80,149,160,171,240,160C320,149,400,107,480,112C560,117,640,171,720,165.3C800,160,880,96,960,90.7C1040,85,1120,139,1200,154.7C1280,171,1360,149,1400,138.7L1440,128L1440,0L1400,0C1360,0,1280,0,1200,0C1120,0,1040,0,960,0C880,0,800,0,720,0C640,0,560,0,480,0C400,0,320,0,240,0C160,0,80,0,40,0L0,0Z"></path>
      </svg>

https://codepen.io/Alexxxsander/pen/GRQZNXV

Comments

[ambisinister One]

Alexander3928, Это прямая плавно переходящая в синусоиду.

[Alexander3928]

ambisinister One, это нужно через js делать или svg? (Одноразовая анимация, типо как эффект вытекание )

Answer 1

[black1277]

<svg width="1200" height="320" xmlns="http://www.w3.org/2000/svg">
 <g>
  <title>Layer 1</title>
  <path id="path" fill="#F9F9F9">  
			<animate attributeName="d" dur="4000ms" repeatCount="indefinite"
				values="m0,-1l1200,0l0,192c-50.41666,-1.24999 -95.83335,1.24999 -146.25002,0l-153.74998,0c-50,-1.66666 -104.99998,0.41667 -154.99998,-1.24999l-145.00002,1.24999c-50,-1.66666 -114.99993,0.41667 -164.99993,-1.24999l-135.00007,2.49998c-50,-2.91665 -98.75,0.41667 -148.75,-2.49998l-151.25,1.24999l0,-192z;
				m0,-1l1200,0l0,192c-50.41666,-1.24999 -97.08334,-57.49972 -147.50001,-58.74971l-152.49999,58.74971c-50,-1.66666 -102.49999,-57.08305 -152.49999,-58.74971l-147.50001,58.74971c-50,-1.66666 -106.24997,-48.33309 -156.24997,-49.99975l-143.75003,51.24974c-50,-2.91665 -95.00002,-57.08305 -145.00002,-59.9997l-154.99998,58.74971l0,-192z;
				m0,-1l1200,0l0,192c-50.41666,-1.24999 -95.83335,1.24999 -146.25002,0l-153.74998,0c-50,-1.66666 -104.99998,0.41667 -154.99998,-1.24999l-145.00002,1.24999c-50,-1.66666 -114.99993,0.41667 -164.99993,-1.24999l-135.00007,2.49998c-50,-2.91665 -98.75,0.41667 -148.75,-2.49998l-151.25,1.24999l0,-192z;
			"/>
  </path>
 </g>
</svg>

Примерно так. Где values - 3 строки. Первая и последняя - это прямая линия (на глаз делал), вторая строка - волнистая линия. Остальное и так понятно

Comments

[Alexander3928]

А как тогда сделать одноразовую анимацию? Чтобы застыло в форме волны?

[black1277]

Alexander3928, если надо чтобы проиграло 1 раз и застыло - то замените тег animate на такой

<animate attributeName="d" dur="4000ms" repeatCount="1"  fill="freeze"
				values="m0,-1l1200,0l0,192c-50.41666,-1.24999 -95.83335,1.24999 -146.25002,0l-153.74998,0c-50,-1.66666 -104.99998,0.41667 -154.99998,-1.24999l-145.00002,1.24999c-50,-1.66666 -114.99993,0.41667 -164.99993,-1.24999l-135.00007,2.49998c-50,-2.91665 -98.75,0.41667 -148.75,-2.49998l-151.25,1.24999l0,-192z;
				m0,-1l1200,0l0,192c-50.41666,-1.24999 -97.08334,-57.49972 -147.50001,-58.74971l-152.49999,58.74971c-50,-1.66666 -102.49999,-57.08305 -152.49999,-58.74971l-147.50001,58.74971c-50,-1.66666 -106.24997,-48.33309 -156.24997,-49.99975l-143.75003,51.24974c-50,-2.91665 -95.00002,-57.08305 -145.00002,-59.9997l-154.99998,58.74971l0,-192z;
				"/>

[Alexander3928]

black1277, А вы через какую программу делали эти линии?

[black1277]

Alexander3928, говорю же на глаз делал, можно в любом онлайн редакторе SVG(вбейте в гуглопоиск - у меня ссылку на этот редактор хабр не пускает). Главное, чтобы количество точек у начального и конечного пути совпадало. Иначе, плавной анимации не будет.

[Alexander3928]

black1277, окей, спасибо