SVG tiling

index.haml

%html
  %head
  %body
    .canvas-container
      %svg.canvas{width: '100%', height: '86.5%', viewbox: '0 0 100 100', preserveAspectRatio: 'midxMidY slice', xmlns: "http://www.w3.org/2000/svg"}

script.js

var SVGGridFill = function(canvas) {
  this.canvas = canvas;
  
  this.gridCountX = 20;
  this.gridCountY = 10;
  this.tessellationMode = 'triangle-grid';
  this.shapeRatio = 0.865; //Triangle aspect,
  this.gridWidth = Math.round((100/this.gridCountX), 2);
  this.gridHeight = Math.round(this.gridWidth * this.shapeRatio, 2);
     
  this.toPath = SVGPoints.toPath;
  this.toPoints = SVGPoints.toPoints;
  this.offset = Points.offset;
  this.rotate = Points.rotate;
  
  // Build the first triangle to copy
  // An up-pointing equilateral triangle
  this.unit = this.toPoints(
    this.shape([
      [(this.gridWidth / 2), 0],
      [this.gridWidth, this.gridHeight],
      [0, this.gridHeight],    
    ])
  );
};

SVGGridFill.prototype = {
  init: function(){    
     var hOffset = 0,
         vOffset = 0;
    
    for (var y=0;y<this.gridCountY;y++) {
      hOffset = y % 2 == 0 ? 0 : -(this.gridWidth / 2);
      
      for (var x=0;x<this.gridCountX;x++) {
        hOffset += (this.gridWidth / 2);
            
        let newShape = this.offset(this.unit, hOffset, vOffset);
        
        if (x % 2 == 0) {
          newShape = this.rotate(newShape, 180);
        }
       
        this.draw(newShape);
      }
     
      vOffset += this.gridHeight;
    }
  },
  shape: function(points) {
    return {
      type: 'polygon',
      points: points.map(pair=> pair.join(',')).join(' ')
    };
  },
  draw: function(shape) {    
    this.canvas.append('<path style="fill: red" d="' + this.toPath(shape) + '"/>'  )
  }
}

$(function(){
  var grid = new SVGGridFill($('svg.canvas'));
  grid.init();
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://unpkg.com/points/dist/points.js"></script>
<script src="https://unpkg.com/svg-points/dist/svg-points.min.js"></script>

style.sass

html,
body
  height: 100%

.canvas-container
  display: block
  width: 100%
  height: 100%
  
svg.canvas
  display: block
  border: 1px solid red

  path
    fill: red
    stroke: blue
    stroke-width: 2px

svg-tiling.markdown

SVG tiling

A Pen by Ben on CodePen.

License.