Фон из кругов

Question

Я знаю, как легко сделать точечный фоновый узор.

body {
  background: linear-gradient(90deg, #eee 30px, transparent 1%) center, 
    linear-gradient(#eee 30px, transparent 1%) center, #444;
  background-size: 34px 34px;
}

Скажите, пожалуйста, как легко получить круги вместо квадратов?

■ ■ ■   ● ● ●
■ ■ ■ → ● ● ●
■ ■ ■   ● ● ●

Answer 1

Просто используйте радиальный градиент , затем управляйте background-size и / или% цветовой остановки для достижения необходимого рисунка:

body {
  background: radial-gradient(circle at center, #000 20%, transparent 22%),#eee; 
  background-size: 34px 34px;
}

body {
  background: radial-gradient(circle at center, #000 10%, transparent 12%),#eee; 
  background-size: 50px 50px;
}

---

Вы также можете создать круг с SVG и использовать его с фоном.

body {
 background-image: url('data:image/svg+xml,<svg  xmlns="http://www.w3.org/2000/svg" height="100" width="100"><circle cx="50" cy="50" r="20" fill="#000" /></svg>'); 
  background-size: 30px 30px;
}

SVG может быть более общим решением, если вам нужно рассмотреть более сложные формы:

body {
 background-image: url('data:image/svg+xml,<svg height="200" width="200"  xmlns="http://www.w3.org/2000/svg" ><polygon points="100,10 40,198 190,78 10,78 160,198" fill="#000" /></svg>'); 
  background-size: 30px 30px;
}