Паттерн из шестиугольников с полутонами

#css #css3 #html5 #вёрстка #svg

Я искал в Google, но не нашёл ответов или статей на этот вопрос. 
 Я хочу создать сетку из шестиугольников, но она мне нужна в виде полутонов, поэтому
мне может понадобиться более одного шестиугольника в шаблоне.  

Ниже приведен код, который генерирует шаблон шестиугольников, но не в виде полутонов.
Мне нужно, чтобы полутоновый рисунок шел горизонтально.  

У меня есть эта ссылка шаблона полутонов от Adobe, но сетка слишком мала, и она идет
вертикально, но я хочу его горизонтально. 



Как сделать, чтобы рисунок шестиугольников проходил горизонтально в виде полутонов?    



html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  background: black;
}
svg {
  background: rgb(125, 155, 132);
}

polygon {
  fill: rgb(125, 155, 132);
  stroke-width: 1;
  stroke: #000;
}




    

Ответы

Ответ 1

Вот идея, объединяющая SVG и множественный фон. Хитрость заключается в том, чтобы
иметь разные SVG в каждом ряду, где каждый раз, когда вы увеличиваете stroke, и затем
вы используете некоторый радиальный фон.

Я использовал некоторые переменные CSS, чтобы легко настроить форму:   





body {  
  height: calc(10.35*var(--s));
  margin: 0;
  --s:9.65vh;
  --p:calc(var(--s)*0.667);
  --x:calc(var(--s)*1.35);
  position:relative;
}

body:before,
body:after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:50.1%;
  background: 
      url('data:image/svg+xml;utf8,') 0 0,
      url('data:image/svg+xml;utf8,'),
      url('data:image/svg+xml;utf8,'),
      url('data:image/svg+xml;utf8,'),
      url('data:image/svg+xml;utf8,'),
      url('data:image/svg+xml;utf8,'),
      url('data:image/svg+xml;utf8,'),
      url('data:image/svg+xml;utf8,');
  background-size:auto var(--s);
  background-position:
    0        calc(0*var(--p)),
    var(--x) calc(1*var(--p)),
    0        calc(2*var(--p)),
    var(--x) calc(3*var(--p)),
    0        calc(4*var(--p)),
    var(--x) calc(5*var(--p)),
    0        calc(6*var(--p)),
    var(--x) calc(7*var(--p));
  background-repeat:repeat-x;
}

body:after {
  transform:scaleY(-1);
  transform-origin:bottom;
}




Мы можем изменить окраску, изменив цвета SVG:  





body {  
  height: calc(10.35*var(--s));
  margin: 0;
  --s:9.65vh;
  --p:calc(var(--s)*0.667);
  --x:calc(var(--s)*1.35);
  position:relative;
}

body:before,
body:after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:50.1%;
  background: 
      url('data:image/svg+xml;utf8,') 0 0,
      url('data:image/svg+xml;utf8,'),
      url('data:image/svg+xml;utf8,'),
      url('data:image/svg+xml;utf8,'),
      url('data:image/svg+xml;utf8,'),
      url('data:image/svg+xml;utf8,'),
      url('data:image/svg+xml;utf8,'),
      url('data:image/svg+xml;utf8,');
  background-size:auto var(--s);
  background-position:
    0        calc(0*var(--p)),
    var(--x) calc(1*var(--p)),
    0        calc(2*var(--p)),
    var(--x) calc(3*var(--p)),
    0        calc(4*var(--p)),
    var(--x) calc(5*var(--p)),
    0        calc(6*var(--p)),
    var(--x) calc(7*var(--p));
  background-repeat:repeat-x;
}

body:after {
  transform:scaleY(-1);
  transform-origin:bottom;
}




А также инвертировать шаблон, изменив background-position   





body {  
  height: calc(10.35*var(--s));
  margin: 0;
  --s:9.65vh;
  --p:calc(var(--s)*0.667);
  --x:calc(var(--s)*1.35);
  position:relative;
}

body:before,
body:after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:50.1%;
  background: 
     url('data:image/svg+xml;utf8,') 0 0,
      url('data:image/svg+xml;utf8,'),
      url('data:image/svg+xml;utf8,'),
      url('data:image/svg+xml;utf8,'),
      url('data:image/svg+xml;utf8,'),
      url('data:image/svg+xml;utf8,'),
      url('data:image/svg+xml;utf8,'),
      url('data:image/svg+xml;utf8,');
  background-size:auto var(--s);
  background-position:
    var(--x) calc(7*var(--p)),
    0        calc(6*var(--p)),
    var(--x) calc(5*var(--p)),
    0        calc(4*var(--p)),
    var(--x) calc(3*var(--p)),
    0        calc(2*var(--p)),
    var(--x) calc(1*var(--p)),
    0        calc(0*var(--p));
  background-repeat:repeat-x;
}

body:after {
  transform:scaleY(-1);
  transform-origin:bottom;
}




Для горизонтального шаблона мы делаем то же самое с учетом repeat-y и инвертируем
почти все значения:   





body {  
  width: calc(10.35*var(--s));
  height:150vh;
  margin:0;
  --s:9.65vw;
  --p:calc(var(--s)*0.667);
  --x:calc(var(--s)*1.35);
  position:relative;
  overflow:hidden;
}

