Converting signature to SVG

Question

I've been trying to create my signature using svg coordinates but have been unsuccessful. I also tried various online tools, but they did not seem to work. Basically, this CodePen seemed really interesting and I wanted to create one of my signatures using svg.

This is the code from CodePen:

// Select all <path> elements.
const paths = document.querySelectorAll('path');

/**
 * Loop over each path,
 * calculate the length of a path,
 * set a CSS variable with the length so CSS can read the length.
 */
for (const path of paths) {
  const length = path.getTotalLength();
  path.style.setProperty('--path-stroke-length', length);
}

.container {
  max-width: 400px;
  margin: 0 auto;
}

.signature {
  position: relative;
  overflow: auto;
  width: 100%;
  height: 0;
  padding-bottom: 55.30973%;
}

.signature svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.signature svg path {
  stroke-dasharray: var(--path-stroke-length);
  animation: draw 1.5s 1.5s ease-in-out both;
}

@keyframes draw {
  from {
    stroke-dashoffset: var(--path-stroke-length);
  }
  to {
    stroke-dashoffset: 0;
  }
}

<div class="container">
  <div class="signature">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="34.924 351.353 548.489 159.86">
      <path fill="none" stroke="#020202" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" d="M51.494,355.859c-0.361,6.059-0.928,154.471,0.112,139.244"/>
      <path fill="none" stroke="#020202" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" d="M78.591,407.725c1.312,22.307-22.823,30.685-40.917,38.995v0.438c28.433,6.559,63.44,14.872,83.997,37.178"/>
      <path fill="none" stroke="#020202" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" d="M107.581,428.161c-10.663-3.553-25.783,30.933-12.163,31.759c9.906,0.412,10.873-18.834,13.134-26.911 c-5.65,11.058,3.828,48.292,20.075,6.995c-11.509,10.832,17.602,55.514,27.12-39.959c-2.612,27.794-5.091,45.328,6.053,56.885 c9.493,9.906,24.097,5.309,26.899-6.503c9.349-39.39,2.886-89.151-4.863-88.502c-7.76,0.648-12.929,44.588-4.217,79.835 c2.759,11.161,9.906,22.289,23.114,24.354c14.859,2.475,13.208-12.385,17.335-21.466c1.238,5.367,1.238,11.971,7.842,12.795 c7.429,1.238,9.492-9.906,14.446-9.906c2.063,0,4.127,4.129,6.192,4.541c3.302,1.238,3.715-0.412,7.017-1.651 c19.812-6.19,17.879-0.059,38.517-0.059"/>
      <path fill="none" stroke="#020202" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" d="M137.931,434.742c14.447-2.475,28.894-3.714,43.753-4.128"/>
      <path fill="none" stroke="#020202" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" d="M323.739,390.271c7.861-15.198-23.06-13.102-28.826-1.571c-13.101,26.204,37.734,46.643,44.023,68.653 c9.435,33.017-49.264,34.063-67.605,21.487c-11.53-8.386-2.096-13.626,8.385-16.771"/>
      <path fill="none" stroke="#020202" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" d="M355.25,448.722c-5.261,16.234,3.377,51.195,12.721,59.741c0,0,0.649-26.498-10.497-40.877"/>
      <path fill="none" stroke="#020202" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" d="M366.466,462.687c6.728,0.814,33.816,1.509,39.618-16.217c5.733-17.524-34.122-12.104-46.724-6.919 c-4.088,1.683-12.966,5.606-12.708,12.208c0.535,13.62,37.153,12.974,56.324,8.02s23.665-9.646,25.908-14.53 c-4.859,0.813-5.232,10.987-1.495,14.243c4.86,4.069,6.729-2.442,9.718-6.104c0.747,3.256,1.494,6.104,2.989,8.952 c3.738-2.848,5.608-10.173,10.841-9.766c4.485,0,3.991,5.186,8.477,5.594c4.111,0.408,8.078-11.094,22.939-10.447 c-8.399-1.615-24.232,8.725-13.569,12.278c11.309,2.907,13.178-9.46,14.674-14.343c1.494-5.29,6.729-39.826,0.748-43.896 c-4.485-2.849-5.232,5.696-5.607,9.359c-1.12,11.395,2.617,32.093,10.093,40.64c7.476,8.952,26.537,12.207,32.892-1.628 c4.861-10.986-8.597-17.498-10.091-5.289c-2.99,23.195,22.56,15.073,30.566,7.922c13.571-12.116,11.147-86.235,2.259-86.761 c-8.071-0.478-24.718,94.514,36.346,102.269"/>
      <path fill="none" stroke="#020202" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" d="M432.622,431.008c0.373-0.407,0.373-1.222,0.373-2.035"/>
      <path fill="none" stroke="#020202" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" d="M130.66,421.731c0.373-0.407,0.373-1.221,0.373-2.035"/>
    </svg>
  </div>
</div>

Link to CodePen

I would like the same animation but with this signature:

How would I create use the svg to create this signature? It does not have to be exact on point but it can be really close too. Any suggestions? I tried using different tools online to create one but I got stuck

Answer 1

You could use Inkscape which is free, or virtually any vector image editor.

Copy and paste your signature image into Inkscape, lock it in place. Then draw the signature paths on top using the Bézier Tool (aka Pen Tool). Once you have finished unlock and delete the image.

An example