How to get handwriting animation with irregular SVG Strokes using JS and CSS?

Question

I have followed this tutorial to get to where I am. So far, I have the animation working for the mask layer. The only issue is that I cannot change the .mask stroke color to #fff like the tutorial. Once I do that, the mask layer seems to disappear and nothing is animated.

Can someone help me understand why I can't make the lines in the "M" look like they are being drawn by the animation?

const masks = ["M"];

masks.forEach((mask, index, el) => {
  const id = `#Mask-${mask}`;
  let path = document.querySelector(id);
  const length = path.getTotalLength();
  path.style.strokeDasharray = length;
  path.style.strokeDashoffset = length;
});

.Character {
  cursor: pointer;
  position: absolute;
  fill: #000000;
  left: 0;
  top: 0;
}
#Char-M {
  mask: url(#Mask-M);
}

.mask {
        fill: none;
        stroke: #333;
        stroke-miterlimit: 10;
        stroke-width: 171px;
        stroke-linecap: round;
        stroke-linejoin: bevel;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
      }

@keyframes strokeOffset {
  to {
    stroke-dashoffset: 0;
  }
}

#Mask-M {
  animation: strokeOffset 3s linear infinite;
}

user_271353 · Answer

Well, you don't necessarily need a mask, you can just progressively uncover the underlying character by moving the stroke-dasharray of a duplicate over-drawing. Here's a simplified version of yours showing how this would work.

There are some nasty drawing artifacts (in Chrome at least) - because very large strokes often have bad rendering artifacts when you combine them with stroke dash arrays and miters/end-caps. But it does work.

.mask {
        stroke: #fff;
        fill: none;
        stroke-width: 171px;
        stroke-dasharray: 1600 1600;
        stroke-dashoffset: 3200;
      }

@keyframes strokeOffset {
  to {
    stroke-dashoffset: 1600;
  }
}

#Mask-M {
  animation: strokeOffset 3s linear infinite;
}

How to get handwriting animation with irregular SVG Strokes using JS and CSS?

1 Answers