Softonic

Generador de Patrones de Puntos SVG

Paso 1 / 3
Siguiente

Los patrones de puntos son el caballo de batalla discreto de los fondos web modernos: piensa en la sutil cuadrícula de puntos detrás de una página de Notion, los lunares en una sección principal, o la textura similar a grano en una tarjeta. Este generador construye un único SVG utilizando una definición de <pattern> en línea, por lo que el archivo se mantiene pequeño (generalmente menos de 500 bytes) y se repite perfectamente a cualquier tamaño. Tú controlas el lienzo, el espaciado entre puntos, el radio, el color del punto y el fondo.

Cómo construir un patrón de puntos

  1. 1

    Establecer el lienzo

    Ancho y alto en píxeles. Para fondos CSS, esto puede permanecer pequeño (por ejemplo, 800×600) y ser repetido.

  2. 2

    Elegir el espaciado

    Distancia entre los centros de los puntos vecinos. 20-40 px se ve limpio; 10 px se vuelve ruidoso.

  3. 3

    Establecer el radio del punto

    1-3 px para una textura sutil, 4-8 px para lunares deliberados.

  4. 4

    Elegir colores

    Relleno del punto (primer plano) y fondo del lienzo. Establece el fondo en `transparent` para un patrón de superposición verdadero.

  5. 5

    Copia el SVG

    Pega en tu HTML o usa como `background-image: url("data:image/svg+xml,...")` en CSS.

Cómo se define el patrón

El generador produce un elemento <pattern> dentro de <defs> y llena un <rect> de lienzo completo con fill="url(#dots)":

<defs>
  <pattern id="dots" width="30" height="30" patternUnits="userSpaceOnUse">
    <circle cx="15" cy="15" r="2" fill="#6366f1" />
  </pattern>
</defs>
<rect width="100%" height="100%" fill="#ffffff" />
<rect width="100%" height="100%" fill="url(#dots)" />

patternUnits="userSpaceOnUse" bloquea el tamaño del mosaico a píxeles, por lo que escalar el SVG padre no distorsiona los puntos.

Hoja de trucos para ajustar patrones

Apariencia Espaciado Radio Contraste
Susurro (apenas visible) 30-40 1-1.5 5-10% opacidad
Fondo sutil 25-30 2 15-20% opacidad
Patrón de puntos honesto 20 2-3 Color completo
Lunares deliberados 40-60 8-15 Color completo
Efecto de semitono 10 1 Relleno degradado

Usándolo como fondo CSS

Codifica el SVG como una URL de datos y aplícalo en cualquier elemento:

.bg-dots {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' ...");
  background-repeat: repeat;
}

Repetir el SVG por CSS es más rápido que enviar un PNG: el navegador lo rasteriza al tamaño de visualización final, por lo que se mantiene nítido en cada DPR (pantallas 1x, 2x, 3x).

Cuando los puntos afectan la legibilidad

Un patrón de puntos directamente detrás del texto del cuerpo puede crear un moiré brillante contra texto fino. Si debes poner texto encima, ya sea:

  • Aumenta el espaciado a 40+ px para que los puntos caigan entre líneas, o
  • Reduce la opacidad del patrón por debajo del 10%, o
  • Coloca el texto dentro de una tarjeta sólida sobre el patrón.

Preguntas frecuentes

Establece el color de fondo en transparent, entonces la única pintura son los puntos mismos. Coloca el SVG sobre cualquier color o imagen que quieras mostrar a través.

No con este generador: produce una cuadrícula cuadrada. Para un diseño hexagonal necesitas un mosaico de patrón que sea sqrt(3) veces más alto que ancho, con dos círculos por mosaico desplazados a la mitad. Considera el generador de rutas SVG o un generador hexagonal dedicado.

El SVG en sí es nítido a cualquier tamaño, pero si lo rasterizas a una resolución menor que el mosaico del patrón, obtienes aliasing. Exporta a 2x o 3x tu tamaño de visualización previsto.

Reemplaza fill="#hex" en el círculo con fill="url(#gradient-id)" y añade una definición de <linearGradient> dentro del mismo <defs>. Cada punto se renderizará con ese degradado, lo que puede ser costoso si el lienzo tiene miles de puntos.

El editor estándar envía el lienzo, espaciado, radio y colores al servidor para renderizar la vista previa. En el flujo guiado, esos ajustes también aparecen en la URL. No introduzcas información sensible; la herramienta no guarda un proyecto de patrón reutilizable.

Herramientas relacionadas

Selector de Color de Material Design

Explora la paleta de colores de Material Design. Copia cualquier tono (50 a A700) como HEX, RGB o HSL con un toque.

Convertir foto en dibujo

Convierte fotos JPEG, PNG o WebP en dibujos de grafito, lápiz suave o carboncillo en el navegador y exporta el resultado como PNG o JPEG.

Comprimir GIF

Reduce el tamaño de un GIF animado en el navegador: baja dimensiones, conserva menos fotogramas y ajusta la calidad de codificación. Previsualiza el bucle antes de descargar.

Convertidor de Pantone a HEX

Convierte colores Pantone PMS a los valores HEX, RGB y CMYK más cercanos para la coincidencia en pantalla e impresión, con vista previa de muestra.

Generador de papel rayado

Crea papel rayado imprimible gratis. Elige pauta universitaria, ancha o estrecha, ajusta el interlineado en mm, el tamaño de página y una línea de margen, e imprime o descarga el SVG.

Creador de banderas

Diseña una bandera personalizada sencilla 3:2 en tu navegador con seis composiciones, colores, texto y un símbolo. Descarga SVG o PNG, o abre el cuadro de impresión del navegador.

Herramienta disponible en otros idiomas