Skip to main content
Penguin ToolsHerramientas Pingüino

Generador de patrones SVG

Genera patrones SVG repetibles en mosaico. Personaliza el tipo de patrón, color y tamaño, luego exporta el código.

#6366f1
#ffffff

Vista previa

Código SVG

<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="custom-pattern" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse">
      <rect width="40" height="40" fill="#ffffff" />
      <circle cx="20" cy="20" r="7" fill="#6366f1" />
    </pattern>
  </defs>
  <rect width="100%" height="100%" fill="url(#custom-pattern)" />
</svg>
Compartir herramienta
📖

Cómo usar

Step 1

Seleccionar patrón

Seleccionar patrón

Selecciona la categoría del patrón: geométrico, decorativo, moderno, etc.

Step 2

Personalizar

Personalizar

Ajusta colores, tamaño, espaciado, rotación, etc.

Step 3

Copiar SVG

Copiar SVG

Copia el código SVG o descárgalo como imagen

✨

Características

Vista previa en tiempo real

Previsualiza los patrones en tiempo real mientras ajustas los parámetros

Plantillas variadas

Múltiples plantillas: geométricas, puntos, líneas, patrones decorativos y más

Mosaico sin costuras

Los patrones generados se repiten en mosaico sin costuras visibles

❓

FAQ

Patrones vectoriales repetibles usando el elemento <pattern> de SVG. Se pueden usar como fondos o rellenos.

🔗Herramientas relacionadas

🎨
Herramientas de diseño

Convertidor de códigos de color

Convierte entre códigos de color HEX, RGB y HSL. Usa el selector de color y la vista previa en tiempo real para una selección intuitiva.

🎨
Herramientas de diseño

Selector de color

Selecciona colores de forma intuitiva usando una rueda de color y deslizadores. Obtén y copia códigos de color en formatos HEX, RGB y HSL.

🎨
Herramientas de diseño

Extractor de Colores de Imagen

Detecta automáticamente los colores dominantes de una imagen y genera una paleta de colores. También puedes hacer clic en cualquier parte de la imagen para seleccionar colores individuales.

🎯
Herramientas de diseño

Selector de Color Promedio de Imagen

Calcula el color promedio de una imagen completa o de un área seleccionada. Útil para elegir esquemas de color o colores de fondo de miniaturas.

🌈
Herramientas de diseño

Generador de degradados CSS

Crea degradados CSS visualmente con controles de arrastre. Admite tipos de degradado lineal, radial y cónico con preajustes.

🔲
Herramientas de diseño

Generador de CSS Box Shadow

Crea CSS box-shadow visualmente con deslizadores. Admite múltiples sombras y sombras interiores.