Генератор точечных SVG-узоров

Как определяется шаблон

Генератор выводит элемент <pattern> внутри объекта <defs> и заполняет всё экранное пространство объекта <rect> с помощью элемента 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" фиксирует размер плитки в пикселях, поэтому масштабирование исходного SVG-файла не приводит к искажению точек.

Краткий справочник по настройке шаблонов

Использование его в качестве фона для CSS

Преобразуйте SVG в URL-адрес данных и примените его к любому элементу:

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

Использование CSS для размещения изображений в формате SVG быстрее, чем использование PNG: браузер растровизирует файл в конечном размере отображения, благодаря чему изображение сохраняет чёткость на всех уровнях масштабирования (1x, 2x, 3x).

Когда точки снижают читаемость

Шаблон точек, расположенный непосредственно за основным текстом, может создавать мерцающий эффект мори на тонком тексте. Если необходимо разместить текст сверху, используйте один из следующих подходов:

• Увеличьте расстояние между точками до более чем 40 пикселей, чтобы они располагались между строками, или
• Установите прозрачность шаблона ниже 10 %, или
• Разместите текст на твёрдой карточке над узором.