Tool Area
Trigonometric Wave Parameters
Wave Amplitude (Height)150px
Complexity (Points)4
SVG Fill Color
Flip Invert Orientation
Live Vector Render
Raw <svg> Vector Markup
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 300" width="100%" height="100%"> <path fill="#1A6B3C" d="M 0,150 L 0,20 C 240,20 240,150 480,150 C 720,150 720,20 960,20 C 1200,20 1200,150 1440,150 L 1440,300 L 0,300 Z"></path> </svg>
About this tool
SVG wave dividers are a staple of modern landing page design. They create smooth section transitions using scalable vector math — rendering perfectly at any screen resolution with zero pixel distortion.
Wave Path Generation
Each wave is generated using cubic Bézier curves (C command) in SVG path notation. The control points are automatically calculated from your amplitude and complexity settings:
C cpX1,y1 cpX2,y2 endX,endY
Usage in HTML
Drop the exported SVG inline into your HTML, or reference it as a CSS background-image. Use width="100%" and the viewBox attribute to ensure it scales responsively.
All path calculations are performed client-side. No SVG data is sent to any server.