\n Hand-Drawn Font and Card Showcase\n

\n\n

\n This page is made of card elements that are made to look hand-made as well as two fonts made from my handwriting.\n

\n\n

\n {fonts.map((font, index) => (\n

\n {font.name} Showcase\n

\n Regular text (1rem)\n

\n Larger text (1.5rem)\n

\n Even larger (2rem)\n

\n Attempted bold (1rem)\n

\n Attempted italic (1rem)\n

\n {index === 1 && (\n

\n The quick brown fox jumps over the lazy dog. 1234567890!@#$%^&*()\n

\n )}\n

\n ))}\n

\n\n

\n {cardConfigs.map((config, index) => {\n const CardComponent = config.type === \"Ballpoint\" ? BallpointPenCard : MarkerPenCard;\n const font = fonts[index % 2].name;\n return (\n \n

\n {config.type} Card\n

\n {config.type === \"Ballpoint\" ? \"Fine lines with subtle variations\" : \"Varying thickness with smooth transitions\"}\n

\n Size: {config.width}x{config.height}\n

\n {config.type === \"Ballpoint\" \n ? `Stroke: ${config.strokeWidth}, Waviness: ${config.waviness}`\n : `Thickness: ${config.minThickness}-${config.maxThickness}, Waves: ${config.waves}`\n }\n

\n \n );\n })}\n

\n\n

\n Created with\n \n BallpointPenCard\n \n and\n \n MarkerPenCard\n \n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nexport default async function server(request) {\n return new Response(\n `\n \n \n \n \n Hand-Drawn Font and Card Showcase\n \n \n \n

\n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n}","deleted","label",[98],"permalink","https://www.val.town/x/dcm31/superCopperBison/code/main.tsx","extension","actionData","errors"]