SVGとSassの@forを使ったうねうねするアニメーション

波の線をSVGで作って、一本ずつ動きと色がズレるように動かせたものです。
特に使い所はないです。

完成コード

.html

<div class="box"></div>

.js

for (let i = 0; i < 20; i++) {
  $('.box').append('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 6"><path d="M0,1c25,0,25,4,50,4c25,0,25-4,50-4s25,4,50,4" /></svg>');
}

.scss

.box {
  font-size: 10px;
  width: 30em;
  height: 30em;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  svg {
    width: 35em;
    fill: none;
    @for $i from 1 through 20 {
      &:nth-child(#{$i}) {
        animation: Wavy 2s (0.1s * $i) ease-in-out infinite;
        stroke: adjust-hue(#f99, (20deg * $i));
      }
    }
  }
}

@keyframes Wavy {
  0% {
    transform: translateX(0);
    filter: hue-rotate(0deg);
    stroke-width: 1;
  }
  50% {
    transform: translateX(-5em);
    filter: hue-rotate(180deg);
    stroke-width: 1.5;
  }
  100% {
    transform: translateX(0);
    filter: hue-rotate(0deg);
    stroke-width: 1;
  }
}

作り方

こういう線のSVGを作成

コードはこれ

svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 6"><path d="M0,1c25,0,25,4,50,4c25,0,25-4,50-4s25,4,50,4" /></svg>

このSVGを.boxにappendを使って表示
@keyframes Wavyのアニメーションを@forで本数分だけ動きを遅延

まとめ

Sassの@forはちょこちょこと使うので覚えておくと良いかもです
特にanimationとの相性が良い感じ