SVG-bølgegenerator
Gratis SVG-bølgegenerator online: stabel 1-5 lag med bløde bølger, justér basislinje, amplitude, bølgelængde og blødhed, anvend en tokfarvet gradient og eksportér vektorkoden.
Hvad gør SVG-bølgegeneratoren?
Den bygger dekorative bølgeformer som klar-til-brug SVG-kode. Du kan stable 1-5 lag, hvert med egen basislinjehøjde, amplitude, bølgelængde og blødhed, og fylde dem alle med én delt lineær gradient i to farver.
Hvordan tegnes bølgekurverne?
Hvert lag laves af en indbygget pathgenerator: bølgen deles i segmenter af en halv bølgelængde, og hvert segment tegnes med kubiske Bézier-kontrollpunkter. Filen forbliver bittelille og perfekt blød ved enhver zoomning.
Hvad ændrer blødhedsskyderen?
Ved 0 % bliver segmenterne lige linjer, og bølgen ligner en takket streg. Skru op, og Bézier-kontrollpunkterne rykker udad; ved 100 % får du fulde sinuslignende kurver.
Hvor kan jeg bruge den eksporterede SVG?
Overalt hvor HTML eller SVG virker: hero-baggrunde, skillelinjer mellem sektioner, footere, præsentationer og designværktøjer. Indsæt den kopierede kode direkte i din HTML, eller gem .svg-filen via downloadknappen.
Forbliver bølgen skarp i alle størrelser?
Ja. Eksporten bevarer en viewBox på 1440x480, grafikken er ren vektorgeometri. Stræk den til 100 % sidebredde eller op skalér til print — kurverne bliver aldrig slørede.
Hvordan virker tilfældighedsknappen?
Den vælger et nyt tilfældigt antal lag mellem 1 og 5, nye tilfældige værdier til hver parameter og to harmoniske tilfældige farver og tegner forhåndsvisningen om med det samme. Tryk indtil du er tilfreds.
Kan jeg bruge mine brandfarver?
Ja. De to farvevælgere sætter start og slut på den lineære gradient, som alle lag deler; ændrer du dem, farves hele bølgegruppen på én gang.
Sendes data til en server?
Nej. Generatoren kører helt i din browser med ren JavaScript. Dine farver og indstillinger forlader aldrig siden, og den eksporterede fil oprettes lokalt på din enhed.
Sådan bruges SVG-bølgegenerator
SVG-bølgegeneratoren skaber lagdelte bølgeformer som ren, klar til at indsætte SVG-kode. Hvert lag er en blød kubisk Bézier-kurve fyldt med en delt tokfarvet lineær gradient, hvilket gør den perfekt til hero-sektionsbaggrunde, sidedelere og sidefodsdekorationer. Alt genereres i din browser — intet uploades.
- Vælg hvor mange lag (1-5) du vil have i Lag-vælgeren. Lagene tegnes bagfra og frem, så hvert nyt lag maler over de forrige.
- Vælg gradientens start- og slutfarve med de to farvevælgere — alle lag deler denne lineære gradient.
- Finjustér hvert lag med dets fire skydere: Basislinjehøjde flytter bølgen op eller ned, Amplitude bestemmer hvor høje toppene er, Bølgelængde styrer den vandrette afstand mellem toppene, og Blødhed blander fra lige zigzaglinjer (0%) til fuldt sinusformede kubiske Bézier-kurver (100%).
- Tryk Tilfældig for straks at generere en frisk kombination af lagantal, former og farver, til noget ser rigtigt ud.
- Tryk Download SVG for at gemme en .svg-fil, eller Kopiér kode for at lægge hele SVG-markup på udklipsholderen — klar til at indsættes i enhver HTML-fil eller designværktøj.
Til sektionsdelere på websites placerer du SVG-en mellem to blokke og lader den strække sig til 100 % bredde — viewBoxen holder kurverne uforvrængede i enhver størrelse. Lav blødhed med korte bølgelængder giver et håndtegnet udtryk, mens fuld blødhed med lange bølgelængder ligner et stille hav.
Relaterede værktøjer
- SVG-optimerer Optimer og komprimer SVG-filer øjeblikkeligt i din browser. Fjern metadata, kommentarer og unødvendige data, reducer størrelsen med op til 60%.
- SVG til PNG Konverter Konverter SVG til PNG, JPEG eller WebP øjeblikkeligt i din browser. Tilpas skala, størrelse og baggrundsfarve. Gratis, privat, ingen upload.
- PNG til SVG-konverter Gratis PNG til SVG-konverter online. Forvandle PNG, JPG og andre bitmaps til skalerbar vektor-SVG med kontrol af farver og detaljer - helt i din browser.
- Border-radius Generator Gratis kreativ border-radius-generator online. Træk i 8 håndtag eller vælg en blob-forudindstilling for at skabe organiske CSS-former og kopiere koden med det samme.
- Farvekonverter Gratis online farvekonverter. Konverter HEX, RGB, HSL, HSV formater øjeblikkeligt med visuel vælger. 100% privat, kører i din browser.
- CSS Easing-generator Gratis online CSS easing-generator. Træk cubic-bezier-kontrollpunkterne på en interaktiv kurve, vælg mellem 18 forudindstillinger, se en loopende boldanimation og kopiér tidsfunktionen med det samme.
- CSS Tekstskyggegenerator Gratis online tekstskyggegenerator. Stabl flere skyggelag med forskydning, sløring, farve og gennemsigtighed, prøv forudindstillinger som Neon, 3D, Retro og kopier CSS-koden med det samme.
- CSS Clip-path-generator Gratis online CSS clip-path-generator. Design polygon-, cirkel-, ellipse- og inset-former med trkbare punkter, live forhåndsvisning og CSS-kode med ét klik.