SVG / Fondos

Generador de patrones SVG: teselas de fondo sin costuras

Crea puntos, cuadrículas, rayas, dameros, zigzags, ondas, triángulos, hexágonos, signos más, círculos y patrones de lunares desplazados. Copia un fondo CSS escapado o descarga teselas SVG y PNG.

Generador de patrones SVG: teselas de fondo sin costuras: Elige puntos, cuadrículas, rayas, dameros, ondas, hexágonos y otros motivos; configura su tamaño, espaciado, colores y rotación, y obtén una tesela que se repite sin uniones visibles. Cópiala como SVG o como fondo CSS, o descarga la tesela en formato SVG o PNG. Funciona al 100 % en tu navegador, sin subir archivos a ningún servidor.

Categoría: Herramientas de desarrollo
Se ejecuta: En tu navegador
Coste: Gratis · sin registro
Disponibilidad: Lista para usar

Patrones SVG sin cortesProcesamiento local

Funciona por completo en tu navegador

Mosaico: 48 × 48 unidades SVG

Patrón SVG

<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><defs><pattern id="s5svg-pattern" width="48" height="48" patternUnits="userSpaceOnUse" patternTransform="rotate(0)"><g transform="translate(-48 -48)"><circle cx="0" cy="0" r="8" fill="#63c42d" stroke="#63c42d" stroke-width="0"/><circle cx="24" cy="0" r="8" fill="#32741a" stroke="#32741a" stroke-width="0"/><circle cx="0" cy="24" r="8" fill="#63c42d" stroke="#63c42d" stroke-width="0"/><circle cx="24" cy="24" r="8" fill="#32741a" stroke="#32741a" stroke-width="0"/></g><g transform="translate(0 -48)"><circle cx="0" cy="0" r="8" fill="#63c42d" stroke="#63c42d" stroke-width="0"/><circle cx="24" cy="0" r="8" fill="#32741a" stroke="#32741a" stroke-width="0"/><circle cx="0" cy="24" r="8" fill="#63c42d" stroke="#63c42d" stroke-width="0"/><circle cx="24" cy="24" r="8" fill="#32741a" stroke="#32741a" stroke-width="0"/></g><g transform="translate(48 -48)"><circle cx="0" cy="0" r="8" fill="#63c42d" stroke="#63c42d" stroke-width="0"/><circle cx="24" cy="0" r="8" fill="#32741a" stroke="#32741a" stroke-width="0"/><circle cx="0" cy="24" r="8" fill="#63c42d" stroke="#63c42d" stroke-width="0"/><circle cx="24" cy="24" r="8" fill="#32741a" stroke="#32741a" stroke-width="0"/></g><g transform="translate(-48 0)"><circle cx="0" cy="0" r="8" fill="#63c42d" stroke="#63c42d" stroke-width="0"/><circle cx="24" cy="0" r="8" fill="#32741a" stroke="#32741a" stroke-width="0"/><circle cx="0" cy="24" r="8" fill="#63c42d" stroke="#63c42d" stroke-width="0"/><circle cx="24" cy="24" r="8" fill="#32741a" stroke="#32741a" stroke-width="0"/></g><g transform="translate(0 0)"><circle cx="0" cy="0" r="8" fill="#63c42d" stroke="#63c42d" stroke-width="0"/><circle cx="24" cy="0" r="8" fill="#32741a" stroke="#32741a" stroke-width="0"/><circle cx="0" cy="24" r="8" fill="#63c42d" stroke="#63c42d" stroke-width="0"/><circle cx="24" cy="24" r="8" fill="#32741a" stroke="#32741a" stroke-width="0"/></g><g transform="translate(48 0)"><circle cx="0" cy="0" r="8" fill="#63c42d" stroke="#63c42d" stroke-width="0"/><circle cx="24" cy="0" r="8" fill="#32741a" stroke="#32741a" stroke-width="0"/><circle cx="0" cy="24" r="8" fill="#63c42d" stroke="#63c42d" stroke-width="0"/><circle cx="24" cy="24" r="8" fill="#32741a" stroke="#32741a" stroke-width="0"/></g><g transform="translate(-48 48)"><circle cx="0" cy="0" r="8" fill="#63c42d" stroke="#63c42d" stroke-width="0"/><circle cx="24" cy="0" r="8" fill="#32741a" stroke="#32741a" stroke-width="0"/><circle cx="0" cy="24" r="8" fill="#63c42d" stroke="#63c42d" stroke-width="0"/><circle cx="24" cy="24" r="8" fill="#32741a" stroke="#32741a" stroke-width="0"/></g><g transform="translate(0 48)"><circle cx="0" cy="0" r="8" fill="#63c42d" stroke="#63c42d" stroke-width="0"/><circle cx="24" cy="0" r="8" fill="#32741a" stroke="#32741a" stroke-width="0"/><circle cx="0" cy="24" r="8" fill="#63c42d" stroke="#63c42d" stroke-width="0"/><circle cx="24" cy="24" r="8" fill="#32741a" stroke="#32741a" stroke-width="0"/></g><g transform="translate(48 48)"><circle cx="0" cy="0" r="8" fill="#63c42d" stroke="#63c42d" stroke-width="0"/><circle cx="24" cy="0" r="8" fill="#32741a" stroke="#32741a" stroke-width="0"/><circle cx="0" cy="24" r="8" fill="#63c42d" stroke="#63c42d" stroke-width="0"/><circle cx="24" cy="24" r="8" fill="#32741a" stroke="#32741a" stroke-width="0"/></g></pattern></defs><rect width="100%" height="100%" fill="#14200f"/><rect width="100%" height="100%" fill="url(#s5svg-pattern)"/></svg>

