draw-name.js

function makeSVG(tag, attrs) {
  var el= document.createElementNS('http://www.w3.org/2000/svg', tag);
  for (var k in attrs)
    el.setAttribute(k, attrs[k]);
  return el;
}

function drawName() {
  var color = 'black'
  var strokeWidth = 1
  var path1 = makeSVG('path', {
    stroke: color,
    'stroke-width': strokeWidth,
    'fill': 'none',
    d: "m 547.50268,87.666502 c -9.66467,-9.664667 -15.17995,-23.275004 -23.23351,-35.355339 -4.02762,-6.041431 1.7728,-19.687906 2.02031,-19.192899 7.80209,15.604183 16.57301,34.377728 20.20305,52.527933 3.47112,17.355623 -0.68777,104.711983 -30.30458,89.903573 -2.6338,-1.31689 -5.69544,-7.71574 -8.08122,-10.10152 -7.89835,-7.89836 1.98651,-28.04093 -6.06091,-36.36549 -1.1765,0.78433 -8.82868,13.13198 -7.07107,13.13198 8.78262,0 -14.40921,-26.87351 -30.30458,-3.03046 -14.46541,21.69811 1.46287,76.04593 -42.42641,42.42641 0,-19.33992 15.20842,-30.62258 -8.08122,-38.3858 -7.32833,-2.44278 -11.5957,-6.06091 -20.20305,-6.06091 -3.08397,0 -17.13043,-2.06247 -19.1929,0 -0.40868,0.40868 12.26002,48.41823 4.04061,52.52793 -21.80747,10.90374 -30.72941,-23.07304 -34.34518,-30.30458 -2.51601,-5.03202 -17.29237,-21.36653 -10.10153,2.02031 -3.74168,0.20119 -7.56115,-0.12252 -11.11168,-1.01015 -6.91207,-1.72802 -17.9368,-4.45931 -25.25381,-2.02031 -19.87834,6.62611 -13.36702,59.03517 9.09137,64.64976 12.97139,3.24285 28.1896,0.18935 34.34519,-12.12183 0.3235,-0.64699 2.19431,-8.08122 3.03046,-8.08122 4.66118,0 6.03714,9.58456 9.09137,11.11168 3.01058,1.50529 10.74962,1.22618 13.13198,2.02031 15.12921,-0.008 17.25786,-9.17665 25.25382,-17.1726 4.13478,-4.13478 5.12972,-30.06769 3.03046,-36.36549 -1.38424,-4.1527 -8.14601,-9.02659 -5.05077,-12.12183 1.48281,-1.48281 6.79862,1.59277 8.08122,2.0203 3.28531,1.09506 10.05487,-0.5284 13.13199,1.01016 9.32713,4.66356 -19.86539,58.58884 23.2335,58.58884 4.00235,0 4.85085,0.19992 7.07107,-2.0203 2.80581,-0.95601 9.80213,-0.71076 12.12183,-3.03046 2.52084,-2.52084 14.13814,-13.13198 14.14214,-13.13198 0.47739,0 24.03669,29.50139 42.42641,11.11168 61.58084,22.48454 63.0667,-92.1952 53.53808,-130.309681 -5.0172,-20.068783 -19.26528,-35.427725 -33.33503,-49.497475 -12.11905,-12.119051 -18.18275,12.742108 -18.18275,20.203051 0,28.183057 17.286,44.560117 33.33503,60.609155"
  })
  svg.append(path1);
  animateAndDraw(path1)

  var path2 = makeSVG('path', {
    stroke: color,
    'stroke-width': strokeWidth,
    'fill': 'none',
    d: "m 565.68543,123.02184 c 8.30034,20.40142 13.0126,41.94889 18.18274,62.62946 1.41187,5.64747 -3.00822,18.20498 1.01015,22.22335 8.77462,8.77462 12.12183,-27.14546 12.12183,-31.31472"
  })
  svg.append(path2);
  animateAndDraw(path2)

  var path3 = makeSVG('path', {
    stroke: color,
    'stroke-width': strokeWidth,
    'fill': 'none',
    d: "m 566.69558,98.77818 c -6.01428,-0.116173 17.79355,27.27412 13.13198,27.27412 -4.8441,0 6.79993,-13.28794 8.08122,-14.14214 13.42742,-8.95161 30.22423,-13.568182 46.46702,-7.07106 21.71152,8.6846 32.12624,52.92521 22.22335,72.73098 -9.183,18.36601 -22.25479,42.58358 -26.26396,62.62946 -3.31632,16.58161 8.117,32.04779 16.16244,45.45686 3.01331,5.02218 4.24233,9.69653 6.06091,15.15229 0.2381,0.71428 1.54255,2.5527 1.01016,2.0203 -31.21321,-31.2132 -45.84759,-49.95487 -34.34519,-95.96449 5.0938,-20.37521 16.73582,-43.16336 11.11168,-65.65991 -1.13646,-4.54583 -9.49878,-14.54955 -13.13198,-18.18275 -21.00519,-21.00518 -20.20306,42.47358 -20.20306,53.53809"
  })
  svg.append(path3);
  animateAndDraw(path3)

  var path4 = makeSVG('path', {
    stroke: color,
    'stroke-width': strokeWidth,
    'fill': 'none',
    d: "m 317.1879,179.59038 c -25.58844,-0.009 -13.46695,40.96613 4.04061,29.29443 3.63558,-2.42372 17.01702,-20.35863 12.12183,-25.25382 -2.85401,-2.854 -12.00352,-3.20882 -16.16244,-4.04061 z"
  })
  svg.append(path4);
  animateAndDraw(path4)

  var path5 = makeSVG('path', {
    stroke: color,
    'stroke-width': strokeWidth,
    'fill': 'none',
    d: "m 485.88337,159.38733 c -4.14595,4.10124 -3.03045,8.8309 -3.03045,14.14214 0,50.52424 37.97885,-14.14214 3.03045,-14.14214 z"
  })
  svg.append(path5);
  animateAndDraw(path5)

  var path6 = makeSVG('path', {
    stroke: color,
    'stroke-width': strokeWidth,
    'fill': 'none',
    d: "m 296.98485,244.24015 c 1.18129,5.09628 5.81864,5.57637 8.08122,10.10152 15.52964,31.05929 13.38016,128.35912 11.11168,164.65487 -0.26663,4.26606 -6.54132,47.47717 -8.08122,47.47717 -9.9979,0 29.66958,-65.16507 31.31473,-68.69038 4.56145,-9.77454 8.53373,-19.9928 11.11167,-30.30457 0.83284,-3.33134 -0.4078,-12.52963 2.02031,-10.10153 5.58346,5.58347 15.3463,52.58484 17.17259,62.62946 1.73115,9.5213 4.04061,18.53878 4.04061,28.28427 0,5.05076 0,20.20305 0,15.15229 0,-66.49756 13.96558,-130.02718 49.49748,-186.87822 6.94142,-11.10627 40.85248,-37.25826 41.41625,-38.3858 2.57759,-5.15519 -11.58101,0.62241 -17.17259,2.02031 -14.67921,3.6698 -25.85966,8.58609 -37.37565,18.18274 -16.20792,13.5066 -29.153,39.69903 -33.33503,60.60915 -2.72971,13.64857 -3.82826,28.28428 -4.04061,28.28428 -0.0533,0 -12.57718,-35.25589 -14.14214,-38.3858 -1.27475,-2.54952 -5.05076,-9.57204 -5.05076,-11.11168 0,-1.01015 0.45175,-3.93396 0,-3.03046 -5.57727,11.15454 -6.30444,27.51765 -15.15229,36.3655 -0.52927,0.52926 -4.39844,18.47722 -5.05076,17.17259 -8.16589,-16.33179 5.81477,-44.17499 0,-61.61931 -4.07106,-12.21318 -11.47775,-19.00755 -19.1929,-29.29442 -4.61666,-6.15555 -9.11336,-13.13198 -17.17259,-13.13198 z"
  })
  svg.append(path6);
  animateAndDraw(path6)

  var path7 = makeSVG('path', {
    stroke: color,
    'stroke-width': strokeWidth,
    'fill': 'none',
    d: "m 428.30468,342.22494 c -1.01404,-3.04211 -3.12011,-49.58713 11.11168,-35.35534 5.89837,5.89838 -13.74688,46.62951 -20.20305,53.53809 9.32021,5.50279 16.78034,-4.65852 23.2335,-11.11168 17.16394,-17.16393 31.43719,-49.47298 1.01016,-55.55839 -3.73582,-0.74716 -12.94837,-5.14257 -17.1726,-3.03046 -4.40294,2.20148 -16.62593,46.00353 -10.10152,52.52794 3.80845,3.80845 7.08703,7.08703 10.10152,10.10152"
  })
  svg.append(path7);
  animateAndDraw(path7)

  var path8 = makeSVG('path', {
    stroke: color,
    'stroke-width': strokeWidth,
    'fill': 'none',
    d: "m 440.42651,350.30616 c 36.3199,3.78152 40.4061,-27.00231 40.4061,-55.55839 0,-2.12958 4.55507,0.51446 6.06092,2.02031 3.00542,3.00542 4.60724,-2.46382 6.06091,-1.01015 2.16715,2.16715 4.04061,33.7718 4.04061,39.39595"
  })
  svg.append(path8);
  animateAndDraw(path8)

  var path9 = makeSVG('path', {
    stroke: color,
    'stroke-width': strokeWidth,
    'fill': 'none',
    d: "m 435.37575,357.37723 c 28.33671,1.56302 50.50762,9.75987 50.50762,-27.27412 0,-0.8302 -1.47365,13.67864 5.05077,20.20305 9.63601,9.63601 22.69301,8.69255 27.27412,-5.05076"
  })
  svg.append(path9);
  animateAndDraw(path9)

  var path10 = makeSVG('path', {
    stroke: color,
    'stroke-width': strokeWidth,
    'fill': 'none',
    d: "m 494.97475,333.13357 c 33.29356,21.2925 30.87886,-40.26081 34.34518,-41.41625 7.6839,-2.5613 14.73405,6.46143 21.21321,8.08122 8.6413,2.16032 17.17835,2.0203 26.26396,2.0203 9.46076,0 -16.32211,40.24643 -6.06091,50.50763 4.00094,4.00094 14.02605,4.04061 19.1929,4.04061 20.40511,0 20.46905,-19.93705 10.10152,-30.30458 -2.26327,-2.26327 8.8518,-2.85346 10.10153,-2.0203 12.19429,8.12952 14.36442,41.30511 0,48.48732 -11.79038,5.89519 -44.87726,3.61007 -54.54824,-6.06092 -7.10567,-7.10567 -2.5521,-33.75994 0,-41.41625 1.05409,-3.16228 10.4044,-7.07107 7.07107,-7.07107 -13.69269,0 -24.29209,-10.10152 -24.24366,-10.10152 7.04632,0 -4.36289,34.11589 -20.20305,39.39595"
  })
  svg.append(path10);
  animateAndDraw(path10)

  var path11 = makeSVG('path', {
    stroke: color,
    'stroke-width': strokeWidth,
    'fill': 'none',
    d: "m 483.86307,259.39243 c -1.75708,45.17439 45.3441,0 0,0 z"
  })
  svg.append(path11);
  animateAndDraw(path11)

  var path12 = makeSVG('path', {
    stroke: color,
    'stroke-width': strokeWidth,
    'fill': 'none',
    d: "m 270.72088,109.88986 c 38.98983,-48.438283 -65.65991,-80.045622 -65.65991,-3.03046 5.95734,23.82946 33.03875,43.55788 41.41625,68.69037 9.08926,27.26778 -1.58101,66.27464 -15.15229,88.89343 -6.566,10.94334 -19.53053,30.02413 -33.33503,32.32488 -65.52276,10.92046 -85.34586,-91.19635 -67.68022,-135.36044 1.60324,-4.0081 5.74591,-14.99479 10.10152,-17.1726 12.95314,-6.47657 43.43656,10.89387 43.43656,28.28428 0,3.38396 -0.45383,-6.7636 -1.01015,-10.10153 -1.7864,-10.7184 -5.90778,-21.85532 -7.07107,-32.32488 -2.9892,-26.90284 -46.29268,-17.93405 -61.6193,-8.08122 -19.885892,12.78378 -25.286102,39.23142 -29.294426,60.60915 -13.174595,70.2645 19.186966,167.73371 105.055866,163.64471 31.85016,-1.51667 52.43408,-23.86376 65.65991,-51.51778 14.12647,-29.53715 27.30957,-57.38372 21.21321,-90.91373 -3.49076,-19.19918 -12.23074,-36.69219 -18.18275,-54.54823 -2.98906,-8.96718 -14.88284,-15.62356 -19.1929,-24.24366 -2.61894,-5.23789 -4.77033,-33.615466 0,-38.385801 12.86512,-12.86512 36.92507,7.625131 31.31473,23.233511 z"
  })
  svg.append(path12);
  animateAndDraw(path12)

}

function animateAndDraw(path) {
  var length = path.getTotalLength();
  // Clear any previous transition
  path.style.transition = path.style.WebkitTransition = 'none';
  // Set up the starting positions
  path.style.strokeDasharray = length + ' ' + length;
  path.style.strokeDashoffset = length;
  // Trigger a layout so styles are calculated & the browser
  // picks up the starting position before animating
  path.getBoundingClientRect();
  // Define our transition
  path.style.transition = path.style.WebkitTransition =
    'stroke-dashoffset 6s';
  // Go!
  path.style.strokeDashoffset = '0';
}

function startDrawing() {
  drawName()
}