untitled

html

<svg class="wave-svg" viewBox="0 0 400 200" width="400" height="200" aria-label="Animated wave with three points">
  <defs>
    <linearGradient id="waveGradient" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#4fc3f7"/>
      <stop offset="100%" stop-color="#0277bd"/>
    </linearGradient>
  </defs>

  <g class="wave-track">
    <path class="wave"
          d="M0,100 Q50,60 100,100 T200,100 T300,100 T400,100 T500,100 T600,100 T700,100 T800,100 V200 H0 Z"
          fill="url(#waveGradient)"/>

    <circle class="point point-1" cx="50"  cy="80" r="6"/>
    <circle class="point point-2" cx="250" cy="80" r="6"/>
    <circle class="point point-3" cx="450" cy="80" r="6"/>
  </g>
</svg>
css

.wave-svg {
  display: block;
  overflow: hidden;
  background: #e1f5fe;
}

/* Moves the wave horizontally; shift equals one repeat of the pattern for a seamless loop */
.wave-track {
  animation: wave-scroll 4s linear infinite;
  will-change: transform;
}

@keyframes wave-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-400px); }
}

/* Three points bobbing on the wave */
.point {
  fill: #ffffff;
  stroke: #01579b;
  stroke-width: 2;
  animation: point-bob 1.2s ease-in-out infinite alternate;
  will-change: transform;
}

.point-1 { animation-delay: 0s; }
.point-2 { animation-delay: -0.4s; }
.point-3 { animation-delay: -0.8s; }

@keyframes point-bob {
  from { transform: translateY(0); }
  to   { transform: translateY(-10px); }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .wave-track,
  .point {
    animation: none;
  }
}