Анимированные волны Svg в HTML, CSS и JavaScript

HTML:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
<div class="content-wrapper">
<span class="title-text"><p>Animated Waves</p></span>
<svg id="visual" viewBox="0 0 900 600">
<rect x="0" y="0" width="900" height="600" fill="#001220"></rect>
<path class="far-background" d="M0 398L21.5 397.3C43 396.7 86 395.3 128.8 389.2C171.7 383 214.3 372 257.2 369.5C300 367 343 373 385.8 379.2C428.7 385.3 471.3 391.7 514.2 387C557 382.3 600 366.7 642.8 365.5C685.7 364.3 728.3 377.7 771.2 383.2C814 388.7 857 386.3 878.5 385.2L900 384L900 601L878.5 601C857 601 814 601 771.2 601C728.3 601 685.7 601 642.8 601C600 601 557 601 514.2 601C471.3 601 428.7 601 385.8 601C343 601 300 601 257.2 601C214.3 601 171.7 601 128.8 601C86 601 43 601 21.5 601L0 601Z" fill="#fa7268" style="transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0s;"></path>
<path class="background" d="M0 463L21.5 454.2C43 445.3 86 427.7 128.8 417.8C171.7 408 214.3 406 257.2 412.5C300 419 343 434 385.8 434C428.7 434 471.3 419 514.2 416.7C557 414.3 600 424.7 642.8 433.7C685.7 442.7 728.3 450.3 771.2 449.2C814 448 857 438 878.5 433L900 428L900 601L878.5 601C857 601 814 601 771.2 601C728.3 601 685.7 601 642.8 601C600 601 557 601 514.2 601C471.3 601 428.7 601 385.8 601C343 601 300 601 257.2 601C214.3 601 171.7 601 128.8 601C86 601 43 601 21.5 601L0 601Z" fill="#ef5f67" style="transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0s;"></path>
<path class="center" d="M0 471L21.5 465.5C43 460 86 449 128.8 453.3C171.7 457.7 214.3 477.3 257.2 488.2C300 499 343 501 385.8 500C428.7 499 471.3 495 514.2 487.7C557 480.3 600 469.7 642.8 468.5C685.7 467.3 728.3 475.7 771.2 478.5C814 481.3 857 478.7 878.5 477.3L900 476L900 601L878.5 601C857 601 814 601 771.2 601C728.3 601 685.7 601 642.8 601C600 601 557 601 514.2 601C471.3 601 428.7 601 385.8 601C343 601 300 601 257.2 601C214.3 601 171.7 601 128.8 601C86 601 43 601 21.5 601L0 601Z" fill="#e34c67" style="transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0s;"></path>
<path class="foreground" d="M0 510L21.5 506.2C43 502.3 86 494.7 128.8 494.7C171.7 494.7 214.3 502.3 257.2 511.5C300 520.7 343 531.3 385.8 532.2C428.7 533 471.3 524 514.2 518.8C557 513.7 600 512.3 642.8 511.8C685.7 511.3 728.3 511.7 771.2 507.2C814 502.7 857 493.3 878.5 488.7L900 484L900 601L878.5 601C857 601 814 601 771.2 601C728.3 601 685.7 601 642.8 601C600 601 557 601 514.2 601C471.3 601 428.7 601 385.8 601C343 601 300 601 257.2 601C214.3 601 171.7 601 128.8 601C86 601 43 601 21.5 601L0 601Z" fill="#d53867" style="transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0s;"></path>
<path class="far-foreground" d="M0 569L21.5 567.5C43 566 86 563 128.8 562.5C171.7 562 214.3 564 257.2 559.7C300 555.3 343 544.7 385.8 539.7C428.7 534.7 471.3 535.3 514.2 540.2C557 545 600 554 642.8 555.8C685.7 557.7 728.3 552.3 771.2 553.7C814 555 857 563 878.5 567L900 571L900 601L878.5 601C857 601 814 601 771.2 601C728.3 601 685.7 601 642.8 601C600 601 557 601 514.2 601C471.3 601 428.7 601 385.8 601C343 601 300 601 257.2 601C214.3 601 171.7 601 128.8 601C86 601 43 601 21.5 601L0 601Z" fill="#c62368" style="transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0s;"></path>
</svg>
<span class="text-muted">
<p>Waves made with Haikei</p>
</span>
</div>

