diff --git a/lib/pages/mandala-page.tsx b/lib/pages/mandala-page.tsx index 78f4e2f..383eb2c 100644 --- a/lib/pages/mandala-page.tsx +++ b/lib/pages/mandala-page.tsx @@ -240,6 +240,7 @@ export const MandalaPage: React.FC<{}> = () => { const [symbolCtx, setSymbolCtx] = useState(createSvgSymbolContext()); const [useTwoCircles, setUseTwoCircles] = useState(false); const [invertCircle2, setInvertCircle2] = useState(true); + const [firstBehindSecond, setFirstBehindSecond] = useState(false); const randomize = () => { const rng = new Random(Date.now()); setCircle1({ ...circle1, ...getRandomCircleParams(rng) }); @@ -248,6 +249,19 @@ export const MandalaPage: React.FC<{}> = () => { const circle2SymbolCtx = invertCircle2 ? swapColors(symbolCtx) : symbolCtx; + const circles = [ + , + ]; + + if (useTwoCircles) { + circles.push( + + ); + if (firstBehindSecond) { + circles.reverse(); + } + } + return ( <>

Mandala!

@@ -281,6 +295,11 @@ export const MandalaPage: React.FC<{}> = () => { label="Invert colors" value={invertCircle2} onChange={setInvertCircle2} + />{" "} + )} @@ -292,12 +311,7 @@ export const MandalaPage: React.FC<{}> = () => { - - - {useTwoCircles && ( - - )} - + {circles}