Aquesta eina construeix el patró com a marcatge SVG pur, de manera que el resultat és nítid a qualsevol nivell de zoom o densitat de pantalla i normalment pesa només uns centenars de bytes, molt menys que una peça en PNG. Copia el CSS per enganxar un background-image repetitiu directament a un full d'estils, o copia l'arxiu SVG independent per fer-lo servir com a recurs gràfic. Res del que crees s'envia enlloc: el patró es dibuixa íntegrament al teu dispositiu, així que segueix funcionant sense connexió un cop la pàgina s'ha carregat.
Generador de patrons SVG gratuït
Funciona del tot al navegador: sense pujar res ni registrar-te.
Patró
Estil
Primer pla
Fons
Què és un generador de patrons SVG?
Un generador de patrons SVG construeix un fons repetitiu i sense costures a partir de formes geomètriques com punts, línies, quadrícules i ziga-zagues. Tries la forma, els colors, la mida de la peça i el gruix de la línia, i l'eina genera un SVG minúscul i nítid a qualsevol resolució, més el CSS a punt per enganxar. Tot es genera al navegador, així que no es puja res enlloc.
Com s’utilitza
- 1Tria un patró. Escull una forma (punts, anells, quadrícula, diagonal, entrecreuat, creu, ziga-zaga i més) entre les mostres.
- 2Defineix colors i forma. Escull un color de primer pla i de fons (o fes el fons transparent), i després ajusta els controls de mida, gruix i opacitat mentre la previsualització s'actualitza en directe.
- 3Copia o descarrega. Canvia entre les pestanyes CSS i SVG, copia el codi, o descarrega l'arxiu .svg independent per fer-lo servir on vulguis.
Per a qui és
- Desenvolupadors web que volen afegir una textura de fons subtil i lleugera a un hero, targeta o secció sense carregar cap fitxer d'imatge.
- Dissenyadors d'UI i de marca que fan prototips de textures seamless amb els colors corporatius i les exporten com a recursos SVG nítids.
- Creadors de correus i presentacions que necessiten un patró petit i en mosaic que es vegi nítid en qualsevol pantalla.
- Estudiants i aficionats que aprenen com funcionen l'element
<pattern>d'SVG i el mosaic de fons en CSS provant valors i llegint el resultat. - Creadors de contingut que volen fons decoratius ràpids per a miniatures, banners i maquetes.
Preguntes freqüents
És gratuït aquest generador de patrons SVG?
Sí, és totalment gratuït, sense registre i sense límits. Cada patró es genera al teu navegador, així que en pots crear i copiar tants com vulguis, fins i tot sense connexió un cop carregada la pàgina.
Els patrons són realment seamless?
Sí. Cada forma es dibuixa perquè les vores encaixin exactament amb la peça del costat, i el patró es repeteix sobre una quadrícula fixa. Tant el background-image en CSS com l'element <pattern> en SVG enrajolen la mateixa cel·la vora amb vora sense costures visibles.
He de fer servir la sortida CSS o l'SVG?
Fes servir el CSS per enganxar un fons repetitiu directament al full d'estils; és el més ràpid per a llocs web. Fes servir la descàrrega SVG quan necessitis un arxiu independent, per exemple com a recurs gràfic, en una eina de disseny, o incrustat directament a l'HTML.
Per què fer servir un patró SVG en lloc d'un PNG?
L'SVG és vectorial, així que es manté perfectament nítid a qualsevol nivell de zoom o densitat de pantalla i mai es pixel·la. Una peça SVG geomètrica sol pesar només uns centenars de bytes, molt menys que un PNG equivalent, i pots canviar-ne els colors quan vulguis sense haver de tornar a exportar-la.
Puc fer el fons transparent?
Sí. Marca l'opció Transparent i s'elimina el farciment de fons, de manera que el patró només mostra les formes de primer pla. Això et permet superposar el patró sobre un color, una imatge o un degradat existents.
Es puja el meu disseny a algun lloc?
No. Tot el patró es construeix localment al teu navegador amb marcatge SVG pur i no s'envia res a cap servidor, així que els teus colors i ajustos es mantenen privats al teu dispositiu.