Binubuo ng tool na ito ang pattern bilang plain SVG markup, kaya nananatiling matalas ang resulta sa anumang zoom o density ng screen, at karaniwang ilang daang byte lang ang laki, mas magaan kaysa sa PNG tile. Kopyahin ang CSS para direktang idikit ang paulit-ulit na background-image sa iyong stylesheet, o kopyahin ang standalone SVG file para gamitin bilang asset. Walang ipinapadala kahit saan ang ginawa mo: ang pattern ay iginuguhit nang buo sa device mo, kaya patuloy itong gumagana kahit offline na pagkatapos ma-load ang page.
Libreng SVG Pattern Generator
Tumatakbo nang buo sa iyong browser - walang upload, walang sign-up.
Pattern
Estilo
Foreground
Background
Ano ang SVG pattern generator?
Ang SVG pattern generator ay gumagawa ng paulit-ulit na background na walang makikitang tahi, gamit ang geometric shapes tulad ng dots, lines, grid at zigzag. Pipiliin mo ang shape, mga kulay, laki ng tile at kapal ng linya, tapos ilalabas nito ang maliit na SVG file na malinaw sa kahit anong sukat, kasama ang CSS na pwede nang i-paste. Lahat ito ay ginagawa sa loob mismo ng iyong browser, kaya walang na-a-upload.
Paano gamitin
- 1Pumili ng pattern. Pumili ng shape - dots, rings, grid, diagonal, crosshatch, plus, zigzag at marami pa - mula sa mga swatch.
- 2Itakda ang kulay at hugis. Pumili ng foreground at background na kulay (o gawing transparent ang background), tapos ayusin ang slider ng size, thickness at opacity habang live na nagbabago ang preview.
- 3Kopyahin o i-download. Lumipat sa pagitan ng CSS at SVG tab, kopyahin ang code, o i-download ang standalone na .svg file para gamitin kahit saan.
Para kanino ito
- Mga web developer na gustong magdagdag ng magaan at banayad na background texture sa hero section, card o iba pang bahagi nang walang kailangang i-upload na imahe.
- Mga UI at brand designer na gumagawa ng prototype ng seamless texture gamit ang kulay ng kanilang brand at ini-export bilang malinaw na SVG asset.
- Mga gumagawa ng email at slide na kailangan ng maliit, na-a-tile na pattern na malinaw kahit anong screen ang gamitin.
- Mga estudyante at hobbyist na natututo kung paano gumagana ang SVG
<pattern>at ang tiling ng CSS background sa pamamagitan ng pag-eksperimento sa mga value at pagbasa sa output. - Mga content creator na gustong gumawa ng mabilisang palamuti para sa thumbnail, banner at mockup.
FAQ
Libre ba ang SVG pattern generator na ito?
Oo, ganap itong libre, walang sign-up at walang limitasyon. Ginagawa ang bawat pattern sa loob mismo ng iyong browser, kaya pwede kang gumawa at kumopya nang kahit ilang beses, kahit offline na pagkatapos ma-load ang page.
Talaga bang seamless ang mga pattern?
Oo. Bawat shape ay iginuguhit para eksaktong magkatugma ang mga gilid nito sa kalapit na tile, at umuulit ang pattern ayon sa fixed grid. Parehong ang CSS background-image at ang SVG <pattern> element ay nagta-tile ng parehong cell nang walang makikitang tahi.
Alin ang dapat kong gamitin, CSS o SVG output?
Gamitin ang CSS para direktang idikit ang paulit-ulit na background sa stylesheet - ito ang pinakamabilis para sa mga website. Gamitin ang SVG download kapag kailangan mo ng standalone file, halimbawa bilang image asset, sa design tool, o direktang i-embed sa HTML.
Bakit gagamit ng SVG pattern imbes na PNG?
Vector ang SVG, kaya nananatili itong malinaw kahit anong zoom level o density ng screen at hindi ito nagiging pixelated. Karaniwang ilang daang byte lang ang geometric SVG tile, mas maliit kaysa sa katumbas na PNG, at pwede mong palitan ang kulay nito anumang oras nang hindi na kailangang i-export ulit.
Pwede bang gawing transparent ang background?
Oo. I-check ang opsyon na Transparent at aalisin ang fill ng background, kaya ang pattern na lang ang ipapakita gamit ang mga foreground shape. Kaya mo itong ipatong sa isang existing na kulay, imahe o gradient.
Ina-upload ba ang aking disenyo kahit saan?
Hindi. Buong ginagawa ang pattern nang lokal sa iyong browser gamit ang plain SVG markup at walang ipinapadala sa anumang server, kaya nananatiling pribado ang mga kulay at setting mo sa iyong device.