Fondo CSS

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cdefs%3E%3Cpattern id='s5svg-pattern' width='48' height='48' patternUnits='userSpaceOnUse' patternTransform='rotate(0)'%3E%3Cg transform='translate(-48 -48)'%3E%3Ccircle cx='0' cy='0' r='8' fill='%2363c42d' stroke='%2363c42d' stroke-width='0'/%3E%3Ccircle cx='24' cy='0' r='8' fill='%2332741a' stroke='%2332741a' stroke-width='0'/%3E%3Ccircle cx='0' cy='24' r='8' fill='%2363c42d' stroke='%2363c42d' stroke-width='0'/%3E%3Ccircle cx='24' cy='24' r='8' fill='%2332741a' stroke='%2332741a' stroke-width='0'/%3E%3C/g%3E%3Cg transform='translate(0 -48)'%3E%3Ccircle cx='0' cy='0' r='8' fill='%2363c42d' stroke='%2363c42d' stroke-width='0'/%3E%3Ccircle cx='24' cy='0' r='8' fill='%2332741a' stroke='%2332741a' stroke-width='0'/%3E%3Ccircle cx='0' cy='24' r='8' fill='%2363c42d' stroke='%2363c42d' stroke-width='0'/%3E%3Ccircle cx='24' cy='24' r='8' fill='%2332741a' stroke='%2332741a' stroke-width='0'/%3E%3C/g%3E%3Cg transform='translate(48 -48)'%3E%3Ccircle cx='0' cy='0' r='8' fill='%2363c42d' stroke='%2363c42d' stroke-width='0'/%3E%3Ccircle cx='24' cy='0' r='8' fill='%2332741a' stroke='%2332741a' stroke-width='0'/%3E%3Ccircle cx='0' cy='24' r='8' fill='%2363c42d' stroke='%2363c42d' stroke-width='0'/%3E%3Ccircle cx='24' cy='24' r='8' fill='%2332741a' stroke='%2332741a' stroke-width='0'/%3E%3C/g%3E%3Cg transform='translate(-48 0)'%3E%3Ccircle cx='0' cy='0' r='8' fill='%2363c42d' stroke='%2363c42d' stroke-width='0'/%3E%3Ccircle cx='24' cy='0' r='8' fill='%2332741a' stroke='%2332741a' stroke-width='0'/%3E%3Ccircle cx='0' cy='24' r='8' fill='%2363c42d' stroke='%2363c42d' stroke-width='0'/%3E%3Ccircle cx='24' cy='24' r='8' fill='%2332741a' stroke='%2332741a' stroke-width='0'/%3E%3C/g%3E%3Cg transform='translate(0 0)'%3E%3Ccircle cx='0' cy='0' r='8' fill='%2363c42d' stroke='%2363c42d' stroke-width='0'/%3E%3Ccircle cx='24' cy='0' r='8' fill='%2332741a' stroke='%2332741a' stroke-width='0'/%3E%3Ccircle cx='0' cy='24' r='8' fill='%2363c42d' stroke='%2363c42d' stroke-width='0'/%3E%3Ccircle cx='24' cy='24' r='8' fill='%2332741a' stroke='%2332741a' stroke-width='0'/%3E%3C/g%3E%3Cg transform='translate(48 0)'%3E%3Ccircle cx='0' cy='0' r='8' fill='%2363c42d' stroke='%2363c42d' stroke-width='0'/%3E%3Ccircle cx='24' cy='0' r='8' fill='%2332741a' stroke='%2332741a' stroke-width='0'/%3E%3Ccircle cx='0' cy='24' r='8' fill='%2363c42d' stroke='%2363c42d' stroke-width='0'/%3E%3Ccircle cx='24' cy='24' r='8' fill='%2332741a' stroke='%2332741a' stroke-width='0'/%3E%3C/g%3E%3Cg transform='translate(-48 48)'%3E%3Ccircle cx='0' cy='0' r='8' fill='%2363c42d' stroke='%2363c42d' stroke-width='0'/%3E%3Ccircle cx='24' cy='0' r='8' fill='%2332741a' stroke='%2332741a' stroke-width='0'/%3E%3Ccircle cx='0' cy='24' r='8' fill='%2363c42d' stroke='%2363c42d' stroke-width='0'/%3E%3Ccircle cx='24' cy='24' r='8' fill='%2332741a' stroke='%2332741a' stroke-width='0'/%3E%3C/g%3E%3Cg transform='translate(0 48)'%3E%3Ccircle cx='0' cy='0' r='8' fill='%2363c42d' stroke='%2363c42d' stroke-width='0'/%3E%3Ccircle cx='24' cy='0' r='8' fill='%2332741a' stroke='%2332741a' stroke-width='0'/%3E%3Ccircle cx='0' cy='24' r='8' fill='%2363c42d' stroke='%2363c42d' stroke-width='0'/%3E%3Ccircle cx='24' cy='24' r='8' fill='%2332741a' stroke='%2332741a' stroke-width='0'/%3E%3C/g%3E%3Cg transform='translate(48 48)'%3E%3Ccircle cx='0' cy='0' r='8' fill='%2363c42d' stroke='%2363c42d' stroke-width='0'/%3E%3Ccircle cx='24' cy='0' r='8' fill='%2332741a' stroke='%2332741a' stroke-width='0'/%3E%3Ccircle cx='0' cy='24' r='8' fill='%2363c42d' stroke='%2363c42d' stroke-width='0'/%3E%3Ccircle cx='24' cy='24' r='8' fill='%2332741a' stroke='%2332741a' stroke-width='0'/%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='%2314200f'/%3E%3Crect width='100%25' height='100%25' fill='url(%23s5svg-pattern)'/%3E%3C/svg%3E");
background-size: 48px 48px;
background-repeat: repeat;

