SVG Wave Animation
Create smooth, looping wave animations in SVG using animated path morphing and layered wave shapes.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Building a Wave Shape Path
A wave animation starts with a path drawn using smooth cubic Bezier curves (C commands) that repeat a sine-like pattern across the width of the SVG. Multiple overlapping wave paths at different opacities and speeds create a more dynamic, layered water effect.
- Cubic Bezier curves (C commands) create smooth wave crests
- Layer 2-3 wave paths at different speeds for depth
- Lower opacity on background waves enhances the layered look
Animating the Wave Motion
Animate the wave by transitioning the path's d attribute between two slightly offset wave shapes using CSS keyframes or the Web Animations API, or shift the path horizontally with a transform: translateX animation inside a repeating, clipped container.
- Transform-based horizontal shifting is simpler than path morphing
- Clip the wave container so the looping seam stays hidden
- CSS keyframes provide smooth, GPU-accelerated wave motion
Frequently Asked Questions
What's the easiest way to animate a wave in SVG?
Duplicating the wave path twice side by side and animating a horizontal transform translateX loop is simpler than morphing path data, and produces a smooth, seamless repeating wave.
Can I make the wave color gradient animate too?
Yes — apply an SVG linearGradient with animated gradient stop offsets, or animate a CSS custom property feeding into the gradient stops for a shifting color wave effect.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG