Watercolor SVG
生成手绘水彩质感的矢量插画:纸纹、湿边、颗粒沉淀、断续干边、放射笔触。
核心原则
算法已经写好并验证过,不要重写。 scripts/watercolor.js 是经 6 轮目视迭代收敛的结果——每个 alpha、每个 rim 参数都调过。从零手写 SVG 水彩必然退化成"钢笔描边的色块"。你的工作是选型、调参、验收,不是重新发明。
工作流
bash# 1. 看有什么 node scripts/watercolor.js --list # 2. 出图(同 seed 永远同一张) node scripts/watercolor.js --form hibiscus --palette indigo --seed 20863 --out flower.svg # 3. 渲染成 PNG —— 必须看图,不看就等于没做 scripts/render.sh flower.svg flower.png 1200 # 没装 Chromium 内核浏览器时脚本会退出码 3 并说明; # 此时直接在浏览器打开 .svg 目视检查,别跳过验收 # 4. 读 PNG,走验收清单。不合格→查对照表调参→回到 2
挑不定 seed 就一次出几个再选:--seeds 7,41,20863,4174 --out f.svg
验收清单(读 PNG 逐条核对,缺一条就要调)
| # | 要看到 | 不合格的样子 |
|---|---|---|
| 1 | 边缘线断续、两端渐隐、深浅不一 | 一圈均匀的"钢笔描边" |
| 2 | 花心深但有透明感,能看出结构 | 一坨死黑墨团 |
| 3 | 放射笔触止于瓣长 ~70%,外半瓣是干净洗染 | 全长射满 → 像羽毛球/菊花 |
| 4 | 纸色留白含蓄,只是笔触间的缝 | 刺眼白条 → 车轮辐条 |
| 5 | 至少两个可辨的色层(背瓣 vs 主瓣) | 通片一个色,平 |
| 6 | 纸纹和颗粒沉淀肉眼可见 | 光滑得像填充图形 |
| 7 | 花占画面 60–75%,四周有留白 | 撑满出血 / 缩成小点 |
症状 → 调什么
| 症状 | 参数 |
|---|---|
| 花太大/太小 | --scale 0.85 / 1.1 |
| 位置偏 | --cx --cy(按 600 基准坐标) |
| 整体太深/太脏 | 该花型 ring 的 wash.alpha、center.alpha 降 20% |
| 中心黑洞 | center.count↓ center.alpha↓,veinN↓ |
| 星芒太长太密 | veinLen:[0.25,0.5]、veinN:[4,6] |
| 边缘像描边 | rim 数量↑而 rimAlpha↓(靠叠加不靠加深) |
| 想要更"湿" | wash.bleed↑、spread↑ |
花型/色板都在脚本顶部的 FORMS / PALETTES 里,直接改或用 --config x.json 覆盖。改法与全部参数含义见 references/tuning.md。
内置
花型 hibiscus(木槿,5 瓣 + 长蕊柱)· poppy(虞美人,4 褶皱大瓣)· peony(牡丹,三层密瓣)· cosmos(波斯菊,8 窄瓣)· magnolia(玉兰,9 长瓣)· abstract(自由色斑,作背景/封面)
色板 indigo(靛蓝)· rose(粉紫暖黄)· celadon(青瓷)· ink(水墨)· plum(梅紫)· amber(琥珀)
新色系不必新建色板——--config 里传 palette 对象即可,字段见 tuning.md。
常见错误
- 不看图就交付:SVG 源码看不出画得好不好,滤镜和 multiply 只有渲染才生效。没有浏览器可截图时,也要把 SVG 打开来看。
- 挑第一个 seed 就交:seed 之间差别很大,多出几个再选。
- 给新色系挑太浅的颜色:全部走
multiply叠加,呈现比色值淡得多,选中等明度。 - 改
--size后以为要重调几何:几何按 600 基准自动等比缩放,只改--size即可。 - 标注字体:默认
Bradley Hand(macOS 自带),SVG 未转曲。换机器会回退;--font可换,--no-anno可去掉。


