更新

Question

我一直在搜索google，但没有关于此问题的答案或文章。我想创建一个六边形网格，但我需要半色调图案，因此在该图案中可能需要多个六角形。下面的代码生成六边形的图案，但不是半色调图案。我需要半色调图案才能水平移动。我有link的来自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>

Answer 1

由于六边形的半径是x的变量，因此您不能在此处使用图案。主要思想是：

svg背景为白色；
六边形具有fill:black;
为了绘制六边形，需要计算外接圆的中心。您可以使用外接圆R的半径值进行操作。这将生成一个六角形的晶格。
在六边形格子内，您需要更改y函数的六边形的外接圆的半径，如下所示：let r = R * Math.sin(angle)其中，角度是x值的函数，并且计算如下：{ {1}}这意味着let angle = map(x, 0, H, 0, Math.PI);的取值介于0到200（x）之间，并且角度的取值介于o和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}

更新

OP正在评论：

那是我想要的，但是我正在尝试制作图案，以便可以使用该图案作为图像的蒙版

和后者：

基本上，您制作的作品行得通，但我需要在页面上重复该图案，因为图片的宽度为100％，高度为800px

在这种情况下，您可以将所有六边形放入一个组中，并使用<svg id="svg" viewBox = "0 0 200 200" > </svg>像这样裁剪该组：

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元素的宽度，则会占用所有可用宽度，即100％。

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;
}

Answer 3

根据enxaneta的评论和您的评论。

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

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

要限制函数hex（）中的r值，可以设置一个minW var并添加：

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

要获取十六进制之间的最大值/间距，请添加一个var和：

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

您还可以控制十六进制之间的间距以根据R值缩放，为此，我添加了一个扩展var并将这些行更改为：

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);
    }
  }
}

我在开始时就添加了vars重复，minW，间距和散布，以便于自定义。

codepen link

svg六角半色调图案

3 个答案:

更新