hand-drawn-arrows-and-marks

name	hand-drawn-arrows-and-marks
description	Use when adding personality to layouts. Hand-drawn arrows, circles, and marks add wit and direction without being childish.

Hand-Drawn Arrows and Marks

Hand-drawn marks = curated wit. Arrows, circles, underlines drawn in SVG with slight wobble. Editorial brands use sparingly for emphasis.

Mark styles

1. Hand-drawn arrow — slightly wobbly, pointing to something important
2. Circle of emphasis — drawn around a number, word, or feature
3. Underline scribble — emphasizing a key phrase
4. Brace mark — grouping multiple items
5. Asterisk note — pointing to footnote
6. Star/check mark — completed or favorited

Implementation

Method 1: SVG inline

<svg viewBox='0 0 100 30' xmlns='http://www.w3.org/2000/svg'>
  <path d='M5,15 Q30,10 60,15 T95,15' stroke='currentColor' fill='none' stroke-width='2' />
  <polyline points='90,10 95,15 90,20' stroke='currentColor' fill='none' stroke-width='2' />
</svg>

Method 2: Pre-rendered SVG sprite Method 3: AI image generator + import

Use restraint

Maximum 1-2 hand-drawn marks per screen. More than that feels gimmicky. The marks should:

• Point to actually-important info
• Be slightly imperfect (not too clean)
• Match brand color (use accent or ink)
• Feel intentional, not random

Where this fits in the X3 empire

Used sparingly in CardPrepAI editorial content for emphasis.