Init

src/components/Circle.astro

@@ -0,0 +1,13 @@
+---
+import CircleState from '../models/CircleState';
+export interface Props {
+  id?: string
+  circle: CircleState,
+}
+
+const {id, circle} = Astro.props
+---
+
+<circle id={id ?? ""} cx={circle.point.x} cy={circle.point.y} r={circle.radius ?? 2} fill={circle.fill ?? "none"} stroke={circle.stroke ?? "black"}>
+    <slot/>
+</circle>

src/components/Line.astro

@@ -0,0 +1,14 @@
+---
+import LineState from '../models/LineState';
+export interface Props {
+  line: LineState;
+  stroke?: number;
+}
+
+const {line, stroke} = Astro.props;
+---
+
+<line x1={line.a.x} y1={line.a.y}
+      x2={line.b.x} y2={line.b.y}
+      stroke={stroke ?? 'black'}
+/>