Preskoči na vsebino
100% lokalno

Generator SVG ozadje vzorcev

Ustvari brezšivni SVG vzorec ozadja — točke, mreža, črte, valovi, kvadrati, šestkotniki ali topografija — kot SVG, CSS ali Tailwind razred.

24
2
100
0
Izhod

Generator SVG ozadje vzorcev

Izberite motiv — točke, mreža, diagonalne črte, valovi, kvadrati, šestkotniki ali topografija — in to orodje ustvari brezšivni SVG vzorec, ki ga lahko neposredno vstavite v ozadje spletnega mesta, zaslon aplikacije ali tiskanu zasnovo. Vzorec je zgrajen iz ene ponavljajoče ploščice, zato datoteka ostane majhna, ne glede na to, kako velika je površina, ki jo pokriva.

Velikost ploščice nadzoruje razmik med ponavljanji, debelina črte pa nadzoruje, kako krepke so poteze — tudi nastavi velikost točk in kvadratov za ta dva motiva. Ospred in ozadje sprejmeta katero koli heksadecimalno barvo (#RRGGBB ali krajšo obliko #RGB), prosojnost motiv postopoma zmešča v njegovo ozadje brez spreminjanja barve samega ozadja, vrtenje pa zavrti celotno ploščico — diagonalne črte se že začnejo pri kotu 45° in se od tam naprej vrtijo. Prebecite obliko izhoda, da dobite točno tisto, kar potrebujete: navadni SVG označevanje za prihranitev kot datoteke, pripravno pravilo CSS z vzorcem vključenim kot data URI ali Tailwind poljubno vrednost razreda, ki ga lahko neposredno vstavite na seznam razredov elementa.

Vsaka možnost takoj posodobi predogled, ko jo prilagodite, številka pod izhodom pa poroča dimenzije ploščice, natančno število znakov generiranega koda in obliko aktivnega izhoda. Ker je vzorec ena majhna vektorska ploščica namesto bitmap slike, ostane oster pri kateri koli stopnji povečave in se brez stroškov skalira na katero koli velikost zaslona.

Vse se izvršuje lokalno v vašem brskalniku — nič, kar oblikujete tukaj, se ne naloži nikamor. Ko ste zadovoljni z rezultatom, ga kopirajte, preuzmite kot datoteko .txt ali pošljite izhod nazaj na vnos, da ga lahko naprej dokončate.

FAQ

Ali se bo vzorec brezšivno pojavil pri kateri koli velikosti?
Da. Vsak motiv je zgrajen kot ena ponavljajoča se SVG ploščica, zato se poravna rob do roba, ne glede na to, kako velik je element za njim — ni nobene fiksne velikosti platna, ki jo je treba prerastiti.
Kakšna je razlika med tremi oblikami izhoda?
Navadni SVG je surov označevanje, uporabno kot samostojna datoteka ali vloženi element. CSS vam daje pripravljeno pravilo background-image z vzorcem, vključenim kot data URI. Tailwind daje isto data URI, zavito kot razred poljubne vrednosti, ki ga lahko vstavite na kateri koli element.
Zakaj debelina črte spremeni velikost točk in kvadratov?
Ta dva motiva sta zapolnjeni obliki namesto obrisanih potez, zato ista kontrola, ki naredi črto debelejšo drugje, služi tudi kot velikost oblike — ohranja en drsnnik smislenega nasprotja preko vseh motivov namesto dodajanja ločene možnosti velikosti na oblik.
Ali lahko uporabim triznamenkasto heksadecimalno barvo, kot je #f00?
Da, tako #RGB kot #RRGGBB sta sprejeta za barvi ospredja in ozadja.
Ali se je konfiguracija mojega vzorca naložila nekje?
Ne. Vzorec je v celoti ustvarjen v vašem brskalniku — nič o motivu, barvah ali izhodu, ki ga izberete, nikoli ne zapusti vaše naprave.