From ebba353609da2605691e185246e9358be3f6be90 Mon Sep 17 00:00:00 2001
From: Catalin Constantin Mititiuc <webdevcat@proton.me>
Date: Mon, 16 Jun 2025 22:41:27 -0700
Subject: [PATCH] Add points

---
 index.html | 43 ++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 42 insertions(+), 1 deletion(-)
diff --git a/index.html b/index.html
index beedf96..23174d2 100644
--- a/index.html
+++ b/index.html
@@ -4,6 +4,10 @@
       svg {
         background-color: darkgray;
       }
+
+      circle {
+        fill: red;
+      }
     </style>
   </head>
   <body>
@@ -17,9 +21,46 @@
         <pattern id="vert" href="#inch-mark" patternTransform="rotate(90)" />
       </defs>
       
-      <rect x="0" y="0" width="34in" height="22in" fill="Gainsboro" />
       <line x1="0" y1="0" x2="34in" y2="0" stroke="url(#inch-mark)" />
       <line x1="0" y1="0" x2="0" y2="22in" stroke="url(#vert)" />
+      <rect x="0" y="0" width="34in" height="22in" fill="Gainsboro" />
     </svg>
+
+    <script>
+      var svgns = "http://www.w3.org/2000/svg",
+          svg = document.querySelector('svg');
+      
+      var columnCount = 34,
+          rowCount = 25,
+          pointDistanceInInches = 1.015;
+
+      var isOdd = n => n % 2 === 1;
+
+      var columns = [...Array(columnCount).keys()],
+          rows = [...Array(rowCount).keys()],
+          columnCoords = columns.map(x => x * pointDistanceInInches),
+          rowCoords = rows.map(y => y * pointDistanceInInches),
+          pointCoords = rowCoords.map((y, index) => isOdd(index) ? columnCoords.slice(0, -1).map(x => [x, y]) : columnCoords.map(x => [x, y]));
+
+      var xOffset = yOffset = 0.25;
+
+      pointCoords.forEach((row, index) => row.forEach(([x, y]) => {
+        var circle = document.createElementNS(svgns, 'circle'),
+            calcY = Math.sqrt(3) * pointDistanceInInches / 2;
+
+        if (isOdd(index)) {
+          var alternatingOffset = pointDistanceInInches / 2;
+
+          circle.setAttributeNS(null, 'cx', `${x + xOffset + alternatingOffset}in`);
+          circle.setAttributeNS(null, 'cy', `${calcY * y + yOffset}in`);
+        } else {
+          circle.setAttributeNS(null, 'cx', `${x + xOffset}in`);
+          circle.setAttributeNS(null, 'cy', `${calcY * y + yOffset}in`);
+        }
+
+        circle.setAttributeNS(null, 'r', '0.1in');
+        svg.appendChild(circle);
+      }));
+    </script>
   </body>
 </html>
\ No newline at end of file
