Generador de patrón SVG de rayas

Cree un patrón de rayas vectorial personalizado: colores, grosor y ángulo ajustables. Descargue el archivo SVG o copie el código directamente para integrarlo en su sitio. Generación 100% local: no se envía nada a ningún servidor.

Cómo funciona

Un patrón de rayas como fondo de un banner, de una sección o de una ilustración debe verse nítido en todos los tamaños de pantalla. Al generarlo en SVG en lugar de PNG, el patrón sigue siendo vectorial: se amplía o se repite sin volverse nunca borroso ni pixelado. Ajuste los dos colores, el grosor de las rayas y su ángulo, y obtenga el archivo listo para integrar.

¿Cómo usar este patrón como fondo CSS?

Descargue el archivo SVG y haga referencia a él como fondo con background-image: url('motif-rayures.svg'), o copie el código SVG y codifíquelo como data URI si prefiere evitar una petición HTTP adicional.

¿El patrón se repite automáticamente en una superficie grande?

Sí: las rayas se generan mediante un elemento <pattern> SVG nativo que se repite como teselas por toda la zona definida, sea cual sea el tamaño del rectángulo elegido. Por tanto, puede generar un patrón pequeño y usarlo con background-repeat de CSS si lo necesita.

Privacidad: el SVG se construye íntegramente en su navegador; ningún dato ni ningún ajuste se envía a un servidor.