Fondos y patrones SVG gratuitos | SVG Backgrounds

• Ofrece 48 fondos y patrones SVG ligeros, que los usuarios pueden aplicar a proyectos web con solo copiar y pegar
• Cada diseño permite modificar libremente color, tamaño y modo de fusión, y algunos admiten efectos de animación como rotación y desplazamiento
• Todos los gráficos son diseños originales de SVGBackgrounds.com y pueden usarse en proyectos personales y comerciales
• Sin embargo, no pueden incluirse en productos competidores y la atribución es obligatoria
• Un recurso gratuito para que diseñadores web y desarrolladores creen fácilmente fondos adaptados a su marca

---

Resumen de fondos y patrones SVG gratuitos

• SVGBackgrounds.com ofrece un conjunto de fondos y patrones SVG de uso gratuito
  • Los usuarios pueden ajustar color, fusión, tamaño y más dentro del sitio para crear fondos personalizados
  • Algunos diseños incluyen funciones de transformación visual como escalado, rotación y desplazamiento
• Cada fondo es un diseño original de SVGBackgrounds.com y puede aplicarse directamente en sitios web o interfaces de apps
• Los gráficos disponibles pueden descargarse en formatos código CSS inline, SVG y PNG

Cómo usarlo

• Los usuarios pueden ver cómo aplicarlo mediante una página de demostración que indica dónde insertar el código CSS
• Los fondos pueden integrarse fácilmente mediante el método de copiar y pegar (Copy and Paste)
• El sitio ofrece varias opciones de ajuste, como paleta de colores, escala y modo de fusión

Licencia y condiciones de uso

• Al usar los gráficos, se debe aceptar el acuerdo de licencia de SVGBackgrounds.com
  • Se permite su uso tanto en proyectos personales como comerciales
  • No se pueden incluir en productos competidores ni revender
  • En el uso gratuito, la atribución (Attribution) es obligatoria
• Los suscriptores de pago pueden obtener beneficios como uso ilimitado y exención de atribución

Creador y comunidad

• El sitio es operado por Matt, quien publica cada mes nuevos recursos gratuitos y de pago
  • Los usuarios pueden recibir notificaciones sobre los fondos más recientes y actualizaciones mediante suscripción por correo electrónico
• El creador propone varias formas de dar crédito, como enlace HTML, compartir en redes sociales y apoyo (Buy me a coffee)

Recursos y herramientas adicionales

• Además de fondos, SVGBackgrounds.com ofrece varios elementos gráficos como íconos SVG, ilustraciones, botones, cursores y divisores de formas (Shape Divider)
• Con herramientas como SVG to CSS Converter y Shape Divider Generator, los desarrolladores pueden convertir o generar SVG directamente
• A través de los lanzamientos más recientes y el blog, sigue publicando de forma continua nuevos sets de diseño y actualizaciones de productos

[GN⁺]

Comentarios de Hacker News

• Estos fondos están realmente geniales. Pero me gustaría que agregaran un <textarea> con el CSS visible en lugar del botón de “clic para copiar”
  Algunos navegadores o usuarios bloquean el acceso al portapapeles por seguridad, así que no hay una alternativa cuando la función de copiar no funciona

  • Buen punto. Antes lo hacíamos así, y no parece difícil volver a ese método o agregar un botón para mostrar el código

• Me gusta especialmente el patrón de techo naranja. Pero en Firefox algunas partes no se muestran bien: el remolino azul y el verde se renderizan solo como un rectángulo y un hexágono, respectivamente
  También me pregunto cómo usar este tipo de fondos sin que distraigan del contenido. Los patrones detallados muchas veces se vuelven visualmente distractores

  • Lo habitual es poner el fondo en todo el documento y luego colocar encima un overlay con opacidad ajustada para mostrar el contenido principal. En pantalla completa de PC se ve muy bien, pero en móvil hay poco espacio y es difícil lucir bien el fondo
  • Lo revisé en Firefox y sí funciona, pero el efecto solo se nota al mover el slider superior. Creo que podría quedar mejor si invierto la dirección del efecto, así que voy a pensarlo de nuevo
  • El problema del “rectángulo azul y hexágono verde” se resuelve al mover el slider

• Me gusta la interfaz para cambiar el fondo y el panel de ajuste de parámetros. Hace tiempo experimenté con patrones procedurales usando SVG/canvas/webgl, y esto me dan ganas de volver a empaquetar esa forma de expresión

  • Gracias. Después de diseñar varias veces una UI para manipulación gráfica, en esta versión pulí especialmente muchos detalles. Hubo limitaciones por querer mostrar el fondo lo más grande posible, pero eso permitió hacer elecciones creativas. Estoy bastante satisfecho con el resultado

• El aviso de que “tienes acceso al fondo” ocupa un tercio de la pantalla en móvil y no hay forma de cerrarlo. Me da curiosidad saber por qué

  • Solo dice “Tienes acceso. ¡Disfrútalo!”, pero investigando parece que ese tipo de acceso suele valer unos $120 al año
  • Buen punto. La estructura actual hace que al hacer clic en la miniatura el botón de vista previa cambie a la UI de manipulación del fondo, así que estoy pensando en rediseñar esa parte

• Se siente raro que al pasar el mouse por encima la parte que quiero ver se desenfoque o quede tapada

  • La razón de ir por ese camino fue que con un solo clic ya se puede ver todo, y en estado hover no había mucho más que mostrar como vista previa. El objetivo principal del hover era dejar clara la posibilidad de interacción

• No hay ni uno que imite el efecto de <blink />. Exijo reembolso (humor en tono de broma)

• Con el plugin Dark Reader activado, la vista previa no funciona

• Me gusta especialmente el patrón de triángulos. Me pregunto si está inspirado en Rule 30

  • Es la primera vez que escucho sobre Rule 30. Menos mal que el enlace era a Wikipedia; el concepto me pareció bastante interesante y una idea inspiradora. Gracias por compartirlo

• Hace como un año, cuando rehíce mi portafolio, encontré este sitio y usé uno de los fondos en el header. Muchas gracias

  • Me alegra que te haya sido útil. Qué bueno saber que ayudó

• Los fondos están buenísimos. Quiero probarlos en mi juego de solitario
  Pero en móvil, si hago scroll después de la vista previa, la imagen desaparece y tengo que recargar para verla otra vez. Y también estaría bueno que cada patrón tuviera nombre

  • Qué raro. Te agradecería si puedes enviar la información de tu dispositivo o navegador por el formulario de contacto. Como referencia, cada fondo sí tiene nombre, pero en móvil está oculto porque el espacio en pantalla es reducido