La rotación usa pasos de 45° para que el mosaico cuadrado exportado no tenga cortes. PNG contiene un mosaico. El trazo afecta a los motivos con contorno; los cuadros usan rellenos sólidos.

Crear un patrón con degradados CSS

Patrones SVG

SVG 2 especifica patternUnits y patternTransform, que definen el sistema de coordenadas del mosaico y su rotación. https://www.w3.org/TR/SVG2/pservers.html#Patterns

Uso del patrón en CSS

El fondo CSS inserta el mosaico SVG como un URI de datos, por lo que no se necesita ningún archivo de imagen independiente. Las transformaciones de coordenadas SVG se especifican en https://www.w3.org/TR/SVG2/coords.html . Los motivos se generan localmente; no se utilizan recursos externos de patrones ni de fuentes.

Cómo se usa

Elige un motivo y configura su tamaño, espaciado y trazo.
Selecciona dos colores para el motivo, un fondo y una rotación.
Revisa la vista previa repetida y, después, copia el CSS o exporta la tesela SVG o PNG.

Privacidad y límites

Toda la generación de patrones y la exportación de imágenes se realizan localmente en tu navegador.

Herramientas relacionadas

Preguntas frecuentes

¿Por qué las rotaciones avanzan en pasos de 45 grados?

Por lo general, una rotación arbitraria no produce una tesela cuadrada finita que se repita. Estos ángulos permiten crear superteselas cuadradas, por lo que el CSS y las imágenes descargadas siguen sin mostrar uniones.

¿El PNG contiene toda la vista previa?

No. Contiene una sola tesela repetible, con un tamaño raster cuadrado redondeado al alza a píxeles enteros. El SVG conserva sus dimensiones geométricas exactas.

¿Puedo generarlos sin SVG?

El Generador de patrones CSS existente ofrece una selección más pequeña mediante degradados CSS. Esta herramienta proporciona elementos de patrones SVG y teselas descargables. El trazo afecta a los motivos con contorno; los dameros usan rellenos sólidos.

Herramienta gratuita · se ejecuta en tu navegador · sin cuenta