1 files changed, 102 insertions, 8 deletions
diff --git a/html/simple-shape/index.html b/html/simple-shape/index.html
index 034ff3b..10319a6 100644
--- a/html/simple-shape/index.html
+++ b/html/simple-shape/index.html
@@ -199,6 +199,95 @@
                     // Diagonal lines
                     shapes.line(x, y, x + size, y + size);
                     shapes.line(x + size, y, x, y + size);
+                },
+
+                // Nested arcs
+                (x, y, size) => {
+                    const center = size/2;
+                    for(let i = 1; i <= 4; i++) {
+                        const radius = (size/2) * (i/4);
+                        ctx.beginPath();
+                        ctx.arc(x + center, y + center, radius, 0, Math.PI);
+                        ctx.stroke();
+                    }
+                },
+
+                // Quarter circles in corners
+                (x, y, size) => {
+                    const radius = size/2;
+                    // Top left
+                    ctx.beginPath();
+                    ctx.arc(x, y, radius, 0, Math.PI/2);
+                    ctx.stroke();
+                    // Top right
+                    ctx.beginPath();
+                    ctx.arc(x + size, y, radius, Math.PI/2, Math.PI);
+                    ctx.stroke();
+                    // Bottom right
+                    ctx.beginPath();
+                    ctx.arc(x + size, y + size, radius, Math.PI, Math.PI * 3/2);
+                    ctx.stroke();
+                    // Bottom left
+                    ctx.beginPath();
+                    ctx.arc(x, y + size, radius, Math.PI * 3/2, Math.PI * 2);
+                    ctx.stroke();
+                },
+
+                // Concentric circles
+                (x, y, size) => {
+                    const center = size/2;
+                    for(let i = 1; i <= 3; i++) {
+                        shapes.circle(
+                            x + center,
+                            y + center,
+                            size,
+                            {radius: (size/2) * (i/3)}
+                        );
+                    }
+                },
+
+                // Nested diamonds
+                (x, y, size) => {
+                    const center = size/2;
+                    for(let i = 1; i <= 3; i++) {
+                        const offset = (size/2) * (i/3);
+                        ctx.beginPath();
+                        ctx.moveTo(x + center, y + center - offset);
+                        ctx.lineTo(x + center + offset, y + center);
+                        ctx.lineTo(x + center, y + center + offset);
+                        ctx.lineTo(x + center - offset, y + center);
+                        ctx.closePath();
+                        ctx.stroke();
+                    }
+                },
+
+                // Radiating arcs
+                (x, y, size) => {
+                    const center = size/2;
+                    const radius = size/3;
+                    for(let i = 0; i < 4; i++) {
+                        const startAngle = (Math.PI/2) * i;
+                        ctx.beginPath();
+                        ctx.arc(x + center, y + center, radius, startAngle, startAngle + Math.PI/2);
+                        ctx.stroke();
+                    }
+                },
+
+                // Stacked semicircles
+                (x, y, size) => {
+                    const width = size * 0.8;
+                    for(let i = 0; i < 3; i++) {
+                        ctx.beginPath();
+                        ctx.arc(
+                            x + size/2,
+                            y + (size/3) * (i + 1),
+                            width/2,
+                            0,
+                            Math.PI,
+                            i % 2 === 0
+                        );
+                        ctx.stroke();
+                    }
                 }
             ];
 
@@ -228,9 +317,14 @@
 
         // Function to draw a row of patterns
         const drawPatternRow = (xOffset, y, size) => {
+            const gutter = size * 0.1; // 10% of pattern size for gutter
+            const patternWithGutter = size * 0.8; // 80% of space for actual pattern
+            
             const shuffledPatterns = shuffle(patterns);
             for(let i = 0; i < 5; i++) {
-                shuffledPatterns[i](xOffset + i * size, y, size);
+                const xPos = xOffset + i * size + gutter;
+                const yPos = y + gutter;
+                shuffledPatterns[i](xPos, yPos, patternWithGutter);
             }
         };
 
@@ -243,7 +337,7 @@
             
             const patternSize = 400;
             const numRows = 4;
-            const pageMargin = 300; // Margin around the entire pattern block
+            const pageMargin = 300;
             
             // Calculate available space after margins
             const availableHeight = canvas.height - (pageMargin * 2);
@@ -251,16 +345,16 @@
             // Calculate row spacing with increased gaps
             const totalPatternHeight = numRows * patternSize;
             const totalGapHeight = availableHeight - totalPatternHeight;
-            const rowGap = totalGapHeight / (numRows - 1); // Only count gaps between rows
+            const rowGap = totalGapHeight / (numRows - 1);
             
-            // Calculate starting Y position to center the entire block
-            const startY = pageMargin;
+            // Calculate horizontal centering
+            const totalWidth = patternSize * 5;
+            const xOffset = (canvas.width - totalWidth) / 2;
             
             // Draw each row
             for(let i = 0; i < numRows; i++) {
-                const y = startY + i * (patternSize + rowGap);
-                // Add horizontal margin to center patterns
-                drawPatternRow(0, y, patternSize);
+                const y = pageMargin + i * (patternSize + rowGap);
+                drawPatternRow(xOffset, y, patternSize);
             }
         };