# Generador de patrones SVG

> Genera puntos, rayas y patrones geométricos repetibles.

[Open tool](https://www.toolcabana.com/es/svg-pattern-generator) · [Diseño y CSS](https://www.toolcabana.com/es/category/design-and-css)

Tool ID: svg-pattern-generator. Requested language: es. Description language: es. Complete guide translation: yes.

## Overview (en)

SVG pattern generator creates a repeating dots, diagonal stripes or grid pattern as an SVG file. Pick foreground and background colors, a tile spacing from 4 to 200 px, and a dot radius or stroke width from 1 to 50 px. The output is a 600 by 400 SVG built on a pattern element, shown as markup and downloadable as pattern.svg.

## Supported tasks (es)

Genera puntos, rayas y patrones geométricos repetibles.

## Steps (es)

1. Introduce los valores solicitados en el panel de ajustes.
2. Ajusta la configuración básica y abre el modo avanzado para opciones de exportación y ajuste fino. La configuración personalizada sigue activa al cerrar el panel.
3. Ejecuta el generador de patrones SVG, revisa la salida y usa los controles disponibles para copiar o descargar.

## Settings

- Patrón (es; key: pattern; type: select): dots [es], stripes [es], grid [es]
- Primer plano (es; key: color; type: color)
- Fondo (es; key: background; type: color)
- Espaciado (px) (es; key: spacing; type: number); minimum: 4; maximum: 200
- Radio de punto / trazo (px) (es; key: thickness; type: number); minimum: 1; maximum: 50

## Limitations (es)

Las imágenes usan el límite de lienzo existente de 32 megapíxeles. Se permiten hasta 100 imágenes de origen donde sea admitido. El HTML pegado está limitado a 200,000 caracteres; los diagramas Mermaid a 20,000 caracteres y 300 líneas. La generación de SVG y PNG requiere un navegador.

## Privacy and connections (es)

Esta operación procesa su fuente en tu navegador. Copiar y descargar son acciones explícitas; la entrada de origen no se guarda en una cuenta ni en un historial.

## Questions (es)

### How do I use the SVG pattern as a CSS background?

Download pattern.svg and reference it with background-image in CSS, or paste the markup inline. The file is a 600 by 400 image, so the browser repeats that whole image; choose a spacing that divides 600 and 400 evenly, such as 20 or 40, for clean seams.

### Why do the stripes appear as diagonal lines?

The stripes pattern draws one line from the top-left to the bottom-right corner of each square tile, producing 45-degree diagonals. Spacing sets the tile size and the stroke value sets line thickness. For horizontal and vertical lines, choose the grid pattern.

### Can I make the pattern background transparent?

Not from the settings: each tile includes a rectangle filled with the background color you pick. For transparency, remove that rect element or give it a fill-opacity of 0 in the downloaded SVG markup.

### ¿Dónde se procesa mi entrada?

Esta operación procesa su fuente en tu navegador. Copiar y descargar son acciones explícitas; la entrada de origen no se guarda en una cuenta ni en un historial.

### ¿Cuáles son los límites de entrada?

Las imágenes usan el límite de lienzo existente de 32 megapíxeles. Se permiten hasta 100 imágenes de origen donde sea admitido. El HTML pegado está limitado a 200,000 caracteres; los diagramas Mermaid a 20,000 caracteres y 300 líneas. La generación de SVG y PNG requiere un navegador.

## Related tools

- [CSS clamp calculator](https://www.toolcabana.com/es/css-clamp-calculator)
- [CSS grid layout generator](https://www.toolcabana.com/es/css-grid-layout-generator)
- [CSS flexbox playground](https://www.toolcabana.com/es/css-flexbox-playground)
- [CSS cubic Bezier editor](https://www.toolcabana.com/es/css-cubic-bezier-editor)