website

commit 6521ea4eec9a2b86018dad5e11f3baf3f67bba08
parent 2334d6782239763eee94cc35f3b7c6c77cb6ca2d
Author: hrryt <harry@mayesfield.uk>
Date:   Fri, 14 Aug 2026 14:59:49 +0100

Add arbitrary concentric angle arcs

Diffstat:
M
src/components/graphing/Angle.jsx
 | 
7
++++---
M
src/pages/Home.jsx
 | 
2
+-

2 files changed, 5 insertions(+), 4 deletions(-)
diff --git a/src/components/graphing/Angle.jsx b/src/components/graphing/Angle.jsx
@@ -17,11 +17,12 @@ function AngleLabel({ points, radius, colour, children }) {
   return <Label point={point} colour={colour}>{children}</Label>;
 }
 
-export default function Angle({ points, radius = 0.5, double = false, label = null, colour = "auto" }) {
+export default function Angle({ points, radius = 0.5, arcs = 1, label = null, colour = "auto" }) {
   return (
     <g>
-      <AngleArc points={points} radius={radius} colour={colour} />
-      {double && <AngleArc points={points} radius={1.2*radius} colour={colour} />}
+      {Array.from({ length: arcs }).map(
+        (_, i) => <AngleArc points={points} radius={(1 + .2*i) * radius} colour={colour} />
+      )}
       {label && <AngleLabel points={points} radius={radius} colour={colour}>{label}</AngleLabel>}
     </g>
   );
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
@@ -18,7 +18,7 @@ export default function Home() {
           <Graph viewBox={viewBox}>
             <Quadratic a={2} b={1} c={-3} colour="1" viewBox={viewBox} />
             <Polygon points={[[1,2], [-1,1], [-4,3]]} label="P" colour="2" />
-            <Angle points={[[-4,3], [1,2], [-1,1]]} double={true} colour="2" />
+            <Angle points={[[-4,3], [1,2], [-1,1]]} arcs={3} colour="2" />
             <Cubic a={1} b={-3} c={3} d={-1} colour="3" viewBox={viewBox} />
             <Line line={{a: -10, b: -9, c: -1}} colour="5" viewBox={viewBox} />
             <Segment points={[[0,1], [2,2]]} marker="double-feather" />