Softonic

Generator fal SVG

Krok 1 / 2
Dalej

Zakrzywione fale to separatory sekcji, po które prędzej czy później sięga każdy landing page. Ten generator próbkuje gładką krzywą sinusoidalną do pojedynczej wypełnionej <path>, pozwala dobrać amplitudę, częstotliwość i pozycję w pionie oraz maluje ją dowolnym jednolitym kolorem, gotową do wstawienia między dwie sekcje bez żadnego dodatkowego CSS. Skopiuj kod inline SVG i wklej go bezpośrednio na swoją stronę.

Jak wygenerować falę SVG

  1. 1

    Ustaw kolor

    Wybierz dowolny jednolity kolor wypełnienia fali za pomocą próbnika kolorów.

  2. 2

    Dostosuj amplitudę

    Zwiększ amplitudę (od 0 do 150) dla głębszej krzywej albo zmniejsz ją dla delikatnego falowania.

  3. 3

    Ustaw częstotliwość

    Wybierz od 1 do 8 cykli na szerokości. Więcej cykli oznacza gęstszy, bardziej falisty wzór.

  4. 4

    Wybierz górę lub dół

    Zakotwicz wypełnienie przy dolnej krawędzi dla fali stopki albo przy górnej krawędzi dla fali nagłówka.

  5. 5

    Skopiuj SVG

    Skopiuj kod inline SVG i wklej go do swojego HTML albo do tła CSS.

Gdzie fale naprawdę się sprawdzają

  • Przejścia między sekcjami kolorowego hero a białym ciałem strony, by wzrok płynął, zamiast trafiać na twardą linię.
  • Stopki, gdzie zakrzywiona górna krawędź zmiękcza ciemny blok linków.
  • Karty cenowe, które chcą subtelnie pomalowanego rogu bez pełnego obrazu tła.
  • Banery hero, gdzie fala przy dolnej krawędzi prowadzi wzrok czytelnika w głąb treści.

Anatomia ścieżki

Generator próbkuje krzywą sinusoidalną do pojedynczej wypełnionej <path> wewnątrz viewBox 1440 x 320:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none" width="100%" height="320"><path d="M 0,160 L 24,180 L 48,199 ... L 1440,320 L 0,320 Z" fill="#6366F1"/></svg>

Ścieżka przebiega przez szerokość krótkimi prostymi odcinkami, które odwzorowują falę sinusoidalną, a potem zamyka się przy dolnej krawędzi (albo górnej), tworząc jednolite wypełnienie. Większa amplituda poszerza grzbiety i doliny; więcej cykli upakowuje ich więcej na szerokości.

Jak uczynić ją responsywną

  • SVG już ustawia preserveAspectRatio="none", więc fala rozciąga się na dowolną szerokość.
  • Ma width="100%"; wysokość reguluj w CSS (height: auto albo stała wartość) wedle uznania.
  • By nakładać fale dla głębi, umieść dwie kopie we własnym CSS, ustaw je bezwzględnie i nadaj każdej inny kolor i krycie.

Dostępność

Fale są dekoracyjne. Dodaj aria-hidden="true" i role="img", by czytniki ekranu pomijały element, a całą znaczącą treść trzymaj w prawdziwych, sąsiadujących elementach HTML.

Najczęściej zadawane pytania

Wstaw SVG inline w HTML, gdy chcesz, by wypełnienie reagowało na zmienne CSS (tryb ciemny, motywy). Użyj background-image, gdy fala jest czysto dekoracyjna i chcesz, by przeglądarka cachowała ją osobno.

Tak. To wektorowa <path> z preserveAspectRatio="none", więc skaluje się na dowolną szerokość bez postrzępienia, w przeciwieństwie do obrazu rastrowego, który rozmywa się przy powiększaniu.

Tak. Opakuj ścieżkę w SVG i animuj jej atrybut d albo transform: translateX() przez klatki kluczowe CSS. Trzymaj ruch subtelny; automatycznie odtwarzane animacje fal szybko się starzeją.

Zwykle wyraźnie poniżej 1 KB, bo to pojedyncza ścieżka z jednym kolorem wypełnienia. To znikomy ułamek dowolnego odpowiednika PNG.

Powiązane narzędzia

Tabela ASCII

Pełna tabela ASCII od 0 do 127 z zapisem dziesiętnym, szesnastkowym, ósemkowym i binarnym oraz notacją numerycznych odwołań HTML, w tym kodami sterującymi NUL, LF i DEL.

Referencja znaków HTML

Przeszukiwalna lista encji HTML wraz z ich kodami nazwanymi i liczbowymi oraz kopiowaniem jednym kliknięciem specjalnych znaków i symboli.

Skróty klawiaturowe

Wyszukuj udokumentowane skróty domyślne VS Code, Chrome i Bash z GNU Readline w macOS, Windows i Linux.

Formatowanie HTML

Formatuj HTML lokalnie w przeglądarce, używając wcięć dwóch lub czterech spacji. HTML nie jest wysyłany ani walidowany.

Podgląd Markdown

Pisz w Markdown i obserwuj, jak wyrenderowany HTML aktualizuje się na żywo. Składnia w stylu GitHub z tabelami, listami zadań, ogrodzonymi blokami kodu i automatycznymi odnośnikami.

Formater JavaScript

Formatuj JavaScript, JSX, TypeScript i JSON z konfigurowalnym wcięciem, stylem cudzysłowów, średnikami i przecinkami końcowymi.

Narzędzie jest dostępne w innych językach