Generator fal SVG
Twórz warstwowe kształty fal SVG z regulowaną intensywnością krzywej, liczbą warstw oraz wypełnieniem jednolitym lub gradientowym, a następnie skopiuj kod lub pobierz plik .svg.
Generator fal SVG — Ustaw intensywność krzywej, wybierz, ile warstw fali nałożyć, i zdecyduj się na jednolite wypełnienie albo pionowy gradient od góry do dołu z dwoma kolorami. Podgląd na żywo przerysowuje się, gdy zmieniasz ustawienia, przycisk Wygeneruj ponownie tasuje kształt fali na podstawie ziarna, a pełny kod SVG jest gotowy do skopiowania lub pobrania jako plik .svg. Wszystko jest generowane bezpośrednio w Twojej przeglądarce; żadne ustawienia ani obrazy nigdy nie są wysyłane na serwer.
Czym jest Generator fal SVG?
Generator fal SVG to darmowe narzędzie w przeglądarce dla projektantów stron i programistów front-end, którzy chcą gładkich, organicznych przegród falowych i teł hero bez ręcznego rysowania ścieżek. Ustawiasz intensywność krzywej, układasz od jednej do ośmiu warstw, odwracasz falę tak, by grzbiet skierował się w dół lub w górę, i wypełniasz ją mieszanką jednego koloru albo pionowym gradientem między dwoma kolorami HEX. Każda fala powstaje z generatora pseudolosowego opartego na ziarnie, więc naciśnięcie Wygeneruj ponownie daje świeży kształt przy zachowaniu tych samych ustawień, a wynikiem jest dokładny, skalowalny SVG, który możesz wkleić do dowolnej strony HTML lub pliku projektowego. Używaj go do przegród sekcji, stopek, banerów i teł dekoracyjnych.
Jak używać Generator fal SVG
- Ustaw intensywność krzywej od 0 do 100, aby kontrolować, jak wysokie i wyraziste są grzbiety fali.
- Wybierz liczbę warstw (1-8); więcej warstw układa półprzezroczyste fale dla głębi.
- Użyj Odwróć, aby grzbiet fali skierować w dół lub w górę.
- Otwórz Ustawienia, aby przełączać między jednolitym wypełnieniem a pionowym gradientem i wybrać kolor początkowy oraz końcowy.
- Naciśnij Wygeneruj ponownie, aby przetasować kształt fali, aż Ci się spodoba.
- Skopiuj kod SVG lub kliknij Pobierz, aby zapisać plik wave.svg.
Przykłady
Przegroda sekcji z gradientem
Ustaw intensywność na około 50, zachowaj 3 warstwy, wybierz wypełnienie gradientowe od niebieskiego do fioletowego i pobierz wave.svg, aby umieścić gładką przegrodę między dwiema sekcjami strony.
Wyrazista jednokolorowa fala hero
Podkręć intensywność, ustaw warstwy na 1, przełącz na jednolite wypełnienie i odwróć falę w górę, aby uzyskać duży, efektowny grzbiet za nagłówkiem hero.
Warstwowe tło stopki
Użyj 5-6 warstw o niskiej lub średniej intensywności, aby zbudować miękką, ułożoną warstwowo półprzezroczystą falę, która dobrze sprawdza się jako tło stopki.
Najczęściej zadawane pytania
- Co zmienia intensywność krzywej?
- Intensywność (0-100) kontroluje, jak bardzo każdy grzbiet fali się wznosi i opada. Niskie wartości dają delikatne zmarszczki; wysokie wartości dają wysokie, wyraziste szczyty. Podgląd i SVG aktualizują się natychmiast, gdy ją zmieniasz.
- Dlaczego naciśnięcie Wygeneruj ponownie zmienia kształt?
- Każda fala jest rysowana z generatora pseudolosowego opartego na ziarnie. Wygeneruj ponownie zwiększa ziarno, dzięki czemu otrzymujesz nowy układ grzbietów, zachowując intensywność, warstwy, kolory i wypełnienie dokładnie tak, jak je ustawiono.
- Jaka jest różnica między wypełnieniem jednolitym a gradientowym?
- Jednolite miesza każdą ułożoną warstwę między Twoimi dwoma kolorami, natomiast gradient stosuje na wszystkich warstwach jeden pionowy gradient od pierwszego koloru na górze do drugiego na dole. Otwórz Ustawienia, aby przełączać i wybrać oba kolory.
- Jak używać pobranego SVG?
- Wynik to standardowy, skalowalny kod SVG. Skopiuj go bezpośrednio do swojego HTML albo pobierz wave.svg i zaimportuj do narzędzia projektowego lub odwołaj się do niego jako obrazu. Ponieważ jest wektorowy, pozostaje ostry w każdym rozmiarze.
- Czy cokolwiek jest wysyłane na serwer?
- Nie. Fala jest generowana w całości w Twojej przeglądarce za pomocą lokalnych obliczeń, a pobranie .svg jest budowane z bloba w pamięci. Żadne ustawienia, kolory ani obrazy nigdy nie opuszczają Twojego urządzenia, więc narzędzie działa offline i zachowuje Twoją pracę w prywatności.
Powiązane narzędzia
Kod na obraz
Zamień fragment kodu na obraz z podświetlaniem składni w przeglądarce — z ponad 20 językami, własnymi motywami i tłami, numerami wierszy oraz eksportem PNG lub SVG.
Sprawdzanie kontrastu kolorów
Sprawdź kontrast WCAG 2.1 i wynik APCA Lc między kolorem tekstu a tłem, zobacz plakietki AA, AAA i 3:1 oraz zastosuj najbliższy zaliczony kolor.
Mikser kolorów
Zmieszaj dwa kolory HEX w wybranej proporcji w przestrzeni RGB lub Lab i odczytaj powstały kolor pośredni jako próbkę oraz kopiowalną wartość HEX.
Generator odcieni koloru
Zamień jeden bazowy kolor HEX w skalę OKLCH, HSL lub RGB z regulowaną liczbą stopni, wskazówkami kontrastu WCAG na stopień oraz eksportem do CSS, Tailwind i JSON.