英文版本 English Version

一段时间前, 我搭建了自己的个人网站。我想要把他弄得酷炫一些, 其中动画签名就是我想要的一个元素。我曾经看到过 Anthony Fu 在他的个人网站上加的动画签名, 我觉得很酷, 所以我决定给自己也搞一个。

于是我开始阅读 Anthony 的文章, 并尝试理解他是如何制作动画签名的。然而, 我发现他首先用他的压感笔来给自己制作了一个签名, 但我没有压感笔。到这我甚至一度都觉得自己可能做不出一个像样的签名了, 但是想了想还是坚持一下想想办法, 于是我开始拆解任务, 我的第一个任务就是找到一个获取签名的方法。

搞到一个签名

我最开始的想法是让 ChatGPT 为我生成一个签名, 但结果并不理想(说实话, 这个渲染出来的效果就和普通文本没差 😅)。

于是我转向了 Google, 并找到了一个叫 Signaturely 的网站。它提供了一个简单的方法, 通过输入你的名字并选择一个字体来生成一个签名。我尝试了几种字体, 最终找到了一个我喜欢的。

然而麻烦的事又来了, 我发现生成的文件格式是 PNG 而不是 SVG。所以我又面临了一个新问题, 如何将 PNG 转换为 SVG?

将 PNG 转换为 SVG

我选择再次相信 ChatGPT 一次, 问它如何将 PNG 转换为 SVG。这次, 它给了我一个比较靠谱的答案。

我找到了一个免费且相对易用的工具叫 InkScape。我上传了 PNG 文件, 然后经过一番鼓捣我终于得到了一个 path!

动画

在搞定签名的 SVG 之后, 给他加上动画就比较简单了, 我利用了 stroke-dasharray 和 stroke-dashoffset 来创建绘制效果, 并使用 @keyframes 来控制动画, 最终得到了一个相对比较满意的效果。以下是最终代码:

<script setup lang="ts">
const isDark = useDark()
const logoColor = computed(() => (isDark.value ? '#fdfdfd' : '#303030'))
</script>

<template>
  <svg style="transform: translate3d(0, 0, 0);" width="123" height="30" viewBox="0 0 820 200" xmlns="http://www.w3.org/2000/svg">
    <path
      id="signaturePath"
      d="[Your Path]"
      :stroke="logoColor" stroke-width="2"
    />
  </svg>
</template>

<style>
#signaturePath {
  stroke-dasharray: 2400;
  stroke-dashoffset: 2400;
  fill: transparent;
  animation: drawSignature 8s linear infinite;
}

@keyframes drawSignature {
  0% {
    stroke-dashoffset: 2400;
  }

  15% {
    fill: transparent;
  }

  35%,
  75% {
    stroke-dashoffset: 0;
    fill: v-bind(logoColor);
  }

  90%,
  100% {
    stroke-dashoffset: 2400;
    fill: transparent;
  }
}
</style>

总结

最终, 我成功地制作了一个动画签名, 我对结果非常满意。最开始我发现 Anthony 用他的压感笔来创建他的签名时, 我真的一度都认为我可能搞不定这个签名了。但经历各种波折后, 我最终还是成功地搞定了并且效果也还不错, 这种感觉还是很不错的~

中文版本 Chinese Version

A few days ago, I built my own personal website and wanted to create some cool stuff to make it fancy. One of those things is making an animated signature. I once saw Anthony Fu's animated signature and thought it was really cool, so I decided to one for myself.

And I started to read Anthony's article, tried to understand how it works. However, I found he created his signature by his pressure-sensitive pen which I don't have. So my first task is to find a way to get a signature.

Get a Signature

My initial thought was to ask ChatGPT to generate me a signature, but the outcome was not satisfactory (to be honest, it was just plain text 😅).

So I turned to Google and found a website called Signaturely. It provides a simple way to generate a signature by typing your name and selecting a font. I tried a few fonts and finally found one that I like.

However I found the file format is PNG instead of SVG, so I got another problem, how to convert a PNG to SVG?

Convert PNG to SVG

I choose to trust ChatGPT one more time and asked it how to convert a PNG to SVG. This time, it gave me a good answer.

I found a free and relatively easy-to-use tool called InkScape. I uploaded the PNG file and I somehow got an path!

Animation

Now I have the path, I can start to make the animation. I use stroke-dasharray and stroke-dashoffset to create the drawing effect, and use @keyframes to control the animation. Here is the final code:

<script setup lang="ts">
const isDark = useDark()
const logoColor = computed(() => (isDark.value ? '#fdfdfd' : '#303030'))
</script>