CSS:

body{
margin: 0;
background: #eec0c0;
font-family: 'Pacifico', cursive;
user-select: none;
}
svg{
width: 100vmin;
border: 4px solid #001220;
padding: 10px;
margin: 10px;
}
.content-wrapper{
width: 100%;
height: 100%;
position: absolute;
display: grid;
align-items: center;
justify-content: center;
}
.title-text{
width: 100%;
text-align: center;
color: #001220;
font-size: 5vmin;
}
.text-muted{
width: 100%;
text-align: center;
color: gray;
font-size: 3vmin;
}

JavaScript:

const animate = (target, value1, value2, value3) => {
anime({
targets: target,
d: [
{ value: value1},
{ value: value2},
{ value: value3}
],
loop: true,
duration: 20000,
direction: 'alternate',
easing: 'easeOutQuad'
})
}
animate(
'.far-background',
"M0 444L21.5 442.8C43 441.7 86 439.3 128.8 436C171.7 432.7 214.3 428.3 257.2 416C300 403.7 343 383.3 385.8 385.7C428.7 388 471.3 413 514.2 416.3C557 419.7 600 401.3 642.8 398.8C685.7 396.3 728.3 409.7 771.2 408.7C814 407.7 857 392.3 878.5 384.7L900 377L900 601L878.5 601C857 601 814 601 771.2 601C728.3 601 685.7 601 642.8 601C600 601 557 601 514.2 601C471.3 601 428.7 601 385.8 601C343 601 300 601 257.2 601C214.3 601 171.7 601 128.8 601C86 601 43 601 21.5 601L0 601Z",
"M0 412L21.5 408C43 404 86 396 128.8 386.8C171.7 377.7 214.3 367.3 257.2 375.5C300 383.7 343 410.3 385.8 415.2C428.7 420 471.3 403 514.2 389.2C557 375.3 600 364.7 642.8 366.7C685.7 368.7 728.3 383.3 771.2 390.3C814 397.3 857 396.7 878.5 396.3L900 396L900 601L878.5 601C857 601 814 601 771.2 601C728.3 601 685.7 601 642.8 601C600 601 557 601 514.2 601C471.3 601 428.7 601 385.8 601C343 601 300 601 257.2 601C214.3 601 171.7 601 128.8 601C86 601 43 601 21.5 601L0 601Z",
"M0 383L21.5 390.8C43 398.7 86 414.3 128.8 409C171.7 403.7 214.3 377.3 257.2 376.8C300 376.3 343 401.7 385.8 413.5C428.7 425.3 471.3 423.7 514.2 426.7C557 429.7 600 437.3 642.8 428.3C685.7 419.3 728.3 393.7 771.2 383.2C814 372.7 857 377.3 878.5 379.7L900 382L900 601L878.5 601C857 601 814 601 771.2 601C728.3 601 685.7 601 642.8 601C600 601 557 601 514.2 601C471.3 601 428.7 601 385.8 601C343 601 300 601 257.2 601C214.3 601 171.7 601 128.8 601C86 601 43 601 21.5 601L0 601Z"
);
animate(
'.background',
"M0 424L21.5 432.7C43 441.3 86 458.7 128.8 466.8C171.7 475 214.3 474 257.2 469.8C300 465.7 343 458.3 385.8 450.3C428.7 442.3 471.3 433.7 514.2 437.8C557 442 600 459 642.8 466.7C685.7 474.3 728.3 472.7 771.2 466.3C814 460 857 449 878.5 443.5L900 438L900 601L878.5 601C857 601 814 601 771.2 601C728.3 601 685.7 601 642.8 601C600 601 557 601 514.2 601C471.3 601 428.7 601 385.8 601C343 601 300 601 257.2 601C214.3 601 171.7 601 128.8 601C86 601 43 601 21.5 601L0 601Z",
"M0 408L21.5 412.2C43 416.3 86 424.7 128.8 431C171.7 437.3 214.3 441.7 257.2 444.5C300 447.3 343 448.7 385.8 443.2C428.7 437.7 471.3 425.3 514.2 421.2C557 417 600 421 642.8 425.2C685.7 429.3 728.3 433.7 771.2 435C814 436.3 857 434.7 878.5 433.8L900 433L900 601L878.5 601C857 601 814 601 771.2 601C728.3 601 685.7 601 642.8 601C600 601 557 601 514.2 601C471.3 601 428.7 601 385.8 601C343 601 300 601 257.2 601C214.3 601 171.7 601 128.8 601C86 601 43 601 21.5 601L0 601Z",
"M0 402L21.5 402.2C43 402.3 86 402.7 128.8 407.8C171.7 413 214.3 423 257.2 433.2C300 443.3 343 453.7 385.8 451.5C428.7 449.3 471.3 434.7 514.2 434.8C557 435 600 450 642.8 455.7C685.7 461.3 728.3 457.7 771.2 454.5C814 451.3 857 448.7 878.5 447.3L900 446L900 601L878.5 601C857 601 814 601 771.2 601C728.3 601 685.7 601 642.8 601C600 601 557 601 514.2 601C471.3 601 428.7 601 385.8 601C343 601 300 601 257.2 601C214.3 601 171.7 601 128.8 601C86 601 43 601 21.5 601L0 601Z"
);
animate(
'.center',
"M0 510L21.5 509.2C43 508.3 86 506.7 128.8 499.5C171.7 492.3 214.3 479.7 257.2 469.8C300 460 343 453 385.8 457.7C428.7 462.3 471.3 478.7 514.2 479.2C557 479.7 600 464.3 642.8 459.3C685.7 454.3 728.3 459.7 771.2 457.7C814 455.7 857 446.3 878.5 441.7L900 437L900 601L878.5 601C857 601 814 601 771.2 601C728.3 601 685.7 601 642.8 601C600 601 557 601 514.2 601C471.3 601 428.7 601 385.8 601C343 601 300 601 257.2 601C214.3 601 171.7 601 128.8 601C86 601 43 601 21.5 601L0 601Z",
"M0 475L21.5 469.5C43 464 86 453 128.8 452.7C171.7 452.3 214.3 462.7 257.2 468.5C300 474.3 343 475.7 385.8 473.5C428.7 471.3 471.3 465.7 514.2 468.7C557 471.7 600 483.3 642.8 491.2C685.7 499 728.3 503 771.2 502.2C814 501.3 857 495.7 878.5 492.8L900 490L900 601L878.5 601C857 601 814 601 771.2 601C728.3 601 685.7 601 642.8 601C600 601 557 601 514.2 601C471.3 601 428.7 601 385.8 601C343 601 300 601 257.2 601C214.3 601 171.7 601 128.8 601C86 601 43 601 21.5 601L0 601Z",
"M0 462L21.5 459.8C43 457.7 86 453.3 128.8 457.7C171.7 462 214.3 475 257.2 477C300 479 343 470 385.8 465.2C428.7 460.3 471.3 459.7 514.2 466C557 472.3 600 485.7 642.8 486.2C685.7 486.7 728.3 474.3 771.2 468C814 461.7 857 461.3 878.5 461.2L900 461L900 601L878.5 601C857 601 814 601 771.2 601C728.3 601 685.7 601 642.8 601C600 601 557 601 514.2 601C471.3 601 428.7 601 385.8 601C343 601 300 601 257.2 601C214.3 601 171.7 601 128.8 601C86 601 43 601 21.5 601L0 601Z"
);
animate(
'.foreground',
"M0 502L21.5 506.5C43 511 86 520 128.8 518C171.7 516 214.3 503 257.2 495.7C300 488.3 343 486.7 385.8 490.3C428.7 494 471.3 503 514.2 507.2C557 511.3 600 510.7 642.8 513.5C685.7 516.3 728.3 522.7 771.2 526.7C814 530.7 857 532.3 878.5 533.2L900 534L900 601L878.5 601C857 601 814 601 771.2 601C728.3 601 685.7 601 642.8 601C600 601 557 601 514.2 601C471.3 601 428.7 601 385.8 601C343 601 300 601 257.2 601C214.3 601 171.7 601 128.8 601C86 601 43 601 21.5 601L0 601Z",
"M0 484L21.5 487.5C43 491 86 498 128.8 497.7C171.7 497.3 214.3 489.7 257.2 493.2C300 496.7 343 511.3 385.8 519C428.7 526.7 471.3 527.3 514.2 523.7C557 520 600 512 642.8 511.3C685.7 510.7 728.3 517.3 771.2 516.3C814 515.3 857 506.7 878.5 502.3L900 498L900 601L878.5 601C857 601 814 601 771.2 601C728.3 601 685.7 601 642.8 601C600 601 557 601 514.2 601C471.3 601 428.7 601 385.8 601C343 601 300 601 257.2 601C214.3 601 171.7 601 128.8 601C86 601 43 601 21.5 601L0 601Z",
"M0 515L21.5 519.3C43 523.7 86 532.3 128.8 529.3C171.7 526.3 214.3 511.7 257.2 505.8C300 500 343 503 385.8 502.5C428.7 502 471.3 498 514.2 496.8C557 495.7 600 497.3 642.8 501.3C685.7 505.3 728.3 511.7 771.2 512C814 512.3 857 506.7 878.5 503.8L900 501L900 601L878.5 601C857 601 814 601 771.2 601C728.3 601 685.7 601 642.8 601C600 601 557 601 514.2 601C471.3 601 428.7 601 385.8 601C343 601 300 601 257.2 601C214.3 601 171.7 601 128.8 601C86 601 43 601 21.5 601L0 601Z"
);
animate(
'.far-foreground',
"M0 533L21.5 534.2C43 535.3 86 537.7 128.8 537.7C171.7 537.7 214.3 535.3 257.2 538.2C300 541 343 549 385.8 554.2C428.7 559.3 471.3 561.7 514.2 559.8C557 558 600 552 642.8 550.5C685.7 549 728.3 552 771.2 550.5C814 549 857 543 878.5 540L900 537L900 601L878.5 601C857 601 814 601 771.2 601C728.3 601 685.7 601 642.8 601C600 601 557 601 514.2 601C471.3 601 428.7 601 385.8 601C343 601 300 601 257.2 601C214.3 601 171.7 601 128.8 601C86 601 43 601 21.5 601L0 601Z",
"M0 560L21.5 555.8C43 551.7 86 543.3 128.8 537.3C171.7 531.3 214.3 527.7 257.2 526.2C300 524.7 343 525.3 385.8 529.2C428.7 533 471.3 540 514.2 540.8C557 541.7 600 536.3 642.8 539C685.7 541.7 728.3 552.3 771.2 552.8C814 553.3 857 543.7 878.5 538.8L900 534L900 601L878.5 601C857 601 814 601 771.2 601C728.3 601 685.7 601 642.8 601C600 601 557 601 514.2 601C471.3 601 428.7 601 385.8 601C343 601 300 601 257.2 601C214.3 601 171.7 601 128.8 601C86 601 43 601 21.5 601L0 601Z",
"M0 533L21.5 537.7C43 542.3 86 551.7 128.8 552.5C171.7 553.3 214.3 545.7 257.2 541.2C300 536.7 343 535.3 385.8 538.7C428.7 542 471.3 550 514.2 555.3C557 560.7 600 563.3 642.8 563.3C685.7 563.3 728.3 560.7 771.2 560.7C814 560.7 857 563.3 878.5 564.7L900 566L900 601L878.5 601C857 601 814 601 771.2 601C728.3 601 685.7 601 642.8 601C600 601 557 601 514.2 601C471.3 601 428.7 601 385.8 601C343 601 300 601 257.2 601C214.3 601 171.7 601 128.8 601C86 601 43 601 21.5 601L0 601Z"
);

Фрагменты кода HTML, CSS и JavaScript включены, AllWebCodes.com

Сделанный! И наслаждайтесь анимированными фрагментами Svg Waves

Загрузить сейчас

материалы по теме:

Новые материалы

Кластеризация: более глубокий взгляд

Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..

Как написать эффективное резюме

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

Частный метод Python: улучшение инкапсуляции и безопасности

Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..

Как я автоматизирую тестирование с помощью Jest

Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..

Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)

Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..

Понимание расстояния Вассерштейна: мощная метрика в машинном обучении

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

Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot

В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..

Machine Learning JavaScript Blockchain Artificial Intelligence Data Science Cryptocurrency Software Development Python Web Development Coding Deep Learning AI Bitcoin React Software Engineering Ethereum Web3 Business Crypto Nodejs Solidity Development Front End Development Data Finance Money Java Trading Typescript Smart Contracts Productivity Tech Startup Investing Neural Networks Developer Computer Science NLP