从几何线条到手写签名：博客 Logo 的一次蜕变

今天花了点时间，把用了很久的博客 Logo 换掉了。

旧 Logo 的问题

之前的 Logo 是一个纯 SVG，用几何线条画了一个 C（半圆弧）和一个 W（锯齿折线），代表 Chiway Wang 的缩写。说实话，刚做出来的时候觉得还行——简洁、轻量、能跑就行。但看久了，越来越觉得不对劲：

• C 和 W 是割裂的。两个字母像是被硬拼在一起，没有任何视觉上的关联。
• 线条太粗糙。strokeWidth="5" 配上生硬的折线，毫无设计感，更像是用 PPT 随手画的。
• 和博客风格不搭。博客整体走的是极简现代路线，结果 Logo 像个草稿。

一开始想用代码解决

最初的想法是继续用 SVG，但把路径画得更精致——让 C 的弧线末端自然过渡到 W 的起笔，形成一笔连写的效果。

试了几版贝塞尔曲线，发现用代码"手写"签名这件事本身就很拧巴。你在路径编辑器里精心调整的控制点，渲染出来总是差那么点意思——要么 W 画成了 N，要么连接处像是断了又接上的骨头。

代码擅长画规则的东西，但签名的灵魂恰恰在于不规则。

手写才是答案

既然要手写感，那就真的手写好了。

拿出 MatePad，用华为 M-Pencil 刷刷几笔写了个 CW 连笔签名。笔锋的粗细变化、字母之间的自然衔接，这些是贝塞尔曲线很难模拟的东西。

导出 PNG 之后，工程上要处理几件事：

裁剪空白。原图 4096×2160，签名只占右上角一小块。用 sharp 的 trim() 裁到 1074×709。

透明背景。原图是白底黑字，需要把白色像素变成透明。遍历每个像素，根据亮度计算 alpha 值——越黑越不透明，越白越透明。

深色模式。同样的逻辑，只是把笔迹颜色从黑色换成白色。最后得到两张图：logo-light.png（黑色笔迹 + 透明背景）和 logo-dark.png（白色笔迹 + 透明背景），用 CSS 的 dark:hidden / dark:block 切换。

Favicon 也一并换了。把签名裁成正方形，缩放到 64×64 内嵌进 SVG，配合 prefers-color-scheme 媒体查询实现深浅模式自动切换。一个 5KB 的 SVG 文件搞定所有场景。

一个意外的坑

过程中还顺手修了一个存在已久的 hydration 报错。next-themes 的 resolvedTheme 在服务端是 undefined，客户端才能拿到实际值，导致主题切换按钮的 Moon/Sun 图标在服务端和客户端渲染不一致。加了一个 mounted 状态守卫就解决了——挂载前渲染空占位符，挂载后再显示实际图标。

这种小问题不影响功能，但在控制台里看着一片红色报错总是不舒服。

写在最后

Logo 这种东西，说大不大说小不小。它不会影响文章的质量，也不会让读者多停留一秒。但每次打开自己的博客，第一眼看到的就是它。

既然要看很多次，那就让它好看一点。