<template>
  <svg style="transform: translate3d(0, 0, 0);" width="123" height="30" viewBox="0 0 820 200" xmlns="http://www.w3.org/2000/svg">
    <path
      id="signaturePath"
      d="[Your Path]"
      :stroke="logoColor" stroke-width="2"
    />
  </svg>
</template>

<style>
#signaturePath {
  stroke-dasharray: 2400;
  stroke-dashoffset: 2400;
  fill: transparent;
  animation: drawSignature 8s linear infinite;
}

@keyframes drawSignature {
  0% {
    stroke-dashoffset: 2400;
  }

  15% {
    fill: transparent;
  }

  35%,
  75% {
    stroke-dashoffset: 0;
    fill: v-bind(logoColor);
  }

  90%,
  100% {
    stroke-dashoffset: 2400;
    fill: transparent;
  }
}
</style>

Wrap Up

I'm really happy with the result. When I found Anthony used his pressure-sensitive pen to create his signature, I thought maybe I couldn't make it. But when finally I found a way to make it, I felt really proud of myself.

Sharing is caring, so I decided to write this article to share my experience. I hope you can find it helpful. If you have any questions, feel free to ask me.

我不想把我职业生涯的决定权放在别人的手上, 不想把是否优秀的标准放在个别人的手上 , 不想做低效的事

前段时间从微信离职来了深圳的一家 startup, 家人朋友们问起我为什么离职的时候, 大多数时候我的答案是呆着太累了或者太卷了之类的话。但是我内心里其实并没有接受这个答案, 因为我觉得这不是我离开的主要原因。

其实很长一段时间里我自己也没有想清楚我具体是为什么离开的, 我只是觉得呆着不舒服, 觉得继续待下去真的很难受。我甚至想麻痹自己说不定就是太卷了太累了我不想呆了, 但是怎么说呢, 你很难骗过自己的内心, 所以我也没有接受这个答案。

前段时间看到了{程序员第二曲线手册|https://github.com/BetaSu/second-curve}, 其中有一点我很有触动, 里面提到很多人其实并没有理解绩效的本质, 绩效主要受两方面影响

1. 你是否符合公司 “优秀” 的标准
2. 公司的经营情况

对于第一点, 能力强只是公司评估你是否“优秀”的其中一个标准, 当公司出于你能力之外的原因判定你为一个不“优秀”的人的时候, 我们很可能会陷入“为什么我能力这么强, 但我还是被认为不优秀”的自我怀疑中。这里不优秀的体现方式有很多种, 不给你倾斜的资源(钱), 给你普通或者低绩效甚至是裁员。

我身边有不少真的很优秀的人, 他们在大厂里混得真的不是很好(包括我自己)。因为我认识的优秀的朋友们, 大多数都很有个性, 换句话说是一些主观能动性很强的伙伴。他们就是因为没有做到公司 (其实大多数时候是你直属上级的管理 scope) 认为的“优秀”, 并没有拿到很好的资源甚至不受待见。

但是在大厂里你直属上级的管理 scope 下“优秀”的标准其实就是一言堂。你的绩效, 你干的活的重要程度, 你分配到的钱💰, 决定权都 100% 的属于你的直属上级。这种时候甚至可以说你的职业生涯是被别人把握的, 你没有决定权。这就导致很多人都在想着怎么向上管理自己的直属上级, 怎么成为“嫡系”。

但是真的很巧, 我认识的优秀的人大多数都是想着如何把事情做好的人。但是把事情做好可能并不是你直接上级的真正目标, 他真正的目标可能是成为你的间接上级。但是成为你的间接上级就需要成你间接上级管理 scope 下认为的“优秀”的人。

层层反复, 在大厂繁重的等级制度下, 真正的目标可能早已偏离把事情做好这件事情, 相应的优秀的人也变成了不“优秀”的人。

对于上面提到的第二点, 大厂其实很难在短时间内产生经营危机, 但是大厂有着和经营危机同样 effect 的末位淘汰。这其实是国内大厂主流的做法, 负反馈管理。你做的不好, 就给你低绩效, 给你生存压力, 这点对于上有老下有小且有贷在身的员工“尤为好用”, 可以逼着他们拼命干活。

我认为一个好的环境, 应该是在确保我们在做正确的事的同时, 最大程度的允许大家积极发挥自己的主观能动性, 而不是矫正他们的思想, 告诉他们什么是正确的事。

出于以上的思考, 现在我终于可以自我认同的说出, 我离开是因为

我不想把我职业生涯的决定权放在别人的手上, 不想把是否优秀的标准放在个别人的手上 , 不想做低效的事。