[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_176":177,"_178":179},"routes/_app.x.$handle.$name",{"_101":100,"_32":49,"_109":88,"_27":110,"_13":14,"_111":-5,"_11":112,"_113":114,"_115":116,"_117":118,"_119":120,"_21":-5,"_121":122,"_123":124,"_125":25,"_126":127,"_128":53,"_129":-5,"_130":-5,"_131":132},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_47":48,"_32":49,"_36":50,"_51":-5,"_52":53,"_54":55,"_56":55,"_57":-5,"_58":-5,"_18":59,"_60":43,"_61":53,"_62":-5,"_63":-5,"_64":65,"_66":67,"_68":-5,"_69":-5,"_70":-5,"_71":-5,"_72":73,"_74":73,"_75":76,"_77":76,"_78":76,"_79":73,"_80":73,"_81":82,"_83":84,"_85":86,"_87":25},"version",1,"changes",[19,20],"aiChatInfo","userId",{"_21":41,"_23":-7,"_24":25,"_26":25,"_27":42,"_29":42},{"_21":22,"_23":-7,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":21,"_34":35,"_36":37,"_38":14,"_39":40,"_24":25},"previous","deleted",false,"deletedHere","path","README.md","latestPath","fileId","6207f7ba-2793-11f0-9d52-569c3dd06744","name","fileType","content","# 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.","createdAt",["D",1743453229471],"branchVersion","branchId","6203e562-2793-11f0-9d52-569c3dd06744",{"_30":43,"_32":42,"_33":44,"_34":45,"_36":46,"_38":14,"_39":40,"_24":25},"main.tsx","6207d032-2793-11f0-9d52-569c3dd06744","http","/** @jsxImportSource https://esm.sh/react */\nimport React, { useEffect, useRef, useState } from \"https://esm.sh/react\";\nimport { createRoot } from \"https://esm.sh/react-dom/client\";\n\nconst MarkerPenCard = ({ \n width = 300, \n height = 200, \n cornerRadius = 30,\n strokeColor = \"#333\",\n backgroundColor = \"white\",\n numberOfWaves = 8,\n minThickness = 2.0,\n maxThickness = 3.5,\n onClick = () => {},\n children\n}) => {\n const cardRef = useRef(null);\n const [regenerateKey, setRegenerateKey] = useState(0);\n \n // Function to regenerate the card\n const regenerate = () => {\n setRegenerateKey(prev => prev + 1);\n };\n \n useEffect(() => {\n if (cardRef.current) {\n const svg = cardRef.current;\n \n // Clear any existing content\n while (svg.firstChild) {\n svg.removeChild(svg.firstChild);\n }\n \n // Create a group for the card\n const cardGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g');\n \n // Get total perimeter distance for sine wave calculation\n const straightEdgesLength = 2 * (width + height - 4 * cornerRadius);\n const cornersLength = 2 * Math.PI * cornerRadius; // 4 quarter circles\n const totalPerimeter = straightEdgesLength + cornersLength;\n \n // Sine wave parameters\n const baseThickness = (minThickness + maxThickness) / 2;\n const thicknessAmplitude = (maxThickness - minThickness) / 2;\n \n // Function to get thickness at a specific distance along the perimeter\n const getThicknessAtDistance = (distance) => {\n // Calculate position in sine wave (0 to 2π * number of waves)\n const position = (distance / totalPerimeter) * Math.PI * 2 * numberOfWaves;\n \n // Add a phase shift to ensure smoother transitions at corners\n const phaseShift = Math.PI / 4; // 45 degree phase shift\n \n // Basic sine wave thickness with phase shift\n let thickness = baseThickness + Math.sin(position + phaseShift) * thicknessAmplitude;\n \n // Add small random variation to make it more natural\n thickness += (Math.random() - 0.5) * 0.3;\n \n return thickness;\n };\n \n // Generate points along the perimeter for a variable width stroke\n const generatePerimeterPoints = () => {\n // Parameters for path generation\n const segments = 100; // Higher number = smoother\n const segmentLength = totalPerimeter / segments;\n let currentDistance = 0;\n \n // Arrays to store the inner and outer points of the border\n const innerPoints = [];\n const outerPoints = [];\n \n // Function to add points with normal offset\n const addPointWithOffset = (x, y, normalX, normalY, distance) => {\n const thickness = getThicknessAtDistance(distance);\n \n // Add points for inner and outer edges\n innerPoints.push({\n x: x - normalX * thickness,\n y: y - normalY * thickness\n });\n \n outerPoints.push({\n x: x + normalX * thickness,\n y: y + normalY * thickness\n });\n };\n \n // Top edge\n for (let i = 0; i <= segments / 4; i++) {\n const t = i / (segments / 4);\n const x = cornerRadius + t * (width - 2 * cornerRadius);\n const y = 0;\n // Normal points upward\n addPointWithOffset(x, y, 0, -1, currentDistance);\n currentDistance += segmentLength;\n }\n \n // Top-right corner (quadrant)\n for (let i = 1; i <= segments / 8; i++) {\n const t = i / (segments / 8);\n const angle = -Math.PI/2 + t * (Math.PI/2);\n const x = width - cornerRadius + Math.cos(angle) * cornerRadius;\n const y = cornerRadius + Math.sin(angle) * cornerRadius;\n // Normal points in angle direction\n addPointWithOffset(x, y, Math.cos(angle), Math.sin(angle), currentDistance);\n currentDistance += segmentLength;\n }\n \n // Right edge\n for (let i = 1; i <= segments / 4; i++) {\n const t = i / (segments / 4);\n const x = width;\n const y = cornerRadius + t * (height - 2 * cornerRadius);\n // Normal points right\n addPointWithOffset(x, y, 1, 0, currentDistance);\n currentDistance += segmentLength;\n }\n \n // Bottom-right corner\n for (let i = 1; i <= segments / 8; i++) {\n const t = i / (segments / 8);\n const angle = 0 + t * (Math.PI/2);\n const x = width - cornerRadius + Math.cos(angle) * cornerRadius;\n const y = height - cornerRadius + Math.sin(angle) * cornerRadius;\n // Normal points in angle direction\n addPointWithOffset(x, y, Math.cos(angle), Math.sin(angle), currentDistance);\n currentDistance += segmentLength;\n }\n \n // Bottom edge\n for (let i = 1; i <= segments / 4; i++) {\n const t = i / (segments / 4);\n const x = width - cornerRadius - t * (width - 2 * cornerRadius);\n const y = height;\n // Normal points down\n addPointWithOffset(x, y, 0, 1, currentDistance);\n currentDistance += segmentLength;\n }\n \n // Bottom-left corner\n for (let i = 1; i <= segments / 8; i++) {\n const t = i / (segments / 8);\n const angle = Math.PI/2 + t * (Math.PI/2);\n const x = cornerRadius + Math.cos(angle) * cornerRadius;\n const y = height - cornerRadius + Math.sin(angle) * cornerRadius;\n // Normal points in angle direction\n addPointWithOffset(x, y, Math.cos(angle), Math.sin(angle), currentDistance);\n currentDistance += segmentLength;\n }\n \n // Left edge\n for (let i = 1; i <= segments / 4; i++) {\n const t = i / (segments / 4);\n const y = height - cornerRadius - t * (height - 2 * cornerRadius);\n const x = 0;\n // Normal points left\n addPointWithOffset(x, y, -1, 0, currentDistance);\n currentDistance += segmentLength;\n }\n \n // Top-left corner\n for (let i = 1; i <= segments / 8; i++) {\n const t = i / (segments / 8);\n const angle = Math.PI + t * (Math.PI/2);\n const x = cornerRadius + Math.cos(angle) * cornerRadius;\n const y = cornerRadius + Math.sin(angle) * cornerRadius;\n // Normal points in angle direction\n addPointWithOffset(x, y, Math.cos(angle), Math.sin(angle), currentDistance);\n currentDistance += segmentLength;\n }\n \n // Make sure we close the loop\n innerPoints.push(innerPoints[0]);\n outerPoints.push(outerPoints[0]);\n \n return { innerPoints, outerPoints };\n };\n \n // Generate the inner and outer points\n const { innerPoints, outerPoints } = generatePerimeterPoints();\n \n // Special cleanup to ensure smooth transitions between start and end\n // This ensures perfect closure with no thickness jump\n const smoothJoin = (points, startIdx = 0, endIdx = points.length - 1, smoothFactor = 0.9) => {\n const start = points[startIdx];\n const end = points[endIdx];\n \n // Calculate midpoint between start and end\n const midX = (start.x + end.x) / 2;\n const midY = (start.y + end.y) / 2;\n \n // Gradually adjust the points near the join to converge\n const adjustRange = 5; // Number of points to adjust on each side\n \n for (let i = 0; i < adjustRange; i++) {\n // Calculate blend factor (0 at center, 1 at edges)\n const factor = (i / adjustRange) * smoothFactor;\n \n // Adjust points near start\n if (startIdx + i < points.length) {\n points[startIdx + i].x = points[startIdx + i].x * (1 - factor) + midX * factor;\n points[startIdx + i].y = points[startIdx + i].y * (1 - factor) + midY * factor;\n }\n \n // Adjust points near end\n if (endIdx - i >= 0 && endIdx - i < points.length) {\n points[endIdx - i].x = points[endIdx - i].x * (1 - factor) + midX * factor;\n points[endIdx - i].y = points[endIdx - i].y * (1 - factor) + midY * factor;\n }\n }\n \n return points;\n };\n \n // Apply smooth join to ensure perfect closure\n smoothJoin(innerPoints);\n smoothJoin(outerPoints);\n \n // Create a filled path between inner and outer paths for the actual border\n const borderPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');\n \n // Start with outer path (in order), then inner path (in reverse)\n let borderPathData = 'M ' + outerPoints[0].x + ',' + outerPoints[0].y;\n \n // Add outer path points\n for (let i = 1; i < outerPoints.length; i++) {\n borderPathData += ' L ' + outerPoints[i].x + ',' + outerPoints[i].y;\n }\n \n // Add inner path in reverse order\n for (let i = innerPoints.length - 1; i >= 0; i--) {\n borderPathData += ' L ' + innerPoints[i].x + ',' + innerPoints[i].y;\n }\n \n borderPathData += ' Z';\n \n borderPath.setAttribute('d', borderPathData);\n borderPath.setAttribute('fill', strokeColor);\n \n // Create the white background (slightly smaller to fit inside the border)\n const backgroundRadius = cornerRadius - baseThickness;\n const backgroundPath = document.createElementNS('http://www.w3.org/2000/svg', 'rect');\n backgroundPath.setAttribute('x', baseThickness);\n backgroundPath.setAttribute('y', baseThickness);\n backgroundPath.setAttribute('width', width - baseThickness * 2);\n backgroundPath.setAttribute('height', height - baseThickness * 2);\n backgroundPath.setAttribute('rx', backgroundRadius);\n backgroundPath.setAttribute('ry', backgroundRadius);\n backgroundPath.setAttribute('fill', backgroundColor);\n \n // Add the paths to the card group in the correct order\n cardGroup.appendChild(backgroundPath);\n cardGroup.appendChild(borderPath);\n \n // Add the card group to the SVG\n svg.appendChild(cardGroup);\n }\n }, [width, height, cornerRadius, strokeColor, backgroundColor, numberOfWaves, minThickness, maxThickness, regenerateKey]);\n \n return (\n

\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}",["D",1743453229471],"id","62039f3a-2793-11f0-9d52-569c3dd06744","markerPenCard",["D",1746217440654],"deletedAt","legacyEnvVars",true,"privacy","public","httpPrivacy","description","imageUrl","a8270e74-6479-475a-8025-9b69544ee0e7","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","8319defa-6e1a-46d4-ba66-2114ffd3360b","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_101":100,"_108":104},"org",{"_101":100,"_102":-5,"_103":104,"_18":59,"_105":106,"_107":25},"branch",{"_13":14,"_32":88,"_47":40,"_89":48,"_90":91,"_92":65,"_93":55,"_94":95,"_96":97,"_98":49,"_99":100},"isOwned","main","projectId","forkedBranchId","941cd046-2783-11f0-b46e-569c3dd06744","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","941c71e6-2783-11f0-b46e-569c3dd06744","forkedProjectOrgId","d663a026-6449-42f6-9156-1d4a2d64d38c","projectName","userHandle","yawnxyz","handle","displayName","avatar","https://images.clerk.dev/oauth_github/img_2NnaHhpxNuH1xWRIRjQNoo16TVc.jpeg","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_47":48,"_32":49,"_36":172,"_51":-5,"_52":53,"_54":55,"_56":55,"_57":-5,"_58":-5,"_18":59,"_60":43,"_61":53,"_62":-5,"_63":-5,"_64":65,"_66":67,"_68":-5,"_69":-5,"_70":-5,"_71":-5,"_72":73,"_74":73,"_75":76,"_77":76,"_78":76,"_79":73,"_80":73,"_81":173,"_83":174,"_85":175,"_87":25},"tree",[163,164],"files",[163,164],"counts",{"_153":65,"_154":14,"_155":65,"_156":157,"_158":159},"contents",[142,143],"upstreamProject",{"_47":95,"_32":49,"_57":-5,"_58":-5,"_54":55,"_81":140},"upstreamBranch",{"_47":91,"_36":133,"_134":135,"_32":88,"_89":95,"_13":136,"_90":-5,"_92":-5,"_137":138,"_51":-5,"_87":25,"_54":55,"_99":139,"_66":97,"_98":49},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1746210652755],"updatedAt",["D",1743217178965],2,"lockfileKey","1746309288085-esm.town_v_dcm31_markerPenCard@2-main","dcm31",{"_101":139,"_108":141},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/3e904faa-3764-4629-c475-f561a49b0000/square512?exp=1789552799&sig=9e2f7c6ad81bfe0a417f4ee593a56f46019d3f18deb24441c667547de12b5000",{"_47":150,"_32":28,"_30":31,"_145":-5,"_39":40,"_38":14,"_146":53,"_36":151,"_13":65,"_33":21,"_34":35,"_24":25,"_148":-5,"_27":152},{"_47":144,"_32":42,"_30":43,"_145":-5,"_39":40,"_38":14,"_146":53,"_36":147,"_13":65,"_33":44,"_34":45,"_24":25,"_148":-5,"_27":149},"6207cf2e-2793-11f0-9d52-569c3dd06744","parentId","latest",["D",1743453229471],"label",[42],"6207f72e-2793-11f0-9d52-569c3dd06744",["D",1743453229471],[28],"pulls","branches","forks","envVars",{"_160":65,"_162":65},"connections",{"_160":65,"_161":65},"count","unfilledCount","emptyCount",{"_47":150,"_32":28,"_30":31,"_145":-5,"_39":40,"_38":14,"_146":53,"_36":169,"_13":65,"_33":21,"_34":35,"_24":25,"_148":-5,"_166":170,"_27":171},{"_47":144,"_32":42,"_30":43,"_145":-5,"_39":40,"_38":14,"_146":53,"_36":165,"_13":65,"_33":44,"_34":45,"_24":25,"_148":-5,"_166":167,"_27":168},["D",1743453229471],"children",[],[42],["D",1743453229471],[],[28],["D",1746217440654],{"_101":100,"_108":104},{"_101":100,"_102":-5,"_103":104,"_18":59,"_105":106,"_107":25},{"_13":14,"_32":88,"_47":40,"_89":48,"_90":91,"_92":65,"_93":55,"_94":95,"_96":97,"_98":49,"_99":100},"ctx",{"_81":-5,"_130":209,"_210":211,"_212":213,"_214":25,"_215":25,"_216":25,"_217":53,"_218":-5,"_219":-7,"_220":-7,"_221":65,"_222":25,"_223":25,"_224":-5,"_225":25,"_226":25,"_227":25,"_228":-5},"ENV",{"_180":181,"_182":183,"_184":88,"_185":186,"_187":188,"_189":190,"_191":192,"_193":194,"_195":196,"_197":198,"_199":200,"_201":202,"_203":204,"_205":206,"_207":208},"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"]

Diff · v1