SVG-vågsgenerator
Gratis SVG-vågsgenerator online: stapla 1-5 lager mjuka vågor, ställ in baslinje, amplitud, våglängd och jämnhet, använd en tvåfärgsgradient och exportera vektorkoden.
Vad gör SVG-vågsgeneratorn?
Den bygger dekorativa vågformer som färdig SVG-kod. Du kan stapla 1-5 lager, vart och ett med egen baslinjehöjd, amplitud, våglängd och jämnhet, och fylla dem alla med en gemensam tvåfärgsgradient.
Hur ritas vågkurvorna?
Varje lager skapas av en inbyggd pathgenerator: vågen delas upp i segment av en halv våglängd och varje segment ritas med kubiska Bézier-kontrollpunkter. Filen förblir minimal och perfekt jämn på valfri zoomnivå.
Vad ändrar jämnhetsreglaget?
Vid 0 % blir segmenten raka linjer och vågen ser ut som en sicksack. Höjer du reglaget flyttas Bézier-kontrollpunkterna utåt och vid 100 % får du fullständiga sinusliknande kurvor.
Var kan jag använda den exporterade SVG:en?
Överallt där HTML eller SVG fungerar: hero-bakgrunder, avdelare mellan sidsektioner, sidfötter, presentationer och designverktyg. Klistra in den kopierade koden direkt i din HTML eller spara .svg-filen via nedladdningsknappen.
Håller vågen sig skarp i alla storlekar?
Ja. Exporten behåller en viewBox på 1440x480, grafiken är ren vektorgeometri. Sträck den till 100 % sidbredd eller skala upp för tryck — kurvorna blir aldrig suddiga.
Hur fungerar slumpknappen?
Den väljer ett nytt slumpat antal lager mellan 1 och 5, nya slumpvärden för varje parameter och två harmoniska slumpfärger och ritar om förhandsvisningen direkt. Tryck tills du är nöjd.
Kan jag använda mina varumärkesfärger?
Ja. De två färgväljarna ställer in start och slut för den linjära gradient som alla lager delar; ändra dem så färghänds hela våggruppen på en gång.
Skickas någon data till en server?
Nej. Generatorn körs helt i din webbläsare med vanlig JavaScript. Dina färger och inställningar lämnar aldrig sidan och den exporterade filen skapas lokalt på din enhet.
Hur man använder SVG-vågsgenerator
SVG-vågsgeneratorn skapar skiktade vågformer som ren, redo att klistra in SVG-kod. Varje lager är en mjuk kubisk Bézier-kurva fylld med en gemensam tvåfärgad linjär gradient, vilket gör den perfekt för hero-sektionsbakgrunder, sidodelare och sidfotsdekorationer. Allt genereras i din webbläsare — inget laddas upp.
- Välj hur många lager (1-5) du vill ha i Lager-väljaren. Lagren ritas bakifrån och fram, så varje nytt lager målar över de föregående.
- Välj gradientens start- och slutfärg med de två färgväljarna — alla lager delar denna linjära gradient.
- Finjustera varje lager med dess fyra reglage: Baslinjehöjden flyttar vågen upp eller ner, Amplituden bestämmer hur höga topparna är, Våglängden styr det horisontella avståndet mellan topparna, och Jämnheten blandar från raka sicksacklinjer (0%) till fullständigt sinusformade kubiska Bézier-kurvor (100%).
- Tryck Slumpa för att direkt generera en färsk kombination av lagerantal, former och färger tills något ser rätt ut.
- Tryck Ladda ner SVG för att spara en .svg-fil, eller Kopiera kod för att lägga hela SVG-markeringen på urklipp — redo att klistras in i vilken HTML-fil eller designverktyg som helst.
För sektionsdelare på webbplatser placerar du SVG:n mellan två block och låter den sträcka sig till 100 % bredd — viewBoxen håller kurvorna osträckta i alla storlekar. Låg jämnhet med korta våglängder ger en handritad känsla, medan full jämnhet med långa våglängder ser ut som ett stilla hav.
Relaterade verktyg
- SVG-optimerare Optimera och komprimera SVG-filer omedelbart i din webbläsare. Ta bort metadata, kommentarer och editordata, minska storleken med upp till 60%.
- SVG till PNG Konverterare Konvertera SVG till PNG, JPEG eller WebP direkt i din webbläsare. Anpassa skala, storlek och bakgrundsfärg. Gratis, privat, ingen uppladdning.
- PNG till SVG-konverterare Gratis PNG till SVG-konverterare online. Förvandla PNG, JPG och andra bitmappar till skalbar vektor-SVG med kontroll av färger och detaljer - helt i din webbläsare.
- Border-radius Generator Gratis kreativ border-radius-generator online. Dra i 8 handtag eller välj en blob-förinställning för att skapa organiska CSS-former och kopiera koden direkt.
- Färgkonverterare Gratis online färgkonverterare. Konvertera HEX, RGB, HSL, HSV format omedelbart med visuell väljare. 100% privat, körs i din webbläsare.
- CSS Easing-generator Gratis online CSS easing-generator. Dra cubic-bezier-kontrollpunkterna på en interaktiv kurva, välj bland 18 förinställningar, titta på en loopande bollanimation och kopiera tidsfunktionen direkt.
- CSS Textskugggenerator Gratis online textskugggenerator. Stapla flera skugglager med offset, oskärpa, färg och opacitet, prova förinställningar som Neon, 3D, Retro och kopiera CSS-koden direkt.
- CSS Clip-path-generator Gratis online CSS clip-path-generator. Formge polygon-, cirkel-, ellips- och inset-former med dragbara punkter, liveförhandsvisning och CSS-kod med ett klick.