Шаблони SVG - CSS-хитрощі

Anonim

Елемент SVG дозволяє нам визначати шаблони всередині нашої розмітки SVG і використовувати ці шаблони як fill. Основний процес для шаблонів виглядає приблизно так:

  • Визначте внутрішню частину SVG
  • Визначте фігури всередині візерунка
  • Використовуйте фігури
  • Створіть нову фігуру і заповніть її візерунком

Це колекція простих форм SVG, що використовуються як візерунки. Цей список може з часом зростати, але ідея полягає не в тому, щоб мати всебічну колекцію, а не в тому, щоб синтаксис був зручним як відправною точкою для створення нових захоплюючих зразків.

Ми також зберігаємо їх колекцію на CodePen.

Коло візерунком

 

Шаховий шаблон

 

Шестикутник візерунком

 

Куб візерунок

 

Шеврон візерунком

 

Якщо ви хочете пограти в реальному часі з різними атрибутами шаблону, щоб відчути, як працює візерунок, спробуйте наступне: