svg повернуть шестиугольник шаблон - шестигранная точка наверх

Question

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

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 = 9;
//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, 5*Math.PI);
    let c = Math.sin(angle);
    let r = R * .99;
    
    //let r = R * Math.sin(angle)
   
    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;
}

html, body {
  height: 100%;
  margin: 0;
  background: #e20341;
}

svg { 
  
}

polygon {
  fill: white;
  stroke: black;
  stroke-width: 1px;
}

    <svg viewBox="0 0 500 280" width="100%"> 

      <defs>
        <pattern id="hexagons" width="100%" height="100%" >
          <g id="svg" fill="black" x="0" y="0"></g>    
        </pattern>
        <mask id="hexagon-halftone-mask">  
         <rect x="0" y="0" width="100%" height="100%" fill="url(#hexagons)"  />

       </mask>
      </defs>

      <image width="100%" xlink:href="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426_960_720.jpg" mask="url(#hexagon-halftone-mask)"/> 
    </svg>

Answer 1

Вот новый код с комментариями:

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 = 9;
/* switch offset and h*/
var offset = R * Math.sin(Math.PI / 3); 
var h = 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+=offset*2){ /*offset*2 instead of 3*R*/
  hex(x,y)
}
}

 function hex(x,y) {
    let angle = map(x, 0, W, 0, 5*Math.PI);
    let c = Math.sin(angle);
    let r = R * .99;
    
   
    let points = ""
    for (var a = 0; a < 6; a++) {
      let o = {}
      o.x = x + r * Math.sin(a * Math.PI / 3); /* sin instead of cos */
      o.y = y + r * Math.cos(a * Math.PI / 3); /* cos instead of sin */
      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;
}

html, body {
  height: 100%;
  margin: 0;
  background: #e20341;
}

svg { 
  
}

polygon {
  fill: white;
  stroke: black;
  stroke-width: 1px;
}

    <svg viewBox="0 0 500 280" width="100%"> 

      <defs>
        <pattern id="hexagons" width="100%" height="100%" >
          <g id="svg" fill="black" x="0" y="0"></g>    
        </pattern>
        <mask id="hexagon-halftone-mask">  
         <rect x="0" y="0" width="100%" height="100%" fill="url(#hexagons)"  />

       </mask>
      </defs>

      <image width="100%" xlink:href="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426_960_720.jpg" mask="url(#hexagon-halftone-mask)"/> 
    </svg>