Another good stopping point

components/canvas/canvas.tsx

@@ -0,0 +1,34 @@
+import styled from "styles"
+import { useRef } from "react"
+import useZoomEvents from "hooks/useZoomEvents"
+import useZoomPanEffect from "hooks/useZoomPanEffect"
+
+export default function Canvas() {
+  const rCanvas = useRef<SVGSVGElement>(null)
+  const rGroup = useRef<SVGGElement>(null)
+  const events = useZoomEvents(rCanvas)
+
+  useZoomPanEffect(rGroup)
+
+  return (
+    <MainSVG ref={rCanvas} {...events}>
+      <MainGroup ref={rGroup}>
+        <circle cx={100} cy={100} r={50} />
+        <circle cx={500} cy={500} r={200} />
+        <circle cx={200} cy={800} r={100} />
+      </MainGroup>
+    </MainSVG>
+  )
+}
+
+const MainSVG = styled("svg", {
+  position: "fixed",
+  top: 0,
+  left: 0,
+  width: "100%",
+  height: "100%",
+  touchAction: "none",
+  zIndex: 100,
+})
+
+const MainGroup = styled("g", {})