Marker Pen Card Component

This is a hand-drawn card component using SVG with variable thickness borders to create a marker pen style.

• Hand-drawn marker pen appearance with varying stroke thickness
• Natural sine wave border variation for organic feel
• Customizable dimensions, colors, and corner radius
• Interactive with onClick support
• Renders any React children inside the card
• Mobile-friendly and responsive

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

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

• 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 marker pen look:

1. Calculates inner and outer points around the card perimeter
2. Varies the thickness based on a sine wave pattern
3. Adds subtle random variations for natural look
4. Connects the points to create a complete border path
5. Renders both background and border for the complete card effect
6. Places children content in an absolutely positioned container

The rendering refreshes whenever any of the dimension or style props change, and the "Generate Variation" button creates a new random variation of the card.