SVG-bølgegenerator
Gratis SVG-bølgegenerator på nett: stabel 1-5 lag med myke bølger, juster grunnlinje, amplitude, bølgelengde og mykhet, bruk gradient med to farger og eksporter vektorkoden.
Hva gjør SVG-bølgegeneratoren?
Den bygger dekorative bølgeformer som ferdig SVG-kode. Du kan stable 1-5 lag, hvert med egen grunnlinjehøyde, amplitude, bølgelengde og mykhet, og fylle alle med én delt lineær gradient med to farger.
Hvordan tegnes bølgekurvene?
Hvert lag lages av en innebygd pathgenerator: bølgen deles i segmenter av en halv bølgelengde, og hvert segment tegnes med kubiske Bézier-kontrollpunkter. Filen forblir bitteliten og perfekt jevn på alle zoomnivåer.
Hva endrer mykhetsglideren?
Ved 0 % blir segmentene rette linjer og bølgen ser ut som en sikksakk. Når du øker, flyttes Bézier-kontrollpunktene utover, og ved 100 % får du fullstendige sinuslignende kurver.
Hvor kan jeg bruke den eksporterte SVG-en?
Overalt der HTML eller SVG fungerer: hero-bakgrunner, skillere mellom seksjoner, bunntekster, presentasjoner og designverktøy. Lim inn den kopierte koden rett i HTML-en din, eller lagre .svg-filen via nedlastingsknappen.
Holdes bølgen skarp i alle størrelser?
Ja. Eksporten beholder en viewBox på 1440x480, grafikken er ren vektorgeometri. Strekk den til 100 % sidebredde eller skaler opp for trykk — kurvene blir aldri uskarpe.
Hvordan fungerer tilfeldighetsknappen?
Den velger et nytt tilfeldig antall lag mellom 1 og 5, nye tilfeldige verdier for hver parameter og to harmoniske tilfeldige farger, og tegner forhåndsvisningen på nytt med en gang. Trykk til du er fornøyd.
Kan jeg bruke merkevarefargene mine?
Ja. De to fargevelgerne setter start og slutt på den lineære gradienten alle lag deler; endrer du dem, farges hele bølgegruppen på én gang.
Sendes data til en server?
Nei. Generatoren kjører helt i nettleseren din med ren JavaScript. Fargene og innstillingene dine forlater aldri siden, og den eksporterte filen lages lokalt på enheten din.
Slik bruker du SVG-bølgegenerator
SVG-bølgegeneratoren lager lagdelte bølgeformer som ren, klar-til-å-lime inn SVG-kode. Hvert lag er en myk kubisk Bézier-kurve fylt med en delt tofargen lineær gradient, noe som gjør den perfekt for hero-seksjonsbakgrunner, sidedelere og bunntekstdekorasjoner. Alt genereres i nettleseren din — ingenting lastes opp.
- Velg hvor mange lag (1-5) du vil ha i Lag-velgeren. Lagene tegnes bakfra og frem, så hvert nytt lag maler over de forrige.
- Velg gradientens start- og slutt-farge med de to fargevelgerne — alle lag deler denne lineære gradienten.
- Finjuster hvert lag med dets fire glidebrytere: Grunnlinjehøyde flytter bølgen opp eller ned, Amplitude bestemmer hvor høye toppene er, Bølgelengde styrer den horisontale avstanden mellom toppene, og Mykhet blander fra rette sikksakklinjer (0%) til fullstendig sinusformede kubiske Bézier-kurver (100%).
- Trykk Tilfeldig for å umiddelbart generere en fersk kombinasjon av lagantall, former og farger til noe ser riktig ut.
- Trykk Last ned SVG for å lagre en .svg-fil, eller Kopier kode for å legge hele SVG-oppmerkingen på utklippstavlen — klar til å limes inn i enhver HTML-fil eller designverktøy.
Til seksjonsdelere på nettsider plasserer du SVG-en mellom to blokker og lar den strekke seg til 100 % bredde — viewBoxen holder kurvene uforvridd i enhver størrelse. Lav mykhet med korte bølgelengder gir et håndtegnet uttrykk, mens full mykhet med lange bølgelengder ser ut som et stille hav.
Relaterte verktøy
- SVG-optimalisator Optimaliser og komprimer SVG-filer umiddelbart i nettleseren. Fjern metadata, kommentarer og unødvendige data, reduser størrelsen med opptil 60%.
- SVG til PNG Konverterer Konverter SVG til PNG, JPEG eller WebP umiddelbart i nettleseren. Tilpass skala, størrelse og bakgrunnsfarge. Gratis, privat, ingen opplasting.
- PNG til SVG-konverterer Gratis PNG til SVG-konverterer online. Gjør PNG, JPG og andre punktbilder til skalerbar vektor-SVG med kontroll på farger og detaljer - helt i nettleseren.
- Border-radius Generator Gratis kreativ border-radius-generator online. Dra i 8 håndtak eller velg en blob-forhåndsinnstilling for å lage organiske CSS-former og kopiere koden umiddelbart.
- Fargekonverterer Gratis online fargekonverterer. Konverter HEX, RGB, HSL, HSV formater umiddelbart med visuell velger. 100% privat, kjører i nettleseren din.
- CSS Easing-generator Gratis online CSS easing-generator. Dra cubic-bezier-kontrollpunktene på en interaktiv kurve, velg blant 18 forhåndsinnstillinger, se en loope ballanimasjon og kopier tidsfunksjonen med en gang.
- CSS Tekstskyggegenerator Gratis online tekstskyggegenerator. Stabble flere skyggelag med forskyvning, uskarphet, farge og gjennomsiktighet, prøv forhåndsinnstillinger som Neon, 3D, Retro og kopier CSS-koden med en gang.
- CSS Clip-path-generator Gratis online CSS clip-path-generator. Formgi polygon-, sirkel-, ellipse- og insett-former med flyttbare punkter, forhåndsvisning og CSS-kode med ett klikk.