CSS Wave Generator

<!-- Drop into any HTML — full SVG with multi-layer parallax -->
<svg xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 1440 200"
     preserveAspectRatio="none"
     width="100%"
     aria-hidden="true" focusable="false">
  <path d="M 0 100 C ... L 1440 200 L 0 200 Z"
        fill="#a78bfa" opacity="1"/>
</svg>

/* CSS background-image — wave embedded as data-URL */
.hero-wave {
  width: 100%;
  aspect-ratio: 1440 / 200;
  background-image: url("data:image/svg+xml,...");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* CSS clip-path: shape() — Chrome 132+, falls back via @supports */
.hero {
  background: linear-gradient(135deg, #6366f1, #a78bfa);
  height: 60vh;
  clip-path: shape(from 0 0, line to 100% 0, line to 100% 80%,
    line to 95% 82%, line to 90% 78%, line to 85% 84%,
    line to 0 82%, line to 0 0);
}

@supports not (clip-path: shape(from 0 0)) {
  .hero {
    clip-path: polygon(0 0, 100% 0, 100% 80%, 95% 82%,
      90% 78%, 85% 84%, 0 82%);
  }
}

/* CSS mask-image — wave clips an image / video / gradient */
.image-wave {
  width: 100%;
  aspect-ratio: 1440 / 200;
  mask-image: url("data:image/svg+xml,...");
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  -webkit-mask-image: url("data:image/svg+xml,...");
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  background: url("/hero.jpg") center/cover;
  /* The image is now clipped into the wave shape */
}

/* @property typed-angle animation — smooth GPU interpolation */
@property --wave-phase {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.wave-layer-0 { animation: wave-shift 12s linear infinite; }
.wave-layer-1 { animation: wave-shift 14s linear infinite reverse; }
.wave-layer-2 { animation: wave-shift 16s linear infinite; }

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

@media (prefers-reduced-motion: reduce) {
  .wave-layer-0, .wave-layer-1, .wave-layer-2 { animation: none; }
}

/* Scroll-linked wave — Chrome 115+, Safari 26+, Firefox flagged */
.wave-layer-0 {
  animation: wave-shift linear;
  animation-timeline: scroll();
}

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

@supports not (animation-timeline: scroll()) {
  /* Static fallback — wave doesn't animate */
}

<!-- Tailwind arbitrary-value class — works in v3 AND v4 -->
<div class="w-full aspect-[1440/200] bg-no-repeat bg-[length:100%_100%]
            bg-[image:url('data:image/svg+xml,...')]"
     aria-hidden="true" />

// CssWave.tsx — drop-in React component
import React from 'react';

type Props = { className?: string; style?: React.CSSProperties; };

export default function CssWave({ className, style }: Props) {
  return (
    <div
      className={className}
      style={{ width: '100%', aspectRatio: '1440 / 200', ...style }}
      aria-hidden="true"
      dangerouslySetInnerHTML={{
        __html: `<svg ...>...</svg>`
      }}
    />
  );
}