Remove lines, add polygons

html/images/space.svg

@@ -36,6 +36,13 @@
       stroke: limegreen;
       stroke-width: 0.5px;
     }
+
+    #lines polygon {
+      fill: white;
+      stroke: teal;
+      fill-opacity: 0.2;
+      stroke-width: 0.5px;
+    }
   </style>
 
   <rect id="bg" x="-200" y="-150" width="400" height="300"/>
@@ -113,14 +120,40 @@
 
     const lineContainer = document.querySelector('#lines');
 
-    points.forEach(([x, y]) => {
-      const el = document.createElementNS(namespaceURIsvg, 'line');
-      el.setAttribute('x1', x);
-      el.setAttribute('y1', y);
-      el.setAttribute('x2', x);
-      el.setAttribute('y2', y);
-      lineContainer.appendChild(el)
+    // points.forEach(([x, y]) => {
+    //   const el = document.createElementNS(namespaceURIsvg, 'line');
+    //   el.setAttribute('x1', x);
+    //   el.setAttribute('y1', y);
+    //   el.setAttribute('x2', x);
+    //   el.setAttribute('y2', y);
+    //   lineContainer.appendChild(el)
+    // });
+
+    const triangleContainer = document.querySelector('#lines');
+    const trianglePts = points.map((pt, i) => [pt, points[(i + 1) % points.length]]);
+
+    function drawTriangles(container, pts, [positionX, positionY]) {
+      pts.forEach(([[x1, y1], [x2, y2]]) => {
+        const el = document.createElementNS(namespaceURIsvg, 'polygon');
+        const attr = `${x1},${y1} ${x2},${y2} ${positionX},${positionY}`
+        el.setAttribute('points', attr);
+        container.appendChild(el)
       });
+    }
+
+    drawTriangles(triangleContainer, trianglePts, [0, 0]);
+    const triangles = triangleContainer.querySelectorAll('polygon');
+
+    function updateTriangles([positionX, positionY]) {
+      const delim = ' ';
+
+      triangles.forEach(triangle => {
+        const attr = triangle.getAttribute('points').split(delim)
+        attr.pop();
+        attr.push(`${positionX},${positionY}`);
+        triangle.setAttribute('points', attr.join(delim));
+      });
+    }
 
     const lines = lineContainer.querySelectorAll('line');
 
@@ -278,7 +311,8 @@
       let position = [positionX, positionY] = wrapPos(changeX + x, changeY + y);
 
       updateBullets(elapsed);
-      updateLines(position);
+      // updateLines(position);
+      updateTriangles(position);
 
       pt.x = positionX;
       pt.y = positionY;