01 · 直线 × 圆 × 矩形：机械 vs 手绘

同一个 SVG 标签，RoughJS 帮你加随机抖动

普通 SVG（机械感）

RoughJS（手绘感）

核心 API 3 步曲：
const rc = rough.svg(svgElement) — 把 SVG 元素包成一个 roughjs 画笔
svg.appendChild(rc.line(x1, y1, x2, y2, options)); — 画一条带抖动的线
svg.appendChild(rc.rectangle(x, y, w, h, options)); / svg.appendChild(rc.circle(cx, cy, r, options)); — 同理

SVG 标签的属性（坐标、尺寸）和你画普通 SVG 完全一样， 只是把"画几何图形"这一步换成调方法。

两种画笔：rough.svg(svg) 输出 SVG 路径（DOM 可检查、可动画、可被 CSS 控制）； rough.canvas(canvas) 输出到 <canvas>（更快、适合一次性渲染）。 数字花园文章里用 svg 模式更方便。