title: svg hexagon halftone pattern
body: <p>I've been searching google but there is no answers or articles to this question. I want to create a grid of hexagons but I need it in a halftone pattern, so I might need more than one hexagon in the pattern. Below is the code that generates a pattern of hexagons but not in halftone pattern. I need the halftone pattern to go horizontally. I have this <a href="https://stock.adobe.com/nz/images/honeycomb-halftone-vector-abstract-background-halftone-effect-repeating-background-texture/152449673" rel="nofollow noreferrer">link</a> of the halftone pattern from adobe but the grid is too small and it goes vertically but I want it horizontally. Here is a link of the grid of hexagons I made on <a href="https://codepen.io/kirkdm/pen/orEYZr?editors=0110" rel="nofollow noreferrer">codepen</a>. Could someone show me to make a pattern of hexagons go horizontally in a halftone pattern, please?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%"&gt;
           &lt;defs&gt;
              &lt;pattern id="hexagons" width="50" height="43.4" 
              patternUnits="userSpaceOnUse" 
              patternTransform="scale(2)"&gt;
                  &lt;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" /&gt;
                  &lt;use xlink:href="#hex" x="25" /&gt;
                  &lt;use xlink:href="#hex" x="-25" /&gt;
                  &lt;use xlink:href="#hex" x="12.5" y="-21.7" /&gt;
                  &lt;use xlink:href="#hex" x="-12.5" y="-21.7" /&gt;
              &lt;/pattern&gt;
           &lt;/defs&gt;
          &lt;rect width="100%" height="100%" fill="url(#hexagons)" /&gt;
      &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>