<div id="signBox">
  <svg id="signSvg" viewBox="0 0 500 500">
    <path id="signPath" d="M42,251c11.7-6.8,44.4-28.1,56-68c10.5-36.1-1.1-71.2-4-71c-2.9,0.2,2.1,34.5-3,107c-3.6,50.6-9.4,82-4,123
    c1.1,8.2,2.2,13.6,1,14c-3.4,1.1-29.2-38.1-20-76c2-8.2,4.7-19.9,14-28c4.4-3.8,11.5-8,14-6c3.2,2.6-3.1,14.5-2,15
    c1.4,0.7,9.3-19.4,26-36c8.8-8.7,23.4-19.9,27-17c3.2,2.6-1.4,16.4-11,24c-5.8,4.6-14,7.5-15,6c-2.4-3.9,36.8-44.4,86-49
    c11.5-1.1,24.5-2.1,33,6c16.2,15.4,4.6,52.8-7,73c-13.2,22.9-40.5,53.8-74,52c-3.4-0.2-27.7-1.5-35-18c-5.4-12.4,1.7-26.6,8-34
    c13.7-16.1,38.6-17.6,41-13c1.5,2.8-5,9.2-4,10c1,0.8,7.4-6.1,9-5c1.4,1-3.2,6.7-2,9c4.1,7.9,77.6-20.9,144-68
    c16.8-11.9,32.5-24.6,30-36c-2.1-9.5-16.7-18.1-22-15c-2.5,1.5-3.6,5.9-2,8c4.3,5.5,26.9-7.4,29-4c2.2,3.6-22.2,19.7-19,27
    c1.9,4.4,12.2,1.7,14,6c2.8,6.7-20.3,18-18,28c1.4,6.2,10.7,4.4,15,11c8.6,13.2-19,35.9-24,69c-2.2,14.8-3.3,43.9,9,50
    c20.5,10.2,64.9-49.3,111-111c17.2-23,28.2-40,22-52c-6-11.6-27.5-17-36-10c-4.2,3.4-2.1,7.2-6,19c-6.2,18.6-15.8,21.7-14,31
    c1.9,9.7,14,14.3,16,15c11.1,4,25,0.9,26-4c1.5-7.3-26.3-15.3-25-23c0.9-5.3,14.8-7.2,25-8"
    fill="none" stroke="#000" stroke-width="2px"></path>
  </svg>
  <div id="pen"></div>
</div>
#signBox {
  position: relative;
  width: 500px;
  height: 500px;
}

#pen {
  position: absolute;
  top: -5px;
  left: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: red;
}
var svg = document.getElementById("signSvg");
var path = document.getElementById("signPath");
var pathLength = path.getTotalLength();
var pen = document.getElementById("pen");
var ratio = svg.getBoundingClientRect().width / svg.getBBox().width;

path.setAttribute("stroke-dasharray", "0 " + pathLength);

var tween = createjs.Tween
  .get({
    length: 0
  }, {
    loop: true
  })
  .to({
    length: pathLength
  }, 5000, createjs.Ease.signEase)
  .addEventListener("change", function(event) {
    var length = event.target.target.length;
    var point = path.getPointAtLength(length);

    path.style.strokeDasharray = length + " " + pathLength;
    pen.style.transform = "translate(" + point.x  + "px," + point.y + "px)";
  });

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://code.createjs.com/tweenjs-0.6.2.min.js