kirjavascript/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>stroke dash hax with Snap.svg.js</title>
</head>
<body>
  <svg></svg>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"></script>
<script>
    var yep = Snap('svg');
    Snap.load('yep.svg', d => {
        yep
            .attr({
                viewBox:"-5, -5, 205, 120"
            })

        d.selectAll('*').forEach(p => yep.append(p))

        // emulates line drawing by using some stroke-dash hax
        ~function dasher(obj,i) {

            var path = obj[i];
            var len = path.getTotalLength();
            return path.attr({
                strokeWidth:3,
                strokeDasharray:len,
                strokeDashoffset:len
            })
            .animate({strokeDashoffset:0},len,mina.linear,e => {
                ++i<obj.length && dasher(obj,i)
            })

        } (yep.selectAll("path"),0)

    })
</script>
</html>

## yep.svg
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="197.74533"
   height="107.76883"
   viewBox="0 0 197.74533 107.76883"
   id="svg3400"
   version="1.1"
   inkscape:version="0.91 r"
   sodipodi:docname="yep.svg">
  <path
     style="fill:none;stroke:#e96025;stroke-width:0"
     d="m 20.501485,106.78983 c -2.777,-1.394 -5.3676,-4.4792 -5.3726,-6.398 -0.002,-0.615401 0.933,-2.846001 3.0908,-7.375001 7.7486,-16.265 7.719,-16.1972 6.83,-15.648 -8.9066,5.5044 -17.1728,4.286 -22.3924,-3.3 -1.67120002,-2.4292 -2.11720002,-3.7886 -2.22900002,-6.795 -0.084,-2.2428 -0.002,-3.142 0.4406,-4.875 1.75160002,-6.8534 6.72480002,-15.2672 21.50060002,-36.375 6.782,-9.688 10.0068,-15.0914 10.0068,-16.7656001 0,-2.7674 -4.3984,-0.8932 -9.3086,3.9660001 -6.2496,6.1852 -11.2694,14.1654 -15.576,24.7628 -1.347,3.314 -1.85,3.8274 -3.076,3.1424 -0.9092,-0.508 -1.942,-2.4908 -2.4324,-4.6704 -0.5864,-2.6064 -0.4048,-7.3446 0.366,-9.56 5.1612,-14.8258 17.272,-25.8358001 27.7032,-25.1850001 3.8568,0.2406 6.2892,1.961 8.178,5.784 1.2,2.428 1.738,4.9984001 1.524,7.2760001 -0.4686,4.9844 -3.343,10.008 -17.882,31.25 -7.5864,11.084 -10.8668,16.3764 -12.4312,20.0554 -1.598,3.7576 -1.7248,6.034 -0.4154,7.447 0.5812,0.6272 0.7544,0.6764 1.9446,0.5536 5.4136,-0.5586 15.8092,-9.932 25.5114,-23.003 4.1996,-5.6574 9.7354,-14.4314 27.0734,-42.9090001 2.0446,-3.358 4.0096,-6.324 4.367,-6.5908 0.5796,-0.4328 0.7526,-0.4508 1.6116,-0.1672 2.168,0.7154 5.1666,5.022 5.5056,7.9072 0.1436,1.2236001 0.074,1.4386001 -1.2926,4.0000001 -0.7944,1.4888 -3.1512,5.688 -5.2374,9.332 -15.7848,27.5696 -31.4134,56.7776 -40.1496,75.0348 -2.195,4.587201 -4.1334,8.621401 -4.308,8.965201 -0.458,0.904 -1.9152,0.962 -3.5506,0.141 z"
     id="path3421"
     inkscape:connector-curvature="0" />
  <path
     style="fill:none;stroke:#e96025;stroke-width:0"
     d="m 76.594085,105.22763 c -0.938,-0.582 -1.8984,-2.1794 -2.247,-3.738 -0.275,-1.2286 -0.2456,-1.505401 0.3534,-3.324001 1.3508,-4.0996 5.4246,-12.2656 9.058,-18.1572 1.7646,-2.8608 5.1176,-7.659 6.042,-8.646 l 0.6196,-0.6616 -1.2926,0.6188 c -1.774,0.849 -5.5196,1.7648 -8.035,1.9646 -5.204,0.4132 -10.3926,-1.3956 -14.438,-5.033 -2.6456,-2.378 -3.8808,-6.5544 -3.278,-11.0826 1.363,-10.244 11.386,-24.958 19.9112,-29.2308 2.5024,-1.254 5.826,-1.479 7.6346,-0.5164 2.4764,1.3176 6.464799,5.065 7.384799,6.9388 1.3692,2.788 0.7308,6.5126 -2.0634,12.0384 -3.297999,6.522 -8.359999,11.226 -14.265999,13.258 -2.7304,0.9396 -4.7648,0.5612 -7.5076,-1.396 l -1.596,-1.1388 -0.238,0.625 c -0.547,1.4392 -0.8272,4.749 -0.5252,6.204 0.5474,2.6366 1.8434,3.5196 5.14,3.5016 7.1892,-0.0392 16.9668,-6.7688 24.721995,-17.015 1.7928,-2.3686 2.0134,-2.5732 2.618,-2.4296 0.363,0.086 0.7892,0.1814 0.9466,0.2114 0.1576,0.03 3.399,-4.4168 7.2032,-9.882 4.7906,-6.8824 7.0876,-9.9796 7.4732,-10.0764 0.722,-0.1812 1.7546,0.2214 2.9052,1.1326 l 0.9212,0.7296 1.6052,-0.506 c 2.266,-0.714 5.6024,-0.7166 7.5884,-0.005 3.3136,1.187 6.8676,4.044 8.066,6.484 0.636,1.2952 0.698,1.6604 0.67,3.928 -0.026,2.08 -0.162,2.8908 -0.81,4.8264 -0.924,2.762 -2.974,6.9148 -5.1134,10.3588 -4.9448,7.961 -13.6632,15.4268 -20.376,17.448 -1.4706,0.4432 -2.256,0.53 -4,0.4414 -2.772,-0.1406 -4.5208,-0.9248 -6.2154,-2.7872 l -1.1944,-1.3124 -4.0652,6.5812 c -7.173995,11.614 -11.456995,18.0766 -16.034795,24.194 -2.4656,3.295201 -3.412,4.359201 -4.6132,5.187601 -1.1308,0.78 -2,0.8584 -2.954,0.2664 z"
     id="path3419"
     inkscape:connector-curvature="0" />
  <path
     style="fill:none;stroke:#e96025;stroke-width:0"
     d="m 109.43528,67.139629 c -2.395,-0.962 -0.1268,-7.2936 5.8184,-16.2408 5.925,-8.9168 13.546,-16.468 16.6466,-16.4946 3.1706,-0.0268 1.3876,6.672 -4.169,15.6614 -7.0996,11.4856 -14.6554,18.5368 -18.296,17.074 z"
     id="path3417"
     inkscape:connector-curvature="0" />
  <path
     style="fill:none;stroke:#e96025;stroke-width:0"
     d="m 74.938485,54.483229 c -0.172,-0.0694 -0.3124,-0.502 -0.3124,-0.962 0.99617,-2.56448 12.53707,-21.72365 16.3992,-18.8524 0.618,0.513 0.262,2.0064 -1.1568,4.855 -1.7964,3.607 -4.178,6.807 -7.742,10.403 -3.8004,3.8348 -5.8134,5.111 -7.1876,4.5564 z"
     id="path3415"
     inkscape:connector-curvature="0" />
  <path
     style="fill:none;stroke:#e96025;stroke-width:0"
     d="m 147.50108,82.288029 c -2.9036,-1.0556 -3.9612,-5.0194 -2.2514,-8.4396 0.8046,-1.61 1.652,-2.5386 3.088,-3.3854 3.0386,-1.791 6.5694,-0.8388 7.6808,2.0712 0.5652,1.48 0.3914,4.08 -0.3728,5.5764 -1.7,3.329 -5.3406,5.196 -8.1446,4.177 z"
     id="path3413"
     inkscape:connector-curvature="0" />
  <path
     style="fill:none;stroke:#e96025;stroke-width:0"
     d="m 159.11248,63.943029 c -1.796,-1.14 -3.2906,-3.4436 -3.608,-5.5606 -0.1234,-0.8214 -0.0392,-1.5024 0.3076,-2.4944 0.4668,-1.3348 33.0494,-54.90280008 33.64,-55.30600008 1.0954,-0.748 4.2414,0.93359998 5.9296,3.16959998 1.8326,2.4276 2.39,4.726 1.6486,6.8028001 -0.6156,1.7254 -9.837,16.3006 -20.733,32.771 -3.3846,5.116 -7.862,11.9224 -9.95,15.125 -2.0874,3.2026 -3.9194,5.9056 -4.0708,6.0066 -0.616,0.4112 -2.0808,0.1732 -3.1636,-0.514 z"
     id="path3402"
     inkscape:connector-curvature="0" />