body:before,
body:after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  width:50.1%;
  background: 
      url('data:image/svg+xml;utf8,') 0 0,
      url('data:image/svg+xml;utf8,'),
      url('data:image/svg+xml;utf8,'),
      url('data:image/svg+xml;utf8,'),
      url('data:image/svg+xml;utf8,'),
      url('data:image/svg+xml;utf8,'),
      url('data:image/svg+xml;utf8,'),
      url('data:image/svg+xml;utf8,');
  background-size:var(--s) auto ;
  background-position:
    calc(7*var(--p)) var(--x),
    calc(6*var(--p)) 0,
    calc(5*var(--p)) var(--x),
    calc(4*var(--p)) 0,
    calc(3*var(--p)) var(--x),
    calc(2*var(--p)) 0,
    calc(1*var(--p)) var(--x),
    calc(0*var(--p)) 0;
  background-repeat:repeat-y;
}

body:after {
  transform:scaleX(-1);
  transform-origin:right;
}




Другой паттерн:





body {  
  width: calc(10.35*var(--s));
  height:150vh;
  margin:0;
  --s:9.35vw;
  --p:calc(var(--s)*0.667);
  --x:calc(var(--s)*1.35);
  position:relative;
}

body:before,
body:after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  width:50.1%;
  background: 
      url('data:image/svg+xml;utf8,') 0 0,
      url('data:image/svg+xml;utf8,'),
      url('data:image/svg+xml;utf8,'),
      url('data:image/svg+xml;utf8,'),
      url('data:image/svg+xml;utf8,'),
      url('data:image/svg+xml;utf8,'),
      url('data:image/svg+xml;utf8,'),
      url('data:image/svg+xml;utf8,');
  background-size:var(--s) auto ;
  background-position:
    calc(7*var(--p)) var(--x),
    calc(6*var(--p)) 0,
    calc(5*var(--p)) var(--x),
    calc(4*var(--p)) 0,
    calc(3*var(--p)) var(--x),
    calc(2*var(--p)) 0,
    calc(1*var(--p)) var(--x),
    calc(0*var(--p)) 0;
  background-repeat:repeat-y;
}

body:after {
  transform:scaleX(-1);
  transform-origin:right;
}




И еще один пример паттерна - светлый по центру, тёмный по краям:  





body {  
  width: calc(10.35*var(--s));
  height:150vh;
  margin:0;
  --s:9.35vw;
  --p:calc(var(--s)*0.667);
  --x:calc(var(--s)*1.35);
  position:relative;
}

body:before,
body:after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  width:50.1%;
  background: 
      url('data:image/svg+xml;utf8,') 0 0,
      url('data:image/svg+xml;utf8,'),
      url('data:image/svg+xml;utf8,'),
      url('data:image/svg+xml;utf8,'),
      url('data:image/svg+xml;utf8,'),
      url('data:image/svg+xml;utf8,'),
      url('data:image/svg+xml;utf8,'),
      url('data:image/svg+xml;utf8,');
  background-size:var(--s) auto ;
  background-position:
    calc(0*var(--p)) var(--x),
    calc(1*var(--p)) 0,
    calc(2*var(--p)) var(--x),
    calc(3*var(--p)) 0,
    calc(4*var(--p)) var(--x),
    calc(5*var(--p)) 0,
    calc(6*var(--p)) var(--x),
    calc(7*var(--p)) 0;
  background-repeat:repeat-y;
}

body:after {
  transform:scaleX(-1);
  transform-origin:right;
}




Источник ответа: @Temani Afif


Ответ 2

Поскольку радиусы шестиугольников являются переменной y, вы не можете использовать
здесь паттерны.     

Основная идея заключается в следующем: 


фон svg белый;  
Шестиугольник закрашен в чёрный цвет fill="black"  
Чтобы нарисовать шестиугольники, вам нужно вычислить центр описанного
круга. Вы делаете это, используя значение радиуса описанной
окружности R. Это создает гексагональную решетку.    
Внутри гексагональной решетки необходимо изменить радиус описанной
окружности для шестиугольников в зависимости от y следующим
образом: let r = R * Math.sin (angle), где угол зависит от y
значение  рассчитывается так: let angle = map (x, 0, H, 0,
Math.PI); Это означает, что x принимает значение от 0 до 200 (H), а угол будет иметь
значение между 0 и Math.PI.      


Пожалуйста прочтите комментарии в коде 



 const SVG_NS = 'http://www.w3.org/2000/svg';
const SVG_XLINK = "http://www.w3.org/1999/xlink"
// переменные, используемые для рисования шестиугольника
let R = 5;// радиус описанной окружности
let h = R * Math.sin(Math.PI / 3);//половина высоты шестиугольника
let offset = 1.5 * R;//используется для смещения каждой второй строки шестиугольников
let W = 200,H=200;//svg's viewBox = "0 0 200 200"

//нарисовать гексагональную решетку
let i = 0;
for(let y = 0; y  





UPDATE 

Автор вопроса комментирует: 


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


и позже:    


  в основном то, что вы сделали, работает, но мне нужно повторить шаблон
  по всей странице, потому что изображение будет иметь ширину 100% и
  высоту около 800 пикселей   


В этом случае вы можете поместить все шестиугольники в группу и использовать clipPath,
чтобы обрезать группу следующим образом:   



var SVG_NS = 'http://www.w3.org/2000/svg';
var SVG_XLINK = "http://www.w3.org/1999/xlink"
let H = 800,W=500
var R = 5;
//var l = R;
var h = R * Math.sin(Math.PI / 3);
var offset = 1.5 * R;



let i = 0;
for(let y = 0; y 

  

  






Источник ответа: @enxaneta