SVG hullám generátor
Ingyenes SVG hullám generátor online: rakj 1-5 réteg sima hullámot, állítsd be az alapvonalat, amplitúdót, hullámhosszat és simaságot, alkalmazz kétszínű színátmenetet, és exportáld a vektoros kódot.
Mit csinál az SVG hullám generátor?
Dekoratív hullámformákat készít használatra kész SVG-kódként. 1-5 réteget rakhat egymásra, mindegyik saját alapvonal-magassággal, amplitúdóval, hullámhosszal és simasággal, és mindet egy közös kétszínű lineáris színátmenet tölti ki.
Hogyan rajzolódnak a hullámgörbék?
Minden réteget beépített útvonalgenerátor állít elő: a hullám fél hullámhosszú szakaszokra bomlik, és minden szakaszt köbös Bézier-vezérlőpontokkal rajzolunk. A fájl pici marad, és minden nagyításnál tökéletesen sima.
Mit változtat a simaság csúszka?
0%-nál a szakaszok egyenes vonalakká válnak, és a hullám cikcakkosnak tűnik. Emelésével a Bézier-vezérlőpontok kifelé mozdulnak, 100%-nál teljes szinuszhoz hasonló görbéket kap.
Hol használhatom az exportált SVG-t?
Ott is, ahol HTML vagy SVG elfogadott: hero háttérképek, oldalszakaszok közti elválasztók, láblécek, prezentációk és dizájneszközök. A másolt kódot illessze be közvetlenül a HTML-be, vagy a letöltés gombbal mentse a .svg fájlt.
Éles marad a hullám bármilyen méretben?
Igen. Az export megőrzi a 1440x480 viewBox-ot, a grafika tiszta vektorgeometria. Húzza 100% oldalszélességre vagy nagyja nyomdára — a görbék soha nem mosódnak el.
Hogyan működik a Véletlen gomb?
Új véletlen rétegszámot választ 1 és 5 között, minden paraméterhez új véletlen értékeket és két harmonikus véletlen színt, majd azonnal újrarajzolja az előnézetet. Nyomogassa, míg tetszeni nem fog.
Használhatom a saját márkaszíneimet?
Igen. A két színválasztó a közös lineáris színátmenet kezdő- és végpontját állítja, amelyet minden réteg használ; megváltoztatásukkal az egész hullámcsoport egyszerre színt vált.
Kerül adat szerverre?
Nem. A generátor teljesen a böngészőjében fut, tiszta JavaScripttel. A színei és beállításai soha nem hagyják el az oldalt, az exportált fájl pedig helyben készül az eszközén.
A(z) SVG hullám generátor használata
Az SVG hullámgenerátor rétegezett hullámformákat készít tiszta, beillesztésre kész SVG-kódként. Minden réteg egy sima köbös Bézier-görbe, amelyet közös kétszínű lineáris színátmenet tölt ki — ez tökéletes hero-szekció hátterekhez, oldalelválasztókhoz és lábjegyzet-díszítésekhez. Minden a böngészőjében készül — semmi nem töltődik fel.
- Válassza ki a Rétegek választóban, hány réteget (1-5) szeretne. A rétegek hátulról előre rajzolódnak, így minden új réteg az előzőekre fest rá.
- Válassza ki az átmenet kezdő- és zárószínét a két színválasztóval — minden réteg ezt a lineáris átmenetet használja közösen.
- Finomhangolja az egyes rétegeket a négy csúszkájukkal: Az alapvonal magassága fel-le mozgatja a hullámot, az Amplitúdó határozza meg, milyen magasak a gerincek, a Hullámhossz a gerincek közti vízszintes távolságot irányítja, a Simaság pedig az egyenes cikcakkvonalaktól (0%) a teljesen szinusz alakú köbös Bézier-görbékig (100%) kever.
- Nyomja meg a Véletlen gombot, hogy azonnal friss kombinációt kapjon rétegszámból, formákból és színekből, amíg valami jól nem néz ki.
- Nyomja meg az SVG letöltése gombot egy .svg fájl mentéséhez, vagy a Kód másolása gombot, hogy a teljes SVG-jelölést a vágólapra tegye — készen bármilyen HTML-fájlba vagy tervezőeszközbe beillesztve.
Weblap-szekció-elválasztókhoz helyezze az SVG-t két blokk közé, és hagyja 100%-os szélességre nyúlni — a viewBox minden méretben torzításmentesen tartja a görbéket. Alacsony simaság rövid hullámhosszal kézzel rajzolt hatást ad, míg a teljes simaság hosszú hullámokkal nyugodt tengerre hasonlít.
Kapcsolódó eszközök
- SVG optimalizáló Optimalizálja és tömörítse az SVG fájlokat azonnal a böngészőben. Távolítsa el a metaadatokat, megjegyzéseket és felesleges adatokat, csökkentse a méretet akár 60%-kal.
- SVG-ből PNG Konverter Alakítsa az SVG-t PNG, JPEG vagy WebP formátumba azonnal a böngészőben. Testreszabható méretezés, méret és háttérszín. Ingyenes, privát, nincs feltöltés.
- PNG SVG konvertáló Ingyenes online PNG SVG konvertáló. Alakítsa át PNG, JPG és más bittérképeit skálázható vektoros SVG-vé szín- és részletbeállításokkal - teljesen a böngészőjében.
- Border-radius Generátor Ingyenes kreatív border-radius generátor online. Húzza meg a 8 fogantyút vagy válasszon blob alakot, hogy organikus CSS formákat készítsen, és azonnal másolja a kódot.
- Színkonverter Ingyenes online színkonverter. Azonnal konvertálja a HEX, RGB, HSL, HSV formátumokat vizuális választóval. 100% privát, böngészőjében fut.
- CSS easing generátor Ingyenes online CSS easing generátor. Húzza a cubic-bezier kontrollpontokat az interaktív görbén, válasszon 18 előbeállítás közül, nézze meg a hurkoló labda-animációt, és azonnal másolja az időzítő függvényt.
- CSS szövegárnyék generátor Ingyenes online text-shadow generátor. Halmozz több árnyékréteget eltolással, homályosítással, színnel és átlátszatlansággal, próbáld ki a Neon, 3D, Retro előbeállításokat, és azonnal másold a CSS-t.
- CSS clip-path generátor Ingyenes online CSS clip-path generátor. Tervezzen polygon, circle, ellipse és inset alakzatokat húzható pontokkal, élő előnézettel és egy kattintásos CSS-kód másolással.