SVG 六边形半色调图案

Question

我已经在谷歌上搜索，但没有得到关于这个问题的答案或文章。我想创建一个六边形网格，但需要以半色调的方式呈现，因此我可能需要在图案中使用多个六边形。下面是生成六边形图案的代码，但不是半色调图案。我需要半色调图案水平排列。我在 Adobe 上有一个半色调图案的链接，但网格太小且垂直排列，我希望水平排列。这是我在 codepen 上制作的六边形网格的链接。请问有人能向我展示如何使六边形图案以半色调方式水平排列吗？

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>

- ONYX

Answer 1

由于六边形的半径是x的变量，因此无法在此处使用图案。

• SVG背景为白色；
• 六边形填充为黑色。
• 为了绘制六边形，需要计算外接圆的中心点。您可以使用外接圆的半径值R来完成。这将生成一个六角形晶格。
• 在六角形晶格内，需要根据y的函数改变六边形的外接圆半径，方法如下：let r = R * Math.sin(angle)，其中角度取决于x值，如下所示：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"
// variables used to draw the hexagon stack
let R = 5;// the radius of the circumscribed circle
let h = R * Math.sin(Math.PI / 3);//half height of the hexagon
let offset = 1.5 * R;//used to offset every second row of hexagons
let W = 200,H=200;//svg's viewBox = "0 0 200 200"

//draw the hexagonal lattice
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)
}
}


 // a function used to draw the hexagom
 // the radius of the hexagon depends on the x value
 function hex(x,y) {
    // the radius of the drawn hexagon is in function of the x value
    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)
  }



// a function used to draw a new svg element
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>

更新

原帖作者评论道：

这正是我想要的，但我试图制作一个模式，以便我可以将其用作图像掩码的蒙版

后来又说：

基本上你所做的很好，但我需要使该模式在整个页面上重复出现，因为图像将具有100％的宽度和约800px的高度

在这种情况下，您可以将所有六边形放入组中，并使用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元素的宽度，它将占用所有可用的宽度，即100%。

- enxaneta

---

很棒的答案！但是作者写道：“它是垂直的，但我想要水平的”。 - Alexandr_TT

哈哈，非常感谢@Alexandr_TT!!! 修复很容易：我已经将 let angle = map(y, 0, H, 0, Math.PI); 更改为 let angle = map(x, 0, H, 0, Math.PI);。现在绘制的六边形半径是根据 x 值的函数。 - enxaneta

不，我不需要Photoshop，但是你所做的基本上可以，但我需要图案在整个页面上重复，因为图像将是100％宽度，大约800像素高。 - ONYX

好的，看起来好了，但是白色区域需要更多的六边形，因此聚集在该模式中的空间需要更大，我需要在白色空间中添加更多的六边形，你做了什么或更改了什么以使该模式跨越，你更改了哪些属性。 - ONYX

在这种情况下，您可能希望将函数hex()中使用的r值限制在最小值和最大值之间。 - enxaneta

Answer 2

^{使用的数值不是非常精确，我关注的是技术而不是计算。}

这里有一个结合了SVG和多重背景的想法。诀窍在于在每一行都有一个不同的SVG，每次增加描边并考虑一些径向背景。

我考虑了一些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;
}

- Temani Afif

Answer 3

根据enxaneta和您的评论提供答案。

对于重复，您可以更改乘以Math.Pi/3的次数：

let angle = map(x, 0, boxW, 0, repeats * Math.PI);

为了限制函数hex()中的r值，您可以设置一个minW变量并添加:

if (c <= minW && c > -minW) {
    r = R * minW;
  } else {
    r = R * c;
  }

为了获得十六进制最大值/间隔，您需要添加一个间距变量和冒号：

if (c <= minW && c > -minW) {
    r = R * minW - spacing;
  } else if (c < -minW) {
    r = R * c + spacing
  } else {
    r = R * c - spacing;
  }

你还可以控制十六进制之间的间距与R值成比例，为此我添加了一个spread变量，并将这些行更改为：

point.x = x + r * Math.sin(a * Math.PI / 3) / spread;
point.y = y + r * Math.cos(a * Math.PI / 3) / spread;

然后要使用该模式来制作掩码，我创建了一个类似于以下的函数：

function makeHexRow_pattern(){
  var patternH = 2*hexH+0.01; //*2 for 2 rows; +0.01 to avoid gab between pattern repeats
  hexPattern.setAttributeNS(null, "height", patternH); //set height of the pattern elmt
  var counter = 0;
  for (let y = 0; y < patternH; y += hexH) {
    let rowOffset = counter % 2 == 0 ? xOffset : 0;
    counter++
    for (let x = rowOffset; x < boxW; x += xOffset * 2) {
      let hexPoints = hex(x, y);
      drawSVGelmt( {points : hexPoint}, "polygon", hexagons);
    }
  }
}

我在开头添加了变量repeat、minW、spacing和spread，以便更容易地进行自定义。

codepen链接

- Salix

---

更新图片链接，之前是坏的。如果没有图片，则意味着它再次损坏，请在HTML中更改它。 - Salix