SVG-aaltogeneraattori
Ilmainen SVG-aaltogeneraattori verkossa: pinota 1-5 kerrosta pehmeitä aaltoja, säädä perusviivaa, amplitudia, aallonpituutta ja pehmeyttä, käytä kaksiväristä liukuväriä ja vie vektelikoodi.
Mitä SVG-aaltogeneraattori tekee?
Se rakentaa koriste-aaltomuotoja valmiiksi käytettäväksi SVG-koodiksi. Voit pinota 1-5 kerrosta, joilla kullakin on oma perusviivan korkeus, amplitudi, aallonpituus ja pehmeys, ja täyttää ne kaikki yhdellä jaetulla kaksivärisellä lineaarisella liukuvärillä.
Miten aaltokäyrät piirretään?
Jokaisen kerroksen luo sisäänrakennettu polkugeneraattori: aalto jaetaan puolen aallonpituuden jaksoihin ja jakso piirretään kuutiollisen Bézier-käyrän ohjauspisteillä. Tiedosto pysyy pienenä ja täydellisen pehmeänä millä tahansa zoomaustasolla.
Mitä pehmeysliukuja muuttaa?
Arvolla 0 % jaksot muuttuvat suoriksi viivoiksi ja aalto näyttää sahakuvioiselta. Kasvatettaessa Bézier-ohjauspisteet siirtyvät ulospäin, ja arvolla 100 % saat täysin sinimuotoiset käyrät.
Missä viedytä SVG:tä voi käyttää?
Kaikkialla, missä HTML tai SVG kelpaa: hero-taustat, osioiden väliset erottimet, alatunnisteet, esitykset ja suunnittelutyökalut. Liitä kopioitu koodi suoraan HTML:ään tai tallenna .svg-tiedosto latauspainikkeella.
Pysyykö aalto terävänä kaikissa koossa?
Kyllä. Viennissä säilytetään 1440x480-viewbox, grafiikka on puhdasta vektorigeometriaa. Venytä 100 %:n sivunleveyteen tai suurenna painoon — käyrät eivät koskaan sumentu.
Miten satunnaispainike toimii?
Se valitsee uuden satunnaisen kerrosmäärän 1-5, jokaiselle parametrille uudet satunnaisarvot ja kaksi harmonista satunnaisväriä ja piirtää esikatselun heti uudelleen. Paina, kunnes tulos miellyttää.
Voinko käyttää omia brändivärejä?
Voit. Kaksi värinvalitsinta asettavat kaikkien kerrosten jakaman lineaarisen liukuvärin alku- ja loppupisteen; niiden muuttaminen värää koko aaltiryhmän kerralla uudelleen.
Lähetetäänkö tietoja palvelimelle?
Ei. Generaattori toimii täysin selaimessasi puhdalla JavaScriptillä. Värisi ja asetuksesi eivät koskaan lähde sivulta, ja viety tiedosto luodaan paikallisesti laitteellesi.
Näin käytät työkalua SVG-aaltogeneraattori
SVG-aaltogeneraattori luo kerrostuneita aaltomuotoja puhtaana, liitettäväksi valmiina SVG-koodina. Jokainen kerros on pehmeä kolmannen asteen Bézier-käyrä, täytettynä yhteisellä kaksivärisellä lineaarisella liukuvärillä — täydellinen hero-osion taustoihin, sivunjakajiin ja alatunnistekoristeisiin. Kaikki luodaan selaimessasi — mitään ei lähetetä verkkoon.
- Valitse kuinka monta kerrosta (1-5) haluat Kerrokset-valitsimesta. Kerrokset piirretään takaa eteenpäin, joten jokainen uusi kerros maalaa edellisten päälle.
- Valitse liukuvärin alku- ja loppuväri kahdella värinvalitsimella — kaikki kerrokset jakavat tämän lineaarisen liukuvärin.
- Hienosäädä jokaista kerrosta sen neljällä liukusäätimellä: Perusviivan korkeus siirtää aallon ylös tai alas, Amplitudi määrittää kuinka korkeita harjat ovat, Aallonpituus ohjaa harjojen välistä vaakasuoraa etäisyyttä, ja Pehmyt sekoittaa suorista sahalinjoista (0%) täysin sinimuotoisiin kolmannen asteen Bézier-käyriin (100%).
- Paina Satunnaista luodaksesi heti tuoreen yhdistelmän kerrosmääriä, muotoja ja värejä kunnes jokin näyttää oikealta.
- Paina Lataa SVG tallentaaksesi .svg-tiedoston, tai Kopioi koodi viedäksesi koko SVG-merkinnän leikepöydällesi — valmiina liitettäväksi mihin tahansa HTML-tiedostoon tai suunnittelutyökaluun.
Verkkosivun osionjakajiin aseta SVG kahden lohkon väliin ja anna sen venyä 100 %:n leveyteen — viewBox pitää käyrät muotoutumattomina kaikissa kokoissa. Matala pehmeys lyhyillä aallonpituuksilla antaa käsialan tunnelman, kun taas täysi pehmeys pitkillä aallonpituuksilla näyttää tyyneltä mereltä.
Aiheeseen liittyvät työkalut
- SVG-optimoija Optimoi ja pakkaa SVG-tiedostot välittömästi selaimessasi. Poista metatiedot, kommentit ja editorin roskat, pienennä koko jopa 60%.
- SVG PNG -muunnin Muunna SVG PNG-, JPEG- tai WebP-muotoon välittömästi selaimessasi. Mukauta skaalaa, kokoa ja taustaväriä. Ilmainen, yksityinen, ei latausta.
- PNG SVG -muunnin Ilmainen PNG SVG -muunnin verkossa. Muuta PNG-, JPG- ja muut bittikarttakuvat skaalautuvaksi vektori-SVG:ksi väri- ja yksityiskohtasäädöllä - kokonaan selaimessasi.
- Border-radius Generaattori Ilmainen luova border-radius-generaattori verkossa. Raahaa 8 kahvaa tai valitse blob-pohja luodaksesi orgaanisia CSS-muotoja ja kopioidaksesi koodin heti.
- Värimuunnin Ilmainen online-värimuunnin. Muunna HEX, RGB, HSL, HSV muodot välittömästi visuaalisella valitsimella. 100% yksityinen, toimii selaimessasi.
- CSS easing generaattori Ilmainen online CSS easing generaattori. Raahaa cubic-bezier-ohjauspisteitä interaktiivisella käyrällä, valitse 18 esiasetuksen joukosta, katso jatkuvaa pallon animaatiota ja kopioi ajoitusfunktio heti.
- CSS tekstivarjo generaattori Ilmainen online tekstivarjogeneraattori. Pinoa useita varjokerroksia siirrolla, sumennuksella, värillä ja peittävyydellä, kokeile Neon-, 3D- ja Retro-esiasetuksia ja kopioi CSS heti.
- CSS clip-path generaattori Ilmainen online CSS clip-path generaattori. Suunnittele polygon-, circle-, ellipse- ja inset-muodot raahattavilla pisteillä, live-esikatselulla ja CSS-koodin kopioinnilla yhdellä klikkauksella.