Animated Signature

中文版本 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.

Animated SVG Logo

An article about how to create an animated SVG logo.

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.