From 3eb2bb0491f3b4f285bb180c1d037b9626480de3 Mon Sep 17 00:00:00 2001 From: Peter Edmond Date: Thu, 15 May 2025 20:49:15 +0100 Subject: [PATCH] Made background transparent for single triangles --- IndexUsingJS.html | 14 ++++++++++++-- savesvg.js | 25 ++++++++++++++++++++++++- 2 files changed, 36 insertions(+), 3 deletions(-) diff --git a/IndexUsingJS.html b/IndexUsingJS.html index a23b07e..a9a80d1 100644 --- a/IndexUsingJS.html +++ b/IndexUsingJS.html @@ -51,13 +51,23 @@ } - diff --git a/savesvg.js b/savesvg.js index 14d17e4..c2c85c6 100644 --- a/savesvg.js +++ b/savesvg.js @@ -25,8 +25,31 @@ function doBigWhiteTriangle(id){ svg.appendChild(triangle); } -function doLittleWhiteTriangle(){ +function doLittleWhiteTriangle(id){ + const svg = document.getElementById(id); + // Triangle settings + const sideLength = 369; + const centerX = 250; + const centerY = 350; + const angleOffset = -90 * (Math.PI / 180); // Start at top + + // Generate 3 equilateral triangle points + const points = []; + for (let i = 0; i < 3; i++) { + const angle = angleOffset + i * (2 * Math.PI / 3); // 120° steps + const x = centerX + (sideLength / Math.sqrt(3)) * Math.cos(angle); + const y = centerY + (sideLength / Math.sqrt(3)) * Math.sin(angle); + points.push(`${x},${y}`); + } + + // Create the triangle + const triangle = document.createElementNS("http://www.w3.org/2000/svg", "polygon"); + triangle.setAttribute("points", points.join(" ")); + triangle.setAttribute("fill", "white"); + //triangle.setAttribute("stroke", "black"); // Optional + //triangle.setAttribute("stroke-width", "2"); // Optional + svg.appendChild(triangle); }