JSFiddle - React, Tailwind, and code Playground

HTML

<canvas width=630></canvas>

CSS

canvas{
    background:#000;
}

JavaScript

var ctx = document.querySelector("canvas").getContext("2d"),
    dashLen = 220, dashOffset = dashLen, speed = 30,
    txt = "Dale McDiarmid", x = 50, i = 0;

ctx.font = "50px Comic Sans MS, cursive, TSCu_Comic, sans-serif"; 
ctx.lineWidth = 1; ctx.lineJoin = "round"; ctx.globalAlpha = 2/3;
ctx.strokeStyle = ctx.fillStyle = "#FFF";



(function loop() {
  ctx.clearRect(x, 0, 60, 150);
  ctx.setLineDash([dashLen - dashOffset, dashOffset - speed]); // create a long dash mask
  dashOffset -= speed;                                         // reduce dash length
  ctx.strokeText(txt[i], x, 90);                               // stroke letter

  if (dashOffset > 0) requestAnimationFrame(loop);             // animate
  else {

    ctx.lineWidth = 0;
    ctx.fillText(txt[i], x, 90);                               // fill final letter
    dashOffset = dashLen;                                      // prep next char
    x += ctx.measureText(txt[i++]).width //+ ctx.lineWidth * Math.random();
    //ctx.setTransform(1, 0, 0, 1, 0, 3 * Math.random());        // random y-delta
    //ctx.rotate(Math.random() * 0.005);                         // random rotation
    if (i < txt.length)
        requestAnimationFrame(loop);
     else
         finish();
  }
})();

function finish(){
    ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height)
    ctx.shadowBlur = 15;
	ctx.shadowColor = "#00F";
    ctx.strokeText(txt, 30, 90);
    ctx.fillText(txt, 30, 90);
}

alert(window.location.hash)