schotter went smoothly

html/common.tsx

@@ -192,3 +192,5 @@ export const randirect = (...urls: string[]) =>
 // kinda bad name
 export const pick_random = <T,>(xs: T[]): T =>
     xs[Math.floor(Math.random() * xs.length)];
+
+export const jitter = (n: number) => n * (Math.random() - 0.5);

html/schotter.tsx

@@ -0,0 +1,51 @@
+import { Main, jitter, n_of, render_and_copy } from "./common.tsx";
+
+const Square = ({ row }: { row: number }) => (
+    <div
+        style={{
+            outline: "0.05rem solid black",
+            borderRadius: "0.05rem",
+            transform: `translateX(${jitter(row * 2)}px) translateY(${jitter(
+                row * 2
+            )}px) rotate(${jitter(row * 0.05)}rad)`,
+        }}
+    ></div>
+);
+
+render_and_copy(
+    <div
+        style={{
+            backgroundColor: "#E1DED9",
+            padding: "18%",
+            border: "1.5rem solid #0C0C0C",
+        }}
+    >
+        <Main
+            style={{
+                display: "grid",
+                gridTemplateColumns: "repeat(12, 1fr)",
+                width: "100%",
+                aspectRatio: "12 / 22",
+                gap: "-1px",
+            }}
+        >
+            {n_of(22, undefined).map((_, row) =>
+                n_of(12, <Square row={row} />)
+            )}
+        </Main>
+        <div
+            style={{
+                textAlign: "right",
+                marginTop: "1.5rem",
+                fontSize: "0.5rem",
+            }}
+        >
+            <a
+                href="https://collections.vam.ac.uk/item/O221321/schotter-print-nees-georg/"
+                style={{ textDecoration: "none" }}
+            >
+                COMPUTERGRAFIK MIT SIEMENS-SYSTEM 4004
+            </a>
+        </div>
+    </div>
+);