\n \n

\n {children}\n

\n );\n};\n\n// Demo component to show the card in action with controls\nfunction App() {\n // State for card properties\n const [minThickness, setMinThickness] = useState(2.0);\n const [maxThickness, setMaxThickness] = useState(3.5);\n const [numberOfWaves, setNumberOfWaves] = useState(8);\n const [regenerateKey, setRegenerateKey] = useState(0);\n \n // Force regeneration when any parameter changes\n useEffect(() => {\n setRegenerateKey(prev => prev + 1);\n }, [minThickness, maxThickness, numberOfWaves]);\n \n // Custom styled slider component\n const Slider = ({ label, value, min, max, step, onChange }) => (\n

\n {label}\n {typeof value === 'number' ? value.toFixed(1) : value}\n

\n onChange(parseFloat(e.target.value))}\n style={{ width: '100%' }}\n />\n

\n );\n \n return (\n

Marker Pen Card Demo

\n \n

Marker Pen

\n Varying thickness with smooth transitions\n

\n \n

Card Controls

\n \n \n \n \n \n \n

\n \n

\n \n View on Val Town\n \n

\n );\n}\n\n// Export the MarkerPenCard component for use in other files\nexport { MarkerPenCard };\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 Marker Pen Card\n \n \n \n

\n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n }\n );\n}","deleted","label",[110],"9421754c-2783-11f0-b46e-569c3dd06744","README.md","942175d8-2783-11f0-b46e-569c3dd06744",["D",1743216730267],0,"# Marker Pen Card Component\n\nThis is a hand-drawn card component using SVG with variable thickness borders to create a marker pen style.\n\n## Features\n\n- Hand-drawn marker pen appearance with varying stroke thickness\n- Natural sine wave border variation for organic feel\n- Customizable dimensions, colors, and corner radius\n- Interactive with onClick support\n- Renders any React children inside the card\n- Mobile-friendly and responsive\n\n## Usage\n\n```jsx\nimport { MarkerPenCard } from 'https://esm.town/v/dcm31/markerPenCard';\n\nfunction MyComponent() {\n return (\n console.log('Card clicked!')}\n >\n

Card Title

Card content goes here

\n \n \n );\n}\n```\n\n## Props\n\n- `width` (number): Card width in pixels (default: 300)\n- `height` (number): Card height in pixels (default: 200)\n- `cornerRadius` (number): Radius of card corners (default: 30)\n- `strokeColor` (string): Color of the card outline (default: \"#333\")\n- `backgroundColor` (string): Color of the card background (default: \"white\")\n- `onClick` (function): Click handler for the card (default: empty function)\n- `children`: React nodes to render inside the card\n\n## How it works\n\nThe card uses SVG path manipulation to create a natural marker pen look:\n\n1. Calculates inner and outer points around the card perimeter\n2. Varies the thickness based on a sine wave pattern\n3. Adds subtle random variations for natural look\n4. Connects the points to create a complete border path\n5. Renders both background and border for the complete card effect\n6. Places children content in an absolutely positioned container\n\nThe rendering refreshes whenever any of the dimension or style props change, and the \"Generate Variation\" button creates a new random variation of the card.",[125],"pulls","branches","forks","envVars",{"_138":128,"_140":128},"connections",{"_138":128,"_139":128},"count","unfilledCount","emptyCount",{"_18":124,"_20":125,"_111":126,"_112":-5,"_113":67,"_114":40,"_115":26,"_22":147,"_64":128,"_117":96,"_119":129,"_121":63,"_122":-5,"_144":148,"_85":149},{"_18":109,"_20":110,"_111":35,"_112":-5,"_113":67,"_114":65,"_115":26,"_22":143,"_64":40,"_117":118,"_119":120,"_121":63,"_122":-5,"_144":145,"_85":146},["D",1743217178965],"children",[],[110],["D",1743216730267],[],[125],["D",1746210652755],{"_16":17,"_83":79},{"_16":17,"_76":77,"_78":79,"_32":33,"_80":81,"_82":63},{"_64":65,"_20":66,"_18":67,"_68":19,"_69":-5,"_70":-5,"_71":-5,"_72":-5,"_73":-5,"_74":21,"_75":17},"ctx",{"_56":-5,"_104":187,"_188":189,"_190":191,"_192":63,"_193":63,"_194":63,"_195":26,"_196":-5,"_197":-7,"_198":-7,"_199":128,"_200":63,"_201":63,"_202":-5,"_203":63,"_204":63,"_205":63,"_206":-5},"ENV",{"_158":159,"_160":161,"_162":66,"_163":164,"_165":166,"_167":168,"_169":170,"_171":172,"_173":174,"_175":176,"_177":178,"_179":180,"_181":182,"_183":184,"_185":186},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Search