TransWikia.com

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

Stack Overflow на русском Asked on December 9, 2021

Я искал в 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.

2 Answers

Поскольку радиусы шестиугольников являются переменной 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.

Answered by Alexandr_TT on December 9, 2021

Вот идея, объединяющая 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.

Answered by Alexandr_TT on December 9, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP