Ballpoint Pen Card Component

This is a hand-drawn card component using SVG path variations to create a ballpoint pen style.

• Hand-drawn appearance with natural line variations
• Customizable dimensions, colors, and corner radius
• Interactive with onClick support
• Renders any React children inside the card
• Mobile-friendly and responsive

Create val
import { BallpointPenCard } from 'https://esm.town/v/dcm31/ballpointPenCard';

function MyComponent() {
  return (
    <BallpointPenCard 
      width={300} 
      height={200} 
      onClick={() => console.log('Card clicked!')}
    >
      <h2>Card Title</h2>
      <p>Card content goes here</p>
      <button>Click Me</button>
    </BallpointPenCard>
  );
}

• width (number): Card width in pixels (default: 300)
• height (number): Card height in pixels (default: 200)
• cornerRadius (number): Radius of card corners (default: 30)
• strokeColor (string): Color of the card outline (default: "#333")
• backgroundColor (string): Color of the card background (default: "white")
• onClick (function): Click handler for the card (default: empty function)
• children: React nodes to render inside the card

The card uses SVG path manipulation to create a natural hand-drawn look:

1. Creates points around the perimeter of a rounded rectangle
2. Adds subtle random variations to each point (except for corner connections)
3. Creates a smooth path using Bezier curves
4. Renders both background and stroke for the complete card effect
5. Places children content in an absolutely positioned container

The rendering refreshes whenever any of the dimension or style props change.