El elemento SVG nos permite definir patrones dentro de nuestro marcado SVG y usar esos patrones como un fill. El proceso básico para los patrones es algo como:
- Definir un
interior del SVG - Definir las formas dentro del patrón.
- Usa las formas
- Crea una nueva forma y rellénala con el patrón
Esta es una colección de formas SVG simples que se utilizan como patrones. Esta lista puede crecer con el tiempo, pero la idea es menos tener una colección completa que tener la sintaxis a mano como punto de partida para crear patrones nuevos y emocionantes.
También mantenemos una colección de estos en CodePen.
Patrón de círculo
Patrón de tablero de ajedrez
Patrón hexagonal
Patrón de cubo
Patrón de Chevron
Si desea jugar en tiempo real con los diferentes atributos de un patrón para tener una idea de cómo funciona el patrón, intente esto: