How to svg wave divider and section separator generator free online
- Step 1Open the generator (no file needed) — The Wave Divider is generative — there is no drop zone. The five controls (Amplitude, Frequency, Height, Color, Flip vertically) appear immediately with their defaults (40, 3, 80,
#6366f1, off). - Step 2Set Amplitude and Frequency for the curve you want — Amplitude is the wave height in user units (slider 5–100, step 5). Frequency is the number of cycles across the width (1–8, step 0.5). Low amplitude + high frequency = choppy ripples; high amplitude + low frequency = a single gentle roll. The amplitude is measured around the vertical midline (
height/2). - Step 3Set Height to the divider's depth — Height (20–240px, step 10) is the SVG canvas height, not the wave height. Pick the vertical space the divider should occupy. The curve oscillates around the midline and is clamped to
[0, height], so if amplitude exceedsheight/2the peaks flatten against the top and bottom edges — raise Height or lower Amplitude to avoid clipping. - Step 4Pick the fill colour to match the destination section — There is one colour. The path closes downward, so the fill is the area below the curve. Set the colour to the background of the section that sits below the wave; the section above keeps its own background showing through the gap above the curve.
- Step 5Flip vertically for a top divider — Tick Flip vertically to mirror the path (
transform="scale(1,-1) translate(0,-{height})") so the curve rides along the top. Use the flipped version at the top of a section and the un-flipped version at the bottom to bracket content between two waves. - Step 6Generate, then copy or download — Click Generate to render the preview and the SVG source. Use Copy to clipboard to paste the inline
<svg>between two section elements, or Download to savewave-divider.svg. The metrics strip shows the Amplitude and Frequency used.
The five real controls
Every control the Wave Divider UI exposes, its slider range, the engine default, and what it changes in the output. There are no other options — no layer count, no gradient, no animation toggle, no preset menu.
| Control | UI range / type | Default | Effect on the SVG |
|---|---|---|---|
| Amplitude | Slider 5–100, step 5 (engine clamps to ≥2; schema max 120) | 40 | Sine peak in user units, measured around the height/2 midline |
| Frequency | Slider 1–8, step 0.5 (engine clamps to ≥0.5; schema max 10) | 3 | Number of full wave cycles across the 1440-unit width |
| Height | Slider 20–240, step 10 | 80 | SVG canvas height → viewBox height and the height attribute |
| Color | Single colour picker | #6366f1 | fill on the one path; no second colour or gradient is generated |
| Flip vertically | Checkbox | off | Adds transform="scale(1,-1) translate(0,-{height})" to mirror the curve to the top |
Anatomy of the generated SVG
What the generator emits, character for character. The width is hardcoded to 1440 user units; responsiveness comes from width="100%" + preserveAspectRatio="none", not from a width control.
| Part | Value | Why |
|---|---|---|
| Root element | <svg viewBox="0 0 1440 {height}" preserveAspectRatio="none" width="100%" height="{height}"> | Stretches horizontally to the container; height stays fixed |
| Children | Exactly one <path> with fill="{color}" | A single solid shape — no <defs>, <linearGradient>, or extra layers |
| Path data | M0,{height} L0,y0 L10,y1 … L1440,yN L1440,{height} Z | Starts bottom-left, traces the sine sampled every 10 units, closes to bottom-right |
| Sample step | Every 10 user units → ~145 points across the width | Fixed step; not configurable and not curve-smoothed (straight L segments) |
| Clamp | Each y is max(0, min(height, …)) | Peaks that exceed the canvas are flattened against the edge, not drawn outside |
Cookbook
Copy-paste recipes using only the five real controls. Each shows the control values and the resulting inline SVG you place between two sections.
Default gentle roll between hero and features
The out-of-the-box settings (amplitude 40, frequency 3, height 80) produce a calm divider. Set the colour to the lower section's background and drop the SVG at the bottom of the hero.
Controls: Amplitude 40 · Frequency 3 · Height 80 · Color #ffffff · Flip off
Output (abbreviated):
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 80"
preserveAspectRatio="none" width="100%" height="80">
<path d="M0,80 L0,40.0 L10,45.2 … L1440,40.0 L1440,80 Z" fill="#ffffff"/>
</svg>
Placement:
<section class="hero"> … </section>
<!-- paste the SVG here; #ffffff matches the features bg -->
<section class="features"> … </section>Choppy water — low amplitude, high frequency
For a busy, energetic ripple, drop the amplitude and raise the frequency to the top of the slider. More cycles means more peaks across the same width.
Controls: Amplitude 15 · Frequency 8 · Height 60 · Color #0ea5e9 · Flip off Result: ~8 tight cycles across the 1440-unit width, each peak 15 units tall around the y=30 midline. The path still samples every 10 units, so the ripples are made of short straight segments (not smoothed curves).
Top-of-section divider via Flip vertically
Tick Flip vertically to mirror the curve to the top. Use this at the top edge of a coloured section so the wave dips down into it.
Controls: Amplitude 50 · Frequency 2 · Height 100 · Color #6366f1 · Flip ON
Output path carries the mirror transform:
<path d="M0,100 L0,50.0 … L1440,100 Z"
fill="#6366f1"
transform="scale(1,-1) translate(0,-100)"/>
Place at the TOP of the #6366f1 section; the wave now crests upward.Wave sandwich — content bracketed top and bottom
Generate the same wave twice: once flipped for the top of a section, once un-flipped for the bottom. Match the colour to the section's neighbours.
Top divider: Amplitude 40 · Frequency 3 · Height 80 · Flip ON Bottom divider: Amplitude 40 · Frequency 3 · Height 80 · Flip off <svg …flip ON…></svg> <!-- top edge --> <section class="testimonials"> … </section> <svg …flip off…></svg> <!-- bottom edge --> The matching amplitude/frequency makes both waves siblings.
Avoiding flat-topped clipping
Amplitude is measured around the midline (height/2). If amplitude is greater than half the height, the peaks clamp flat against the canvas edges. Keep amplitude below height/2 for a clean curve.
Bad: Amplitude 90 · Height 80 → midline 40, peaks reach -50/+130,
clamped to 0 and 80 → flat tops and bottoms.
Good: Amplitude 30 · Height 80 → midline 40, peaks at 10 and 70,
fully inside the canvas → smooth crests.Edge cases and what actually happens
Amplitude exceeds half the height — peaks flatten
By designEach sampled y is clamped to [0, height]. With amplitude 90 and height 80 the crests want to reach y=-50 and y=130, but they clamp to 0 and 80, producing flat-topped plateaus. This is intentional bounds-keeping, not a bug — lower the amplitude or raise the height so the wave fits inside the canvas.
You expected two colours or a gradient
Single fill onlyThe generator emits one <path> with one fill. There is no second colour, no <linearGradient>, and no opacity control. To stack depth, generate several waves and layer them in your own markup with CSS, or use the low-poly background generator for a multi-colour gradient-like field in a single SVG.
You expected built-in layers for a parallax effect
Not generatedThere is no layer-count control — every run produces exactly one path. To build a layered look, run the generator multiple times at different amplitudes and colours and stack the SVGs yourself with position: absolute. The tool will not assemble layers for you.
You expected an animation toggle
Static outputThe SVG contains no <animate>, no SMIL, and no CSS keyframes. It is a static shape. Any flowing-water motion must be added in your own CSS (e.g. a transform: translateX keyframe on a wider wave). The generator never writes animation markup.
Width looks wrong on a narrow container
ExpectedThe viewBox width is hardcoded to 1440 and preserveAspectRatio="none" lets it stretch. In a 375px container the horizontal scale compresses, so cycles look tighter and the curve looks flatter. This is the documented responsive behaviour — there is no width control to change the 1440 value.
Frequency 0.5 produces less than one full cycle
SupportedThe engine clamps frequency to a minimum of 0.5. At 0.5 the curve completes only half a sine cycle across the width — a single rise or dip rather than a repeating wave. Valid output; just not a repeating pattern. The UI slider starts at 1, so reach 0.5 only via the API/runner payload.
Output filename is always wave-divider.svg
By designDownloads are always named wave-divider.svg regardless of the settings. If you generate several variants, rename them yourself (e.g. wave-hero.svg, wave-pricing.svg) after downloading, or use Copy to clipboard and inline them directly.
The wave isn't curvy — it looks faceted up close
ExpectedThe path is built from straight L segments sampled every 10 user units, not from Bézier C curves. At normal divider scale the facets are invisible, but a tall, low-frequency wave zoomed in will show slight angularity. There is no smoothing parameter — the sample step is fixed.
Pasting an SVG to 'edit' the wave
Not an inputThis is a generator, so there is no upload or paste field — it builds the path from your control values. To modify an existing arbitrary SVG (recolour, simplify, minify) use the relevant tool such as svg-hex-swapper or the SVG minifier.
Frequently asked questions
How do I make the wave responsive?
It already is. The generated <svg> has width="100%" and preserveAspectRatio="none", with a viewBox of 0 0 1440 {height}. It stretches horizontally to fill any container while keeping the height you set. Do not add a fixed pixel width — the 100% width plus the non-uniform aspect ratio is what makes it span the full section.
Can I animate the wave to scroll or flow?
Not from this tool — the generated SVG is static, with no <animate> or CSS keyframes inside it. To add a flowing-water effect, wrap it in your own markup and animate transform: translateX in CSS, ideally on a wave generated wider than its container so the loop has no visible seam. Always gate continuous motion behind a prefers-reduced-motion query.
How do I layer multiple waves for a beach effect?
The generator makes one path per run, so layering is a markup job: generate two or three waves at different amplitudes and colours, then stack them with position: absolute and your own offsets. The tool will not combine them into one file. For a multi-colour field in a single SVG, the low-poly generator is a better fit.
What is the difference between a wave divider and a CSS gradient background?
A CSS gradient blends colours but always produces a straight horizontal band. This tool produces a curved <path> boundary between sections. If you want a curved edge, use the wave; if you want a soft colour blend with no shape, a CSS gradient is simpler. The two are compared in detail in the wave vs gradient guide.
Why does the colour fill the bottom and not the top?
The path starts at the bottom-left (M0,{height}), traces the curve, then closes along the bottom (L1440,{height} Z). That encloses the area below the curve, so the fill is the lower region. Tick Flip vertically to mirror it and fill toward the top instead.
Can I set two colours or a gradient fill?
No — there is one colour picker and the output has a single fill. For a gradient look you would add a <linearGradient> to the SVG yourself after copying it, or stack two single-colour waves. The generator never writes more than one fill.
What does the Height slider control — wave height or canvas height?
Canvas height. Height (20–240px) sets the SVG's viewBox height and height attribute. The wave's vertical size is set by Amplitude. Keep Amplitude below Height/2 so the crests stay inside the canvas instead of clamping flat against the edges.
Is the wave a smooth curve or straight segments?
Straight segments. The path samples the sine every 10 user units and joins the points with L (line) commands — there are no Bézier curves and no smoothing option. At divider scale it reads as smooth; only extreme zoom reveals the facets.
Do I need an account or to pay for this?
No. The Wave Divider is free-tier and generative — nothing is uploaded (the badge shows 0 bytes uploaded) and it runs entirely in your browser. Pro and Developer accounts can route the same job through a local @jadapps/runner, but the output is identical.
How many points does the path contain?
Roughly 145. The sampler steps from x=0 to x=1440 in increments of 10 user units, so you get about 145 line points plus the two closing corner points. The count does not change with amplitude or frequency — only the y-values do.
Can I change the 1440 width?
Not through the UI — the internal width is fixed at 1440 user units. Responsiveness is handled by width="100%" and preserveAspectRatio="none", which stretch the 1440-unit drawing to any real container width. You do not need (and cannot set) a different viewBox width.
How do I save several variants with meaningful names?
Generate each variant and download it — every download is named wave-divider.svg, so rename the files yourself (e.g. wave-hero.svg, wave-cta.svg). Or use Copy to clipboard and paste each one inline directly into the relevant section, skipping files entirely.
Privacy first
Every JAD SVG tool runs entirely in your browser using the DOM API and Canvas. Your SVG files never leave your device — verified by zero outbound network requests during processing.