Preskočiť na obsah
100% lokálne

Generátor vzoru pozadia SVG

Vytvorte bezšvový vzor pozadia SVG — bodky, mriežku, pruhy, vlny, štvorce, šesťuholníky alebo topografiu — ako SVG, CSS alebo Tailwind triedu.

24
2
100
0
Výstup

Generátor vzoru pozadia SVG

Vyberte si motív — bodky, mriežku, diagonálne pruhy, vlny, štvorce, šesťuholníky alebo topografiu — a tento nástroj vytvorí bezšvový vzor SVG, ktorý môžete vložiť priamo do pozadia webového stránky, obrazovky aplikácie alebo tlačeného dizajnu. Vzor je postavený z jedinej opakujúcej sa dlaždice, takže súbor zostáva malý bez ohľadu na veľkosť plochy, ktorú pokrýva.

Veľkosť dlaždice riadi rozstup medzi opakovaním a hrúbka čiary riadi, ako tučné sú ťahy — pre bodky a štvorce nastavuje aj ich veľkosť. Farba popredí a pozadia akceptujú akúkoľvek šestnástkovú farbu (#RRGGBB alebo kratšiu formu #RGB), priehľadnosť oslabuje motív do jeho pozadia bez zmeny samotnej farby pozadia a rotácia otáča celú dlaždicou — diagonálne pruhy už začínajú na 45° a ďalej sa otáčajú. Prepnite formát výstupu na to, aby ste dostali presne to, čo potrebujete: čisté SVG značky, ktoré sa majú uložiť ako súbor, pravidlo CSS pripravené na vloženie s vzorom vloženým ako data URI, alebo triedu Tailwind ľubovoľnej hodnoty, ktorú môžete vložiť priamo na zoznam tried prvku.

Každá možnosť okamžite aktualizuje náhľad, keď ju upravujete, a tally pod výstupom hlási rozmery dlaždice, presný počet znakov vygenerovaného kódu a aktívny formát výstupu. Pretože je vzor jednou malou vektorovou dlaždicou namiesto bitmapy, zostáva ostrý na akejkoľvek úrovni priblíženia a bez ďalších nákladov sa zmení na akúkoľvek veľkosť obrazovky.

Všetko beží lokálne vo vašom prehliadači — nič, čo tu navrhujete, sa nikam nenahrávajú. Keď ste spokojní s výsledkom, skopírujte ho, stiahnite si ho ako súbor .txt alebo pošlite výstup späť do vstupu, aby ste ho ďalej zlepšovali.

Časté otázky

Bude sa vzor bezšvovo zaraďovať na akúkoľvek veľkosť?
Áno. Každý motív je postavený ako jediná opakujúca sa SVG dlaždica, takže sa navzájom dopĺňa bez ohľadu na veľkosť prvku za ňou — neexistuje žiadna pevná veľkosť plátna, ktorú by ste mohli prerastu.
Aký je rozdiel medzi tromi formátmi výstupu?
Čisté SVG je surový kód, užitočný ako samostatný súbor alebo vložený prvok. CSS vám dáva hotové pravidlo background-image s vzorom vnoreným ako data URI. Tailwind dáva rovnaký data URI zabalený ako triedu ľubovoľnej hodnoty, ktorú môžete vložiť priamo na zoznam tried prvku.
Prečo hrúbka čiary zmení veľkosť bodiek a štvorcov?
Tieto dva motívy sú vyplnené tvary skôr ako obrysované ťahy, takže rovnaká kontrola, ktorá zhrubuje čiaru kdekoľvek inde, sa zdvojnásobia ako veľkosť tvaru — udržiava jednu posúvač zmysluplnú v každom motíve namiesto pridávania samostatnej možnosti veľkosti na motív.
Môžem použiť trojcifernu šestnástkovú farbu ako #f00?
Áno, akceptujú sa formáty #RGB aj #RRGGBB pre farby popredía a pozadia.
Je moja konfigurácia vzoru nahraná niekde?
Nie. Vzor je generovaný úplne vo vašom prehliadači — nič o motíve, farbách alebo výstupe, ktorý si vyberiete, nikdy neopúšťa vaše zariadenie.