4

Я искал в 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;
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">
         <defs>
            <pattern id="hexagons" width="50" height="43.4" 
            patternUnits="userSpaceOnUse" 
            patternTransform="scale(2)">
                <polygon 
                points="24.8,22 37.3,29.2 37.3,43.7 24.8,50.9 12.3,43.7 12.3,29.2" 
                id="hex" shape-rendering="geometricPrecision" />
                <use xlink:href="#hex" x="25" />
                <use xlink:href="#hex" x="-25" />
                <use xlink:href="#hex" x="12.5" y="-21.7" />
                <use xlink:href="#hex" x="-12.5" y="-21.7" />
            </pattern>
         </defs>
        <rect width="100%" height="100%" fill="url(#hexagons)" />
    </svg>

Свободный перевод вопроса svg hexagon halftone pattern от участника @ONYX.

1

2 ответа 2

4

Поскольку радиусы шестиугольников являются переменной 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<H; y+=h){
i++
let o = (i%2 == 0) ? offset : 0;
for(let x = o; x<W; x+=3*R){
  hex(x,y)
}
}


 // функция, используемая для рисования шестиугольника
 // радиус шестиугольника зависит от значения х
 function hex(x,y) {
    // радиус нарисованного шестиугольника зависит от значения `х`
    let angle = map(x, 0, H, 0, Math.PI);
    let r = R * Math.sin(angle) - .5
   
    let points = ""
    for (var a = 0; a < 6; a++) {
      let o = {}
      o.x = x + r * Math.cos(a * Math.PI / 3);
      o.y = y + r * Math.sin(a * Math.PI / 3);
      points+= `${o.x}, ${o.y} `
    } 
   
     let hexagon = drawSVGelmt({points:points},"polygon", svg)
  }



// функция, используемая для рисования нового элемента SVG
function drawSVGelmt(o,tag, parent) {
  
  let elmt = document.createElementNS(SVG_NS, tag);
  for (let name in o) {
    if (o.hasOwnProperty(name)) {
      elmt.setAttributeNS(null, name, o[name]);
    }
  }
  parent.appendChild(elmt);
  return elmt;
}


function map(n, a, b, _a, _b) {
  let d = b - a;
  let _d = _b - _a;
  let u = _d / d;
  return _a + n * u;
}
svg{background:white; border:1px solid;width:90vh;}
polygon{fill:black}
<svg id="svg" viewBox = "0 0 200 200" >  
</svg>

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<H; y+=h){
i++
let o = (i%2 == 0) ? offset : 0;
for(let x = o; x<W; x+=3*R){
  hex(x,y)
}
}

 function hex(x,y) {
    let angle = map(x, 0, W, 0, Math.PI);
    let r = R * Math.sin(angle) - .5
   
    let points = ""
    for (var a = 0; a < 6; a++) {
      let o = {}
      o.x = x + r * Math.cos(a * Math.PI / 3);
      o.y = y + r * Math.sin(a * Math.PI / 3);
      points+= `${o.x}, ${o.y} `
    } 
   
     let hexagon = drawSVGelmt({points:points},"polygon", svg)
  }




function drawSVGelmt(o,tag, parent) {
  
  let elmt = document.createElementNS(SVG_NS, tag);
  for (let name in o) {
    if (o.hasOwnProperty(name)) {
      elmt.setAttributeNS(null, name, o[name]);
    }
  }
  parent.appendChild(elmt);
  return elmt;
}


function map(n, a, b, _a, _b) {
  let d = b - a;
  let _d = _b - _a;
  let u = _d / d;
  return _a + n * u;
}
svg{background:white; border:1px solid;}
polygon{fill:black}
<svg viewBox = "0 0 500 800" > 
<clipPath  id="clip">
  <polygon points="250,0 100,100 0 300 100,600 200,800 400,600 500,500 400,200 250,0"/>
</clipPath>
  
<g id="svg" style="clip-path: url(#clip)"></g>
</svg>

Свободный перевод ответа svg hexagon halftone pattern от участника @enxaneta.

4

