Zamiast prostej linii — fala między sekcjami
A wave between sections, instead of a plain line
Ustaw amplitudę i częstotliwość, a generator zbuduje gładką falę krzywymi Béziera — gotowy kod SVG do wklejenia na styku dwóch sekcji strony.
Set the amplitude and frequency, and the generator builds a smooth wave out of Bézier curves — ready SVG code to paste at the seam between two page sections.
<svg viewBox="0 0 1440 140" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"> <path fill="#ec4a0a" d="..."></path> </svg>
Ta fala jest zbudowana dokładnie tak samo jak krzywe w Kursie SVG — konwersją punktów na krzywe Béziera (Catmull-Rom → Bezier), omówioną w Lekcji 3. Jeśli chcesz zrozumieć, co dzieje się "pod maską" tego generatora, tam to wyjaśniamy krok po kroku.
This wave is built exactly the same way as the curves in the SVG Course — by converting points into Bézier curves (Catmull-Rom → Bezier), covered in Lesson 3. If you want to understand what's happening "under the hood" of this generator, that's where we explain it step by step.
Ustaw amplitudę i częstotliwość
Set amplitude and frequency
Amplituda decyduje o wysokości fali, częstotliwość — ile pełnych fal mieści się na szerokości sekcji.
Amplitude sets the wave's height, frequency sets how many full waves fit across the section's width.
Dobierz kolory
Pick the colors
Kolor górnej i dolnej sekcji w podglądzie — to pomaga ocenić, jak fala będzie wyglądać na styku dwóch realnych bloków.
The top and bottom section colors in the preview — this helps judge how the wave will look at the seam of two real blocks.
Skopiuj SVG
Copy the SVG
Wklej gotowy znacznik <svg> bezpośrednio w HTML, na styku dwóch sekcji swojej strony.
Paste the ready <svg> tag directly into your HTML, at the seam of two page sections.
- Miękkie przejście między sekcją hero a resztą strony docelowej.
- Dekoracyjny akcent na stronach produktowych i portfolio.
- Rozbicie monotonii prostych, prostokątnych sekcji.
- A soft transition between a hero section and the rest of a landing page.
- A decorative accent on product and portfolio pages.
- Breaking up the monotony of plain rectangular sections.
Czym jest ten generator? To wizualne narzędzie do budowania fal SVG jako dekoracyjnego przejścia między sekcjami strony — zamiast kopiować gotowe presety, kontrolujesz amplitudę i częstotliwość bezpośrednio.
What is this tool? A visual way to build SVG waves as a decorative transition between page sections — instead of copying fixed presets, you control amplitude and frequency directly.
Dlaczego fala jest zbudowana z krzywych, a nie z linii?
Why is the wave built from curves instead of straight lines?
Linie proste dają załamania, nie płynną falę. Krzywe Béziera pozwalają przejść gładko przez każdy punkt fali, bez ostrych kątów — dokładnie tak, jak wygląda naturalna fala.
Straight lines create sharp kinks, not a smooth wave. Bézier curves let the path glide smoothly through each wave point, with no sharp angles — exactly how a natural wave looks.
Jak wkleić ten SVG na stronie?
How do I paste this SVG into a page?
Wklej cały skopiowany znacznik <svg> bezpośrednio w kodzie
HTML na styku dwóch sekcji — najczęściej jako ostatni element sekcji górnej, z
margin-bottom ujemnym lub pozycjonowaniem absolutnym, żeby nachodził na dolną sekcję.
Paste the entire copied <svg> tag directly into the HTML at
the seam of two sections — usually as the last element of the top section, with a negative
margin-bottom or absolute positioning so it overlaps the bottom section.
Czy mogę użyć tego SVG jako tła CSS zamiast znacznika HTML?
Can I use this SVG as a CSS background instead of an HTML tag?
Tak — skopiowany kod można też zakodować jako background-image:
url("data:image/svg+xml,..."), jeśli wolisz podejście czysto CSS-owe zamiast
wstawiania znacznika w treść strony.
Yes — the copied code can also be encoded as
background-image: url("data:image/svg+xml,...") if you prefer a pure-CSS
approach instead of inserting a tag into the page content.
Co robi „Odwróć kierunek fali”?
What does "invert wave direction" do?
Odwraca fazę fali (szczyty stają się dolinami i odwrotnie) — przydatne, gdy ten sam wzór fali ma pojawić się symetrycznie na górze i na dole tej samej sekcji.
It inverts the wave's phase (peaks become troughs and vice versa) — useful when the same wave pattern should appear symmetrically at the top and bottom of the same section.
Czy narzędzie wysyła moje dane gdziekolwiek?
Does the tool upload my data anywhere?
Nie. Generator działa w całości w Twojej przeglądarce.
No. The generator runs entirely in your browser.
Czym jest CSS/SVG Wave Divider Generator?
Proste, prostokątne sekcje strony bywają wizualnie sztywne. Fala SVG umieszczona na styku dwóch sekcji dodaje miękkości i ruchu bez żadnego kosztu wydajnościowego — to statyczny plik wektorowy, nie animacja ani obrazek rastrowy.
Jak matematycznie powstaje fala
Generator próbkuje funkcję sinus wzdłuż szerokości sekcji, gdzie amplituda kontroluje wysokość wychyleń, a częstotliwość — ile pełnych cykli fali mieści się w tej szerokości. Zamiast łączyć te punkty prostymi liniami, generator konwertuje je na sekwencję krzywych Béziera metodą Catmull-Rom — tą samą techniką, którą tłumaczymy krok po kroku w Kursie SVG. Efekt to płynna, naturalnie wyglądająca fala bez widocznych załamań.
Amplituda kontra częstotliwość
- Wysoka amplituda, niska częstotliwość — jedna albo dwie duże, łagodne fale.
- Niska amplituda, wysoka częstotliwość — drobne, gęste faliste przejście, przypominające teksturę wody.
- Wysoka amplituda i częstotliwość naraz — mocno wyrazisty, dynamiczny kształt.
Praktyczne wskazówki
Fala działa najlepiej jako subtelny akcent, nie główny element strony — zbyt duża amplituda na wąskiej sekcji potrafi wyglądać chaotycznie. Testuj wygenerowany SVG na rzeczywistych kolorach Twojej strony, nie tylko na podglądzie tutaj, bo kontrast między sekcjami zmienia odbiór kształtu.
Wdrożenie w produkcji
Wklej znacznik <svg> bezpośrednio w HTML, ustawiając mu pełną szerokość
(width: 100%) i display: block, żeby nie zostawiał niechcianej
przestrzeni pod spodem (typowy problem elementów inline jak SVG domyślnie).
What is a CSS/SVG Wave Divider Generator?
Plain, rectangular page sections can feel visually stiff. An SVG wave placed at the seam of two sections adds softness and movement at no performance cost — it's a static vector file, not an animation or a raster image.
How the wave is built mathematically
The generator samples a sine function along the section's width, where amplitude controls the height of the swings and frequency controls how many full wave cycles fit within that width. Instead of connecting those points with straight lines, the generator converts them into a sequence of Bézier curves using the Catmull-Rom method — the same technique we explain step by step in the SVG Course. The result is a smooth, naturally looking wave with no visible kinks.
Amplitude vs frequency
- High amplitude, low frequency — one or two large, gentle waves.
- Low amplitude, high frequency — a fine, dense wavy transition, resembling water texture.
- High amplitude and frequency together — a bold, dynamic shape.
Practical tips
A wave works best as a subtle accent, not the page's main element — too much amplitude on a narrow section can look chaotic. Test the generated SVG against your page's real colors, not just this preview, since the contrast between sections changes how the shape reads.
Using it in production
Paste the <svg> tag directly into your HTML, setting it to full width
(width: 100%) and display: block, so it doesn't leave unwanted
space underneath (a common issue with inline elements like SVG by default).
Sprawdź też inne generatory CSS.
Check out the other CSS generators too.
Grid, clip-path, gradienty i cienie — wszystko w jednym miejscu, bez instalacji.
Grid, clip-path, gradients, and shadows — all in one place, no install needed.