这个站顶上的标志不是静止的。CHERNOV 七个字母，每个都画了好几种性格：严谨、像素、巴洛克、维多利亚、欧普艺术，一共 27 种写法。字母自己有主意，隔几拍就有一个决定变成另一副样子。不是瞬间切换，是变形，一个形状流进另一个形状，像液体。
这篇拆一下它是怎么做的，以及我掉进去的几个坑。
换帧为什么不够#
第一版就是 SVG 交叉淡入淡出。能跑，但是死的：图一换，人读到的是“卡了一下”，不是一个动作。让标志活过来的是轨迹本身。眼睛得看见严谨的衬线怎么一点点长成像素黑体，才会自己补出这个角色的性格。
变形跑在 flubber 上，一个路径插值库。但字母不能直接喂给它，麻烦从这里开始。
三个坑#
先说洞。e、o、r 这些字母的路径里有洞。只对外轮廓做插值，洞会被粘上，字母走到一半变成一坨墨。办法是把路径拆成子路径，在两种写法之间按启发式配对：填充色、面积、重心间距，然后子路径对子路径地变形，再加 fill-rule: evenodd，让洞一路上都还是洞。
多出来的形状是第二个坑。同一个字母，一种写法由两块组成，另一种由五块组成，多出来的三块往哪儿放？藏起来会被看见。flubber 有 combine 和 separate，多余的形状老实地从旁边那块里长出来，或者化进去。
最花时间的是节奏。所有字母一起变，是放礼花；按定时器轮着变，是节拍器。两样都无聊。所以标志有个“指挥”：独奏那个字母每 2.8 到 4.6 秒换一次，每隔五到七拍，整个词上滚过一道波，字母之间错开 110 毫秒。上面再叠一层很轻的缩放“呼吸”，让它在停顿的时候也不像块石头。这几个数字不是算出来的，是我看着顺眼定下来，中间改了很多遍。
互动区#
页脚里的标志交给访客：鼠标移到一个字母上，它就换一种写法。六个字母各有四种写法，v 只有三种，第四种它还没挣到。全部组合是 12288 种，下面的计数器老实地记着你已经看过多少种。
为什么要费这个劲#
标志是品牌里被看见最多的东西，也是最死的一个：通常就是一张钉在屏幕角上的图。我是亚历山大·切尔诺夫（Alexander Chernov），这个站从设计到代码都是我自己做的，我想让设计师的签名表现得像个设计师，坐不住，但知道分寸。没有功能的动效是装饰，这里的功能是标志在展示自己的幅度，而幅度正是作品集要卖的东西。
好动效回答的不是“怎么动才好看”，是“这个东西什么性格”。
技术细节：flubber 13KB，在 requestAnimationFrame 上用 easeInOutCubic 插值，遇到 prefers-reduced-motion 全部老实关掉。字母在 Figma 里画好，清成干净路径，每个字母存成单独的 SVG。