Hexagram (Inner Lines) by jonsadka

index.html

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    .parent-container {
      position: relative;
    }
    
    .pattern-container {
      position: absolute;
      width: 100%;
      height: 500px;      
    }

    .pattern {
      fill: none;
      stroke: #182F79;      
    }   
  </style>
</head>

<body>
  <div class="parent-container">
    <div class="pattern-container">
      <svg width="100%" height="100%">
        <defs>
          <pattern id="Pattern" x="0" y="0" width="40", height="40" patternUnits="userSpaceOnUse">
            <path class="pattern point-up" d="M0 10,20 40,40 10Z" />
            <path class="pattern point-down" d="M0 30,20 0,40 30Z"/>
          </pattern>
        </defs>

        <rect fill="url(#Pattern)" width="100%" height="100%"/>
      </svg>
    </div>
  </div>
</body>