Как реализован этот анимированный фон?

Question

[fr1nd4]

https://rpcs3.net/

Как сделать такие же фона, как на этом сайте?
Очень понравились

Comments

[Rustam Bainazarov]

У вас же код перед глазами. Без кода лично я вижу просто две волнистые линии, которые двигаются с разной скоростью. Частицы — canvas.

[Антон]

Открыть девтулс и посмотреть

Answer 1

[Вадим]

Фон linear-gradient + частицы на canvas.
Например, с помощью https://vincentgarreau.com/particles.js/#nasa

Comments

[fr1nd4]

Спасибо!
А как сделать такие волны?

[Вадим]

fr1nd4, В данном случае это свг картинка волны, которая задана в качестве фона блоку с абсолютным позиционированием и у этого блока анимируется позиционирование с помощью @keyframes анимаций.
Ну и так несколько волн друг на друга наложены.

.wavebar-svg-object {
    background: url(/img/graphics/svg/wavebar.svg) repeat-x;
    position: absolute;
    top: -198px;
    width: 6144px;
    height: 198px;
    animation: 11s cubic-bezier(.36,.45,.63,.53) 0s infinite normal none running wavebar-svg-object;
    transform: translate3d(0px,0px,0px);
}

@keyframes wavebar-svg-object{
  0% { margin-left:0 }
  100% { margin-left:-1600px }
}