Вот идея, объединяющая 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,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="2 0 216 240" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon fill="transparent" stroke="black" stroke-width="5" points="113,5 221,67.5 221,172.5 113,235 5,172.6 5,67.5" /></svg>') 0 0,
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="2 0 216 240" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon fill="transparent" stroke="black" stroke-width="10" points="113,5 221,67.5 221,172.5 113,235 5,172.6 5,67.5" /></svg>'),
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="2 0 216 240" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon fill="transparent" stroke="black" stroke-width="15" points="113,5 221,67.5 221,172.5 113,235 5,172.6 5,67.5" /></svg>'),
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="2 0 216 240" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon fill="transparent" stroke="black" stroke-width="20" points="113,5 221,67.5 221,172.5 113,235 5,172.6 5,67.5" /></svg>'),
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="2 0 216 240" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><radialGradient id="g"><stop stop-color = "transparent" offset="80%"/><stop stop-color="black" offset="90%"/></radialGradient></defs><polygon fill="url(%23g)" stroke="black" stroke-width="20" points="113,5 221,67.5 221,172.5 113,235 5,172.6 5,67.5" /></svg>'),
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="2 0 216 240" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><radialGradient id="g"><stop stop-color = "transparent" offset="70%"/><stop stop-color="black" offset="80%"/></radialGradient></defs><polygon fill="url(%23g)" stroke="black" stroke-width="20" points="113,5 221,67.5 221,172.5 113,235 5,172.6 5,67.5" /></svg>'),
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="2 0 216 240" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><radialGradient id="g"><stop stop-color = "transparent" offset="50%"/><stop stop-color="black" offset="60%"/></radialGradient></defs><polygon fill="url(%23g)" stroke="black" stroke-width="20" points="113,5 221,67.5 221,172.5 113,235 5,172.6 5,67.5" /></svg>'),
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="2 0 216 240" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><radialGradient id="g"><stop stop-color = "transparent" offset="30%"/><stop stop-color="black" offset="40%"/></radialGradient></defs><polygon fill="url(%23g)" stroke="black" stroke-width="20" points="113,5 221,67.5 221,172.5 113,235 5,172.6 5,67.5" /></svg>');
  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,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="2 0 216 240" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon fill="black" stroke="white" stroke-width="5" points="113,5 221,67.5 221,172.5 113,235 5,172.6 5,67.5" /></svg>') 0 0,
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="2 0 216 240" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon fill="black" stroke="white" stroke-width="10" points="113,5 221,67.5 221,172.5 113,235 5,172.6 5,67.5" /></svg>'),
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="2 0 216 240" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon fill="black" stroke="white" stroke-width="15" points="113,5 221,67.5 221,172.5 113,235 5,172.6 5,67.5" /></svg>'),
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="2 0 216 240" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon fill="black" stroke="white" stroke-width="20" points="113,5 221,67.5 221,172.5 113,235 5,172.6 5,67.5" /></svg>'),
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="2 0 216 240" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><radialGradient id="g"><stop stop-color = "black" offset="80%"/><stop stop-color="transparent" offset="90%"/></radialGradient></defs><polygon fill="url(%23g)" stroke="white" stroke-width="20" points="113,5 221,67.5 221,172.5 113,235 5,172.6 5,67.5" /></svg>'),
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="2 0 216 240" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><radialGradient id="g"><stop stop-color = "black" offset="70%"/><stop stop-color="transparent" offset="80%"/></radialGradient></defs><polygon fill="url(%23g)" stroke="white" stroke-width="20" points="113,5 221,67.5 221,172.5 113,235 5,172.6 5,67.5" /></svg>'),
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="2 0 216 240" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><radialGradient id="g"><stop stop-color = "black" offset="50%"/><stop stop-color="transparent" offset="60%"/></radialGradient></defs><polygon fill="url(%23g)" stroke="white" stroke-width="20" points="113,5 221,67.5 221,172.5 113,235 5,172.6 5,67.5" /></svg>'),
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="2 0 216 240" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><radialGradient id="g"><stop stop-color = "black" offset="30%"/><stop stop-color="transparent" offset="40%"/></radialGradient></defs><polygon fill="url(%23g)" stroke="white" stroke-width="20" points="113,5 221,67.5 221,172.5 113,235 5,172.6 5,67.5" /></svg>');
  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,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="2 0 216 240" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon fill="black" stroke="white" stroke-width="5" points="113,5 221,67.5 221,172.5 113,235 5,172.6 5,67.5" /></svg>') 0 0,
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="2 0 216 240" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon fill="black" stroke="white" stroke-width="10" points="113,5 221,67.5 221,172.5 113,235 5,172.6 5,67.5" /></svg>'),
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="2 0 216 240" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon fill="black" stroke="white" stroke-width="15" points="113,5 221,67.5 221,172.5 113,235 5,172.6 5,67.5" /></svg>'),
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="2 0 216 240" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon fill="black" stroke="white" stroke-width="20" points="113,5 221,67.5 221,172.5 113,235 5,172.6 5,67.5" /></svg>'),
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="2 0 216 240" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><radialGradient id="g"><stop stop-color = "black" offset="80%"/><stop stop-color="transparent" offset="90%"/></radialGradient></defs><polygon fill="url(%23g)" stroke="white" stroke-width="20" points="113,5 221,67.5 221,172.5 113,235 5,172.6 5,67.5" /></svg>'),
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="2 0 216 240" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><radialGradient id="g"><stop stop-color = "black" offset="70%"/><stop stop-color="transparent" offset="80%"/></radialGradient></defs><polygon fill="url(%23g)" stroke="white" stroke-width="20" points="113,5 221,67.5 221,172.5 113,235 5,172.6 5,67.5" /></svg>'),
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="2 0 216 240" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><radialGradient id="g"><stop stop-color = "black" offset="50%"/><stop stop-color="transparent" offset="60%"/></radialGradient></defs><polygon fill="url(%23g)" stroke="white" stroke-width="20" points="113,5 221,67.5 221,172.5 113,235 5,172.6 5,67.5" /></svg>'),
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="2 0 216 240" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><radialGradient id="g"><stop stop-color = "black" offset="30%"/><stop stop-color="transparent" offset="40%"/></radialGradient></defs><polygon fill="url(%23g)" stroke="white" stroke-width="20" points="113,5 221,67.5 221,172.5 113,235 5,172.6 5,67.5" /></svg>');
  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,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 2 240 216" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon fill="transparent" stroke="black" stroke-width="5" points="5,113 67.5,221 172.5,221 235,113 172.6,5 67.5,5" /></svg>') 0 0,
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 2 240 216" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon fill="transparent" stroke="black" stroke-width="10" points="5,113 67.5,221 172.5,221 235,113 172.6,5 67.5,5" /></svg>'),
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 2 240 216" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon fill="transparent" stroke="black" stroke-width="15" points="5,113 67.5,221 172.5,221 235,113 172.6,5 67.5,5" /></svg>'),
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 2 240 216" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon fill="transparent" stroke="black" stroke-width="20" points="5,113 67.5,221 172.5,221 235,113 172.6,5 67.5,5" /></svg>'),
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 2 240 216" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><radialGradient id="g"><stop stop-color = "transparent" offset="80%"/><stop stop-color="black" offset="90%"/></radialGradient></defs><polygon fill="url(%23g)" stroke="black" stroke-width="20" points="5,113 67.5,221 172.5,221 235,113 172.6,5 67.5,5" /></svg>'),
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 2 240 216" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><radialGradient id="g"><stop stop-color = "transparent" offset="70%"/><stop stop-color="black" offset="80%"/></radialGradient></defs><polygon fill="url(%23g)" stroke="black" stroke-width="20" points="5,113 67.5,221 172.5,221 235,113 172.6,5 67.5,5" /></svg>'),
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 2 240 216" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><radialGradient id="g"><stop stop-color = "transparent" offset="50%"/><stop stop-color="black" offset="60%"/></radialGradient></defs><polygon fill="url(%23g)" stroke="black" stroke-width="20" points="5,113 67.5,221 172.5,221 235,113 172.6,5 67.5,5" /></svg>'),
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 2 240 216" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><radialGradient id="g"><stop stop-color = "transparent" offset="30%"/><stop stop-color="black" offset="40%"/></radialGradient></defs><polygon fill="url(%23g)" stroke="black" stroke-width="20" points="5,113 67.5,221 172.5,221 235,113 172.6,5 67.5,5" /></svg>');
  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,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 2 240 216" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon fill="black" stroke="white" stroke-width="5" points="5,113 67.5,221 172.5,221 235,113 172.6,5 67.5,5" /></svg>') 0 0,
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 2 240 216" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon fill="black" stroke="white" stroke-width="10" points="5,113 67.5,221 172.5,221 235,113 172.6,5 67.5,5" /></svg>'),
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 2 240 216" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon fill="black" stroke="white" stroke-width="15" points="5,113 67.5,221 172.5,221 235,113 172.6,5 67.5,5" /></svg>'),
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 2 240 216" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon fill="black" stroke="white" stroke-width="20" points="5,113 67.5,221 172.5,221 235,113 172.6,5 67.5,5" /></svg>'),
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 2 240 216" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><radialGradient id="g"><stop stop-color = "black" offset="80%"/><stop stop-color="transparent" offset="90%"/></radialGradient></defs><polygon fill="url(%23g)" stroke="white" stroke-width="20" points="5,113 67.5,221 172.5,221 235,113 172.6,5 67.5,5" /></svg>'),
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 2 240 216" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><radialGradient id="g"><stop stop-color = "black" offset="70%"/><stop stop-color="transparent" offset="80%"/></radialGradient></defs><polygon fill="url(%23g)" stroke="white" stroke-width="20" points="5,113 67.5,221 172.5,221 235,113 172.6,5 67.5,5" /></svg>'),
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 2 240 216" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><radialGradient id="g"><stop stop-color = "black" offset="50%"/><stop stop-color="transparent" offset="60%"/></radialGradient></defs><polygon fill="url(%23g)" stroke="white" stroke-width="20" points="5,113 67.5,221 172.5,221 235,113 172.6,5 67.5,5" /></svg>'),
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 2 240 216" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><radialGradient id="g"><stop stop-color = "black" offset="30%"/><stop stop-color="transparent" offset="40%"/></radialGradient></defs><polygon fill="url(%23g)" stroke="white" stroke-width="20" points="5,113 67.5,221 172.5,221 235,113 172.6,5 67.5,5" /></svg>');
  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,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 2 240 216" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon fill="black" stroke="white" stroke-width="5" points="5,113 67.5,221 172.5,221 235,113 172.6,5 67.5,5" /></svg>') 0 0,
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 2 240 216" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon fill="black" stroke="white" stroke-width="10" points="5,113 67.5,221 172.5,221 235,113 172.6,5 67.5,5" /></svg>'),
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 2 240 216" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon fill="black" stroke="white" stroke-width="15" points="5,113 67.5,221 172.5,221 235,113 172.6,5 67.5,5" /></svg>'),
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 2 240 216" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon fill="black" stroke="white" stroke-width="20" points="5,113 67.5,221 172.5,221 235,113 172.6,5 67.5,5" /></svg>'),
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 2 240 216" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><radialGradient id="g"><stop stop-color = "black" offset="80%"/><stop stop-color="transparent" offset="90%"/></radialGradient></defs><polygon fill="url(%23g)" stroke="white" stroke-width="20" points="5,113 67.5,221 172.5,221 235,113 172.6,5 67.5,5" /></svg>'),
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 2 240 216" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><radialGradient id="g"><stop stop-color = "black" offset="70%"/><stop stop-color="transparent" offset="80%"/></radialGradient></defs><polygon fill="url(%23g)" stroke="white" stroke-width="20" points="5,113 67.5,221 172.5,221 235,113 172.6,5 67.5,5" /></svg>'),
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 2 240 216" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><radialGradient id="g"><stop stop-color = "black" offset="50%"/><stop stop-color="transparent" offset="60%"/></radialGradient></defs><polygon fill="url(%23g)" stroke="white" stroke-width="20" points="5,113 67.5,221 172.5,221 235,113 172.6,5 67.5,5" /></svg>'),
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 2 240 216" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><radialGradient id="g"><stop stop-color = "black" offset="30%"/><stop stop-color="transparent" offset="40%"/></radialGradient></defs><polygon fill="url(%23g)" stroke="white" stroke-width="20" points="5,113 67.5,221 172.5,221 235,113 172.6,5 67.5,5" /></svg>');
  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;
}

Свободный перевод ответа svg hexagon halftone pattern от участника @Temani Afif.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.