O elemento SVG nos permite definir padrões dentro de nossa marcação SVG e usar esses padrões como um fill. O processo básico para padrões é algo como:
- Defina um
interior do SVG - Defina as formas dentro do padrão
- Use as formas
- Crie uma nova forma e preencha-a com o padrão
Esta é uma coleção de formas SVG simples usadas como padrões. Essa lista pode crescer com o tempo, mas a ideia é menos ter uma coleção abrangente do que ter a sintaxe à mão como ponto de partida para a criação de padrões novos e interessantes.
Também mantemos uma coleção deles no CodePen.
Padrão de Círculo
Padrão Quadriculado
Padrão hexagonal
Padrão de Cubo
Padrão Chevron
Se você gostaria de brincar em tempo real com os diferentes atributos de um padrão para ter uma ideia de como o padrão funciona, tente isto: