Softonic

SVG-våggenerator

Steg 1 / 2
Nästa

Kurviga vågor är de sektionsavdelare varje landningssida förr eller senare tar till. Den här generatorn samplar en mjuk sinuskurva till en enda ifylld <path>, låter dig ratta amplitud, frekvens och vertikal position, och målar den med valfri enfärgad färg, redo att läggas mellan två sektioner med noll extra CSS. Kopiera den inbäddade SVG-koden och klistra in den direkt på din sida.

Så genererar du en SVG-våg

  1. 1

    Ställ in färgen

    Välj valfri enfärgad ifyllnadsfärg för vågen med färgväljaren.

  2. 2

    Justera amplituden

    Höj amplituden (0 till 150) för en djupare kurva, eller sänk den för en mjuk krusning.

  3. 3

    Ställ in frekvensen

    Välj 1 till 8 cykler över bredden. Fler cykler ger ett stökigare, vågigare mönster.

  4. 4

    Välj upptill eller nedtill

    Förankra ifyllnaden vid underkanten för en sidfotsvåg, eller vid överkanten för en rubrikvåg.

  5. 5

    Kopiera SVG:n

    Kopiera den inbäddade SVG-koden och klistra in den i din HTML eller en CSS-bakgrund.

Var vågor faktiskt gör nytta

  • Sektionsövergångar mellan en färgad hero och en vit kropp, så att blicken flyter i stället för att slå emot en hård linje.
  • Sidfötter där en kurvad överkant mjukar upp det mörka blocket av länkar.
  • Prislistkort som vill ha ett subtilt målat hörn utan en hel bakgrundsbild.
  • Hero-banners där en våg vid underkanten leder läsaren ner i innehållet.

Banans anatomi

Generatorn samplar en sinuskurva till en enda ifylld <path> inuti en 1440 x 320-viewBox:

<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>

Banan går över bredden i korta raka segment som följer sinusvågen, och sluter sig sedan till underkanten (eller överkanten) för att bilda den heltäckande ifyllnaden. Högre amplitud breddar vågtoppar och vågdalar; fler cykler packar in fler av dem över bredden.

Göra den responsiv

  • SVG:n anger redan preserveAspectRatio="none", så vågen sträcks för att fylla valfri bredd.
  • Den kommer med width="100%"; styr höjden med CSS (height: auto eller ett fast värde) efter smak.
  • För att stapla vågor för djup lägger du två kopior i din egen CSS, positionerar dem absolut och ger var och en olika färg och opacitet.

Tillgänglighet

Vågor är dekorativa. Lägg till aria-hidden="true" och role="img" så att skärmläsare hoppar över elementet, och håll allt meningsfullt innehåll i riktiga, intilliggande HTML-element.

Vanliga frågor

Bädda in SVG:n inline i din HTML när du vill att ifyllnaden ska reagera på CSS-variabler (mörkt läge, teman). Använd background-image när vågen är rent dekorativ och du vill att webbläsaren ska cacha den separat.

Ja. Det är en vektorbaserad <path> med preserveAspectRatio="none", så den skalar till valfri bredd utan att bli taggig, till skillnad från en rasterbild som blir suddig när den förstoras.

Ja. Kapsla banan i en SVG och animera dess d-attribut eller en transform: translateX() via CSS-keyframes. Håll rörelsen subtil; våganimationer som spelas upp automatiskt åldras snabbt.

Vanligtvis en bra bit under 1 KB, eftersom det är en enda bana med en enda ifyllnadsfärg. Det är en försvinnande liten bråkdel av vilken PNG-motsvarighet som helst.

Relaterade verktyg

ASCII-tabellreferens

Full ASCII-tabell från 0 till 127 med decimal-, hex-, oktal- och binärvärden samt notation för numeriska HTML-referenser, inklusive NUL, LF och DEL.

HTML-teckenreferens

En sökbar lista över HTML-entiteter med deras namngivna och numeriska koder samt kopiering med ett klick för specialtecken och symboler.

Referens för kortkommandon

Sök dokumenterade standardkommandon för VS Code, Chrome och Bash med GNU Readline i macOS, Windows och Linux.

CSS-pilgnerator

Skapa lokalt en CSS-pil med riktning, färg, storlek och ramens tjocklek och kopiera sedan regeln.

Generator för platshållarbilder

Skapa en bild på 1–4000 px med egna färger och text, ladda ned PNG eller kopiera webbadress och HTML.

Markdown-förhandsvisare

Skriv Markdown och se den renderade HTML:en uppdateras live. GitHub-flavored syntax med tabeller, uppgiftslistor, inramad kod och autolänkar.

Verktyget finns på andra språk