Generator fal SVG

Wielowarstwowe fale SVG do nowoczesnych układów

Falowane separatory to popularny sposób na złagodzenie granicy między dwiema sekcjami strony internetowej. Zamiast twardej poziomej linii zakrzywiona krawędź dodaje ruchu i głębi banerom hero, stopkom, tabelom cenowym i stronom docelowym. Ten generator fal SVG tworzy takie kształty za Ciebie. Nakłada kilka półprzezroczystych lub pełnych warstw, z których każda ma własną losową krzywą, i przenika je między dwoma kolorami, dzięki czemu efekt przypomina falujące wzgórza lub wodę.

Ponieważ wynikiem jest czysty SVG, pozostaje ostry w każdym rozmiarze, waży zaledwie kilkaset bajtów i można go stylować, animować lub osadzić bezpośrednio w HTML. Możesz go też skopiować jako CSS background-image w postaci data URI, co jest wygodne, gdy nie możesz dodawać do projektu dodatkowych plików.

Co zmieniają poszczególne ustawienia

Warstwy określają, ile nakładających się fal zostanie narysowanych — od jednej czystej krzywej do sześciu ułożonych pasm. Amplituda decyduje o wysokości grzbietów i dolin. Złożoność to liczba grzbietów na całej szerokości: niskie wartości dają długie, leniwe fale, a wysokie — wzburzone morze. Gładkość określa sposób łączenia punktów: przy 0% fala jest kanciasta jak zygzak, a przy 100% staje się zaokrągloną krzywą złożoną z sześciennych segmentów Bézier. Wypełnienie może być przejściem między dwoma pełnymi kolorami, po jednym na warstwę, albo poziomym gradientem z rosnącym kryciem w stronę pierwszego planu.

Używanie i eksportowanie fali

Każda fala jest generowana na podstawie liczbowego ziarna (seed), więc projekt jest w pełni odtwarzalny: zapisz ziarno i wartości suwaków, a odtworzysz go później. Użyj opcji Odwróć w pionie dla fal zwisających z górnej krawędzi sekcji i włącz przezroczyste tło, gdy SVG ma leżeć na innym kolorze. Pobierz SVG do zastosowań internetowych lub wyeksportuj PNG o wymiarach 1440 na 480 pikseli do prezentacji i narzędzi graficznych. Umieszczając SVG na stronie, rozciągnij go na pełną szerokość i ustaw tło sekcji zgodne z kolorem tła fali, aby uniknąć cienkich szczelin. Wszystko jest obliczane lokalnie w Twojej przeglądarce, więc nie ma żadnego przesyłania plików ani zakładania konta.