CSSで円を波打たせる

CSSのアニメーションを使って、うねうね動く円を作成することができます。
滅多に使用することはないとは思いますが、独特な雰囲気のサイトややわらかい雰囲気のサイトなどに使用できるのではないでしょうか。

作り方は、border-radiusをキーフレームを使用して動かしてくだけです。

.wave-circle {
  border: 5px solid #87CCA1;
  animation: uneune 5s linear infinite; /* 5秒アニメーションをループ */
  width: 300px;
  height: 300px;
}
@keyframes wave {
  0% {
    border-radius: 30% 50% 80% 50% / 60% 40% 30% 50%; 
  }
  20% {
    border-radius: 70% 60% 60% 90% / 70% 80% 40% 90%; 
  }
  40% {
    border-radius: 60% 40% 70% 60% / 40% 60% 50% 60%; 
  }
  60% {
    border-radius: 90% 60% 40% 70% / 70% 50% 80% 40%; 
  }
  80% {
    border-radius: 60% 40% 70% 60% / 40% 60% 50% 60%; 
  }
  100% {
    border-radius: 30% 50% 80% 50% / 60% 640% 30% 50%; 
  }
}

SVGやJQueryを使用するほうが、より細かく設定が可能ですが、調整が難しい場合が多いので、CSSで実現可能なところはkeyframeアニメーションを使用するほうがよいでしょう