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> );