css повторяющийся фон из кругов

Question

Подскажите способ, как создать фоновое изображение из повторяющихся по горизонтали (background-repeat:round;), впритык один к другому кругов (ну или полукругов), желательно чтобы их количество вписывалось в ширину браузера без остатка. Нашел с повторяющимся "забором"

body {
  background-color: #000;
  margin: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.ground {
  height: 50vh;
  width: 100%;
  box-sizing: border-box;
  border-top: 10px solid transparent;
  background-image: linear-gradient(lightblue, skyblue), linear-gradient(to bottom right, transparent 50.5%, lightblue 50.5%), linear-gradient(to bottom left, transparent 50.5%, lightblue 50.5%), linear-gradient(to top right, transparent 50.5%, skyblue 50.5%), linear-gradient(to top left, transparent 50.5%, skyblue 50.5%);
  background-repeat: repeat, repeat-x, repeat-x, repeat-x, repeat-x;
  background-position: 0 0, 10px 0, 10px 0, 10px 100%, 10px 100%;
  background-size: auto auto, 20px 20px, 20px 20px, 20px 20px, 20px 20px;
  background-clip: padding-box, border-box, border-box, border-box, border-box;
  background-origin: padding-box, border-box, border-box, border-box, border-box;
}

<div class="ground"></div>

А вот как быть с кругами?

Answer 1

впритык один к другому кругов (ну или полукругов), желательно чтобы их количество вписывалось в ширину браузера без остатка

Для этой цели можно использовать svg pattern.

Допустим для кругов с радиусом r="20" ширина и высота одной плитки патерна будет равна 42px - (20 x 2 +1 +1) Один пиксель дается на ширину строки круга

Чтобы плитки уложились ровно без остатка на всю ширину браузера, нужно подобрать параметры viewBox svg файла кратными размерам одной плитки width = 42 х 35 =1470 и height = 42 x 50 = 2100 итого viewBox="0 0 1470 2100"

<style>
.ground {
  position: absolute;
  top: 0;
  left: 0;
   height: auto;
  width: 100vw;
  background-color: #000;
  z-index: 2;
}

 </style> 
<div class="ground">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 1470 2100" preserveAspectRatio="xMinYMin meet">
        <defs>
            <pattern id="circle" x="0" y="0" width="42px" height="42px" viewBox="0 0 42 42" patternUnits="userSpaceOnUse">
                <circle cx="21" cy="21" r="20" fill="skyblue" />
            </pattern>
        </defs>
        <rect x="0" y="0" width="100%" height="100%" fill="url(#circle)" />
    </svg>
</div>

Если потом захочется изменить размер кругов и расстояние между ними, то можно будет просто поменять viewBox в самом патерне

В первом примере было viewBox ="0 0 42 42" стало viewBox ="0 0 82 84"

.ground {
  position: absolute;
  top: 0;
  left: 0;
   height: auto;
  width: 100vw;
  background-color: #000;
  z-index: 2;
}

<div class="ground">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 1470 2100" preserveAspectRatio="xMinYMin meet">
        <defs>
            <pattern id="circle" x="0" y="0" width="42px" height="42px" viewBox="0 0 84 84" patternUnits="userSpaceOnUse">
                <circle cx="21" cy="21" r="20" fill="skyblue" />
            </pattern>
        </defs>
        <rect x="0" y="0" width="100%" height="100%" fill="url(#circle)" />
    </svg>
</div>

UPDATE

Анимация патерна

Для анимации используется изменение значения viewBox у паттерна

.ground {
  position: absolute;
  top: 0;
  left: 0;
   height: auto;
  width: 100vw;
  background-color: #000;
  z-index: 2;
}

<div class="ground">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 1470 2100" preserveAspectRatio="xMinYMin meet">
        <defs>
            <pattern id="circle" x="0" y="0" width="42px" height="42px" viewBox="0 0 42 42" patternUnits="userSpaceOnUse">
                <circle cx="21" cy="21" r="20" fill="skyblue" /> 
                <animate
                  attributeName="viewBox"
                  dur="14s"
                  begin="0s"
                  repeatCount="indefinite"
                  values="
                    0 0 336 336;
                    0 0 84  84;
                    0 0 84  84;
                    0 0 42 42;
                    0 0 42 42;
                    0 0 84  84;
                    0 0 84  84;
                    0 0 336 336;
                    0 0 336 336
                  " /> 
                  
            </pattern>
        </defs>
        <rect x="0" y="0" width="100%" height="100%" fill="url(#circle)" />
    </svg>
</div>

В этом примере к анимации viewBox добавлена анимация заполнения цветом (fill) окружностей.

.ground {
  position: absolute;
  top: 0;
  left: 0;
   height: auto;
  width: 100vw;
  background-color: #000;
  z-index: 2;
}

<div class="ground">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 1470 2100" preserveAspectRatio="xMinYMin meet">
        <defs>
            <pattern id="circle" x="0" y="0" width="42px" height="42px" viewBox="0 0 42 42" patternUnits="userSpaceOnUse">
                <circle cx="21" cy="21" r="20" fill="skyblue" >
                  <animate
                  attributeName="fill"
                  dur="14s"
                  begin="0s"
                  repeatCount="indefinite"
                  values="
                    skyblue;
                    gold;
                    gold;
                    yellowgreen;
                    yellowgreen;
                    orange;
                    orange;
                    skyblue" />                 
                  
                </circle>               
                <animate
                  attributeName="viewBox"
                  dur="14s"
                  begin="0s"
                  repeatCount="indefinite"
                  values="
                    0 0 336 336;
                    0 0 84  84;
                    0 0 84  84;
                    0 0 42 42;
                    0 0 42 42;
                    0 0 84  84;
                    0 0 84  84;
                    0 0 336 336;
                    0 0 336 336
                  " /> 
              
            </pattern>
        </defs>
        <rect x="0" y="0" width="100%" height="100%" fill="url(#circle)" />
    </svg>
</div>

Answer 2

Накостылил вот такой вариант.

body {
  width: 100%;
  min-height: 100vh;
  margin: 0;
  --d: calc(100vw / 35); /* диаметр */
  --b: 1px;              /* размытие|сглаживание */
  --c1: lightblue;       /* Цвет 1 */
  --c2: skyblue;         /* Цвет 2 */
  background: 
    radial-gradient(circle at 50% var(--d),
      var(--c1) calc(var(--d) / 2),
      transparent calc(var(--d) / 2 + var(--b))) repeat-x left center / var(--d) var(--d),
    linear-gradient(to bottom, 
      var(--c1), var(--c2)) no-repeat center bottom / 100% calc(50% - var(--d) / 2);
  background-color: black;
}

Answer 3

Как комментирует @BlackStar1991:

Интересует именно в одну линию и похожее на "забор" (повторение только по горизонтали ) и соприкосновение кругов стык в стык.

Для решение тоже используется pattern SVG, но он будет применен к прямоугольнику высотой равной половине окружности в паттерне.

 <rect x="0" y="0%" width="100%" height="21" fill="url(#circle)" />

Поэтому будет выводиться только половина окружности.
Какая часть окружности, верхняя или нижняя будет выведена зависит от положения центра окружности в паттерне.

#1. При cy="0" ,будет выведена нижняя часть окружности

.ground {
position:relative;
width:100vw;
height:100vh;
background: linear-gradient(to bottom, black 50%,skyblue  50%);
}

.svg {
position:absolute;
top:49.9%;
bottom:50%;

<div class="ground">
  <svg class="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 1470 1050" preserveAspectRatio="xMinYMin meet">
        <defs>
            <pattern id="circle"  width="42px" height="21px" viewBox="0 0 42 21" patternUnits="userSpaceOnUse">
                <circle cx="21" cy="0" r="20" fill="black" />
            </pattern>
        </defs>
        <rect x="0" y="0%" width="100%" height="21" fill="url(#circle)" />
    </svg>
</div>

#2. При cy="21" ,будет выведена верхняя часть окружности:

.ground {
position:relative;
width:100vw;
height:100vh;
background: linear-gradient(to bottom, black 50%,skyblue  50%);
}
.svg {
position:absolute;
top:48%;
bottom:50%;
}

<div class="ground">
  <svg class="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1470" height="1050"  viewBox="0 0 1470 1050" preserveAspectRatio="xMinYMin meet">
        <defs>
            <pattern id="circle"  width="42px" height="21px" viewBox="0 0 42 21" patternUnits="userSpaceOnUse">
                <circle cx="21" cy="21" r="20" fill="skyblue" />
            </pattern>
        </defs>
        <rect x="0" y="0%" width="100%" height="21" fill="url(#circle)" />
    </svg>
</div>

#3. Пример анимации

Два примера можно объединить в один, показывая, то верхнюю, то нижнюю половинку окружности в патерне

   <!-- Анимация положения центра окружности -->
                  <animate attributeName="cy" dur="2.5s" calcMode="discrete" 
                    values="21;0;21"   repeatCount="indefinite" />

Смотрите на полный экран, сниппет искажает реальную анимацию

.ground {
position:relative;
width:100vw;
height:100vh;
background: linear-gradient(to bottom, black 50%,skyblue  50%);
}

.svg {
position:absolute;
top:48.5%;
bottom:50%;
}

<div class="ground">
  <svg class="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1470" height="1050"  viewBox="0 0 1470 1050" preserveAspectRatio="xMinYMin meet">
        <defs>
            <pattern id="circle"  width="42px" height="21px" viewBox="0 0 42 21" patternUnits="userSpaceOnUse">
                <circle cx="21" cy="21" r="20" fill="skyblue" >
                    <!-- Анимация положения центра окружности -->
                  <animate attributeName="cy" dur="2.5s" calcMode="discrete" 
                    values="21;0;21"   repeatCount="indefinite" />  
                       <!-- Анимация закраски половинки окружности в патерне                     -->
                    <animate attributeName="fill" dur="2.5s" calcMode="discrete" 
                    values="skyblue;black;skyblue"   repeatCount="indefinite" />
                </circle>
            </pattern>
        </defs>
        <rect x="0" y="0%" width="100%" height="21" fill="url(#circle)" />
    </svg>
</div>

БЛОГ НА HUSL

css повторяющийся фон из кругов

Ответы (3 шт):

UPDATE

#3. Пример анимации