SVG Wave Generator
Design custom SVG page dividers. Create smooth, spiky, or blocky waves to separate content sections on your website.
Loading Tool...
Applications
Add a polished, hand-tuned curve to the top or bottom of hero sections, landing pages, blog post dividers, and email-safe banner art. SVG waves scale infinitely without pixelation, render crisply on retina displays, and stay under a kilobyte — far smaller than a comparable PNG or JPEG divider.
SVG Wave vs CSS mask-image
A pure SVG <path> works as a foreground shape that can be filled with any color, gradient, or pattern. CSS mask-image lets the same path act as a window that reveals the section's own background-color, which is great for matching the divider to the parent's text color via `background-color: currentColor`. The current generator outputs a standalone <svg> element with a `preserveAspectRatio="none"` so the wave stretches to fill any container width without distorting the curve's amplitude proportionally. Quadratic Bézier curves (Q commands) keep the markup small — Cubic Bézier (C commands) and true sine waves look smoother but roughly double the path length. The viewBox defines an internal coordinate system; set width="100%" on the <svg> tag to make the wave responsive.
Fun Fact: The Quadratic Bézier curve used to draw waves was formalized in 1959 by French mathematician Paul de Casteljau at Citroën, who developed the de Casteljau algorithm for evaluating Bézier curves on the assembly line — a beautiful example of automotive engineering directly inspiring modern web graphics.
Related Tools
View all toolsSVG Blob Generator
Generate organic SVG blob shapes. Create unique, random blobs for backgrounds, masking images, and creative UI design.
SVG Pattern Generator
Create seamless repeating SVG patterns. Generate backgrounds for websites, apps, and print with customizable shapes and colors.
SVG Code Viewer
Preview and validate your SVG code instantly. Paste your SVG markup to see the rendered image and check for errors.
Color Contrast Checker
Check color accessibility (WCAG) compliance. Ensure your text is readable against backgrounds for all users.
Color Mixer
Mix two colors to create the perfect blend. Generate intermediate steps between two Hex codes for gradients and UI states.
Color Palette Generator
Generate beautiful color palettes and schemes. Explore monochromatic, analogous, triadic, complementary, and split-complementary color harmonies for your projects.