</svg>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<title>stroke dash hax with Snap.svg.js</title>
	</head>
	<body>
	<svg></svg>
	</body>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"></script>
	<script>
	var yep = Snap('svg');
	Snap.load('yep.svg', d => {
	yep
	.attr({
	viewBox:"-5, -5, 205, 120"
	})

	d.selectAll('*').forEach(p => yep.append(p))

	// emulates line drawing by using some stroke-dash hax
	~function dasher(obj,i) {

	var path = obj[i];
	var len = path.getTotalLength();
	return path.attr({
	strokeWidth:3,
	strokeDasharray:len,
	strokeDashoffset:len
	})
	.animate({strokeDashoffset:0},len,mina.linear,e => {
	++i<obj.length && dasher(obj,i)
	})

	} (yep.selectAll("path"),0)

	})
	</script>
	</html>
	<?xml version="1.0" encoding="UTF-8" standalone="no"?>
	<svg
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:cc="http://creativecommons.org/ns#"
	xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
	xmlns:svg="http://www.w3.org/2000/svg"
	xmlns="http://www.w3.org/2000/svg"
	xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
	xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
	width="197.74533"
	height="107.76883"
	viewBox="0 0 197.74533 107.76883"
	id="svg3400"
	version="1.1"
	inkscape:version="0.91 r"
	sodipodi:docname="yep.svg">
	<path
	style="fill:none;stroke:#e96025;stroke-width:0"
	d="m 20.501485,106.78983 c -2.777,-1.394 -5.3676,-4.4792 -5.3726,-6.398 -0.002,-0.615401 0.933,-2.846001 3.0908,-7.375001 7.7486,-16.265 7.719,-16.1972 6.83,-15.648 -8.9066,5.5044 -17.1728,4.286 -22.3924,-3.3 -1.67120002,-2.4292 -2.11720002,-3.7886 -2.22900002,-6.795 -0.084,-2.2428 -0.002,-3.142 0.4406,-4.875 1.75160002,-6.8534 6.72480002,-15.2672 21.50060002,-36.375 6.782,-9.688 10.0068,-15.0914 10.0068,-16.7656001 0,-2.7674 -4.3984,-0.8932 -9.3086,3.9660001 -6.2496,6.1852 -11.2694,14.1654 -15.576,24.7628 -1.347,3.314 -1.85,3.8274 -3.076,3.1424 -0.9092,-0.508 -1.942,-2.4908 -2.4324,-4.6704 -0.5864,-2.6064 -0.4048,-7.3446 0.366,-9.56 5.1612,-14.8258 17.272,-25.8358001 27.7032,-25.1850001 3.8568,0.2406 6.2892,1.961 8.178,5.784 1.2,2.428 1.738,4.9984001 1.524,7.2760001 -0.4686,4.9844 -3.343,10.008 -17.882,31.25 -7.5864,11.084 -10.8668,16.3764 -12.4312,20.0554 -1.598,3.7576 -1.7248,6.034 -0.4154,7.447 0.5812,0.6272 0.7544,0.6764 1.9446,0.5536 5.4136,-0.5586 15.8092,-9.932 25.5114,-23.003 4.1996,-5.6574 9.7354,-14.4314 27.0734,-42.9090001 2.0446,-3.358 4.0096,-6.324 4.367,-6.5908 0.5796,-0.4328 0.7526,-0.4508 1.6116,-0.1672 2.168,0.7154 5.1666,5.022 5.5056,7.9072 0.1436,1.2236001 0.074,1.4386001 -1.2926,4.0000001 -0.7944,1.4888 -3.1512,5.688 -5.2374,9.332 -15.7848,27.5696 -31.4134,56.7776 -40.1496,75.0348 -2.195,4.587201 -4.1334,8.621401 -4.308,8.965201 -0.458,0.904 -1.9152,0.962 -3.5506,0.141 z"
	id="path3421"
	inkscape:connector-curvature="0" />
	<path
	style="fill:none;stroke:#e96025;stroke-width:0"
	d="m 76.594085,105.22763 c -0.938,-0.582 -1.8984,-2.1794 -2.247,-3.738 -0.275,-1.2286 -0.2456,-1.505401 0.3534,-3.324001 1.3508,-4.0996 5.4246,-12.2656 9.058,-18.1572 1.7646,-2.8608 5.1176,-7.659 6.042,-8.646 l 0.6196,-0.6616 -1.2926,0.6188 c -1.774,0.849 -5.5196,1.7648 -8.035,1.9646 -5.204,0.4132 -10.3926,-1.3956 -14.438,-5.033 -2.6456,-2.378 -3.8808,-6.5544 -3.278,-11.0826 1.363,-10.244 11.386,-24.958 19.9112,-29.2308 2.5024,-1.254 5.826,-1.479 7.6346,-0.5164 2.4764,1.3176 6.464799,5.065 7.384799,6.9388 1.3692,2.788 0.7308,6.5126 -2.0634,12.0384 -3.297999,6.522 -8.359999,11.226 -14.265999,13.258 -2.7304,0.9396 -4.7648,0.5612 -7.5076,-1.396 l -1.596,-1.1388 -0.238,0.625 c -0.547,1.4392 -0.8272,4.749 -0.5252,6.204 0.5474,2.6366 1.8434,3.5196 5.14,3.5016 7.1892,-0.0392 16.9668,-6.7688 24.721995,-17.015 1.7928,-2.3686 2.0134,-2.5732 2.618,-2.4296 0.363,0.086 0.7892,0.1814 0.9466,0.2114 0.1576,0.03 3.399,-4.4168 7.2032,-9.882 4.7906,-6.8824 7.0876,-9.9796 7.4732,-10.0764 0.722,-0.1812 1.7546,0.2214 2.9052,1.1326 l 0.9212,0.7296 1.6052,-0.506 c 2.266,-0.714 5.6024,-0.7166 7.5884,-0.005 3.3136,1.187 6.8676,4.044 8.066,6.484 0.636,1.2952 0.698,1.6604 0.67,3.928 -0.026,2.08 -0.162,2.8908 -0.81,4.8264 -0.924,2.762 -2.974,6.9148 -5.1134,10.3588 -4.9448,7.961 -13.6632,15.4268 -20.376,17.448 -1.4706,0.4432 -2.256,0.53 -4,0.4414 -2.772,-0.1406 -4.5208,-0.9248 -6.2154,-2.7872 l -1.1944,-1.3124 -4.0652,6.5812 c -7.173995,11.614 -11.456995,18.0766 -16.034795,24.194 -2.4656,3.295201 -3.412,4.359201 -4.6132,5.187601 -1.1308,0.78 -2,0.8584 -2.954,0.2664 z"
	id="path3419"
	inkscape:connector-curvature="0" />
	<path
	style="fill:none;stroke:#e96025;stroke-width:0"
	d="m 109.43528,67.139629 c -2.395,-0.962 -0.1268,-7.2936 5.8184,-16.2408 5.925,-8.9168 13.546,-16.468 16.6466,-16.4946 3.1706,-0.0268 1.3876,6.672 -4.169,15.6614 -7.0996,11.4856 -14.6554,18.5368 -18.296,17.074 z"
	id="path3417"
	inkscape:connector-curvature="0" />
	<path
	style="fill:none;stroke:#e96025;stroke-width:0"
	d="m 74.938485,54.483229 c -0.172,-0.0694 -0.3124,-0.502 -0.3124,-0.962 0.99617,-2.56448 12.53707,-21.72365 16.3992,-18.8524 0.618,0.513 0.262,2.0064 -1.1568,4.855 -1.7964,3.607 -4.178,6.807 -7.742,10.403 -3.8004,3.8348 -5.8134,5.111 -7.1876,4.5564 z"
	id="path3415"
	inkscape:connector-curvature="0" />
	<path
	style="fill:none;stroke:#e96025;stroke-width:0"
	d="m 147.50108,82.288029 c -2.9036,-1.0556 -3.9612,-5.0194 -2.2514,-8.4396 0.8046,-1.61 1.652,-2.5386 3.088,-3.3854 3.0386,-1.791 6.5694,-0.8388 7.6808,2.0712 0.5652,1.48 0.3914,4.08 -0.3728,5.5764 -1.7,3.329 -5.3406,5.196 -8.1446,4.177 z"
	id="path3413"
	inkscape:connector-curvature="0" />
	<path
	style="fill:none;stroke:#e96025;stroke-width:0"
	d="m 159.11248,63.943029 c -1.796,-1.14 -3.2906,-3.4436 -3.608,-5.5606 -0.1234,-0.8214 -0.0392,-1.5024 0.3076,-2.4944 0.4668,-1.3348 33.0494,-54.90280008 33.64,-55.30600008 1.0954,-0.748 4.2414,0.93359998 5.9296,3.16959998 1.8326,2.4276 2.39,4.726 1.6486,6.8028001 -0.6156,1.7254 -9.837,16.3006 -20.733,32.771 -3.3846,5.116 -7.862,11.9224 -9.95,15.125 -2.0874,3.2026 -3.9194,5.9056 -4.0708,6.0066 -0.616,0.4112 -2.0808,0.1732 -3.1636,-0.514 z"
	id="path3402"
	inkscape:connector-curvature="0" />
	</svg>