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:"0,0,1040,600"
            })

        yep.append(d.select("defs"));
        d.selectAll('.path').forEach(p => yep.append(p))

        dasher(yep.select("#y"),50,() => {
            dasher(yep.select("#e"),45,() => {
                dasher(yep.select("#p"),45,() => {
                    dasher(yep.select("#ex1"),60,() => {
                        dasher(yep.select("#ex2"),55,() => {

                            // when you see nesting like this you know it's time to refactor

                        });
                    });
                });
            });
        });

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

            var path = obj;
            var len = path.getTotalLength();
            return path.attr({
                strokeWidth:w,
                strokeDasharray:len,
                strokeDashoffset:len
            })
            .animate({strokeDashoffset:0},len/3,mina.linear,callback)
        }

    })
</script>
</html>

## yep.svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1040 598.75" height="598.75" width="1040">
    <defs>
        <clipPath id="wat">
            <path d="M132.28 548.63c-8.407-4.178-21.903-18.01-23.822-24.414-1.562-5.213-1.503-5.405 7.503-24.318 29.126-61.165 46.32-98.335 46.32-100.137 0-3.142-4.253-2.488-11.064 1.702-30.842 18.978-61.834 21.542-84.42 6.986-11.986-7.724-25.06-23.978-30.26-37.614-3.728-9.78-3.15-30.336 1.265-44.977 9.27-30.746 34.01-72.16 98.19-164.384 57.31-82.354 65.915-99.368 53.496-105.79-6.515-3.37-16.148-.568-29.503 8.582-7.698 5.273-29.005 25.994-38.18 37.13-22.226 26.973-44.725 66.084-59.36 103.19-2.984 7.56-6.253 14.593-7.264 15.624-1.63 1.66-2.262 1.376-5.547-2.5-6.38-7.532-9.234-19.355-9.2-38.126.026-14.514.4-17.318 3.514-26.25 5.36-15.38 18.768-41.536 28.625-55.843 15.526-22.534 41.434-46.223 61.582-56.306 16.53-8.274 35.34-12.043 48.333-9.687 14.227 2.58 22.165 8.23 29.93 21.3 7.058 11.88 9.862 21.622 9.862 34.267 0 25.97-11.88 47.047-94.46 167.593-48.853 71.316-63.04 97.942-63.04 118.307 0 13.783 5.47 20.37 16.753 20.173 27.924-.485 84.715-51.296 135.395-121.14 21.156-29.154 48.602-72.753 125.058-198.663 13.36-22 25.308-41.058 26.553-42.352 3.356-3.49 8.335-1.684 15.074 5.467 6.59 6.993 12.824 18.047 14.956 26.522l1.48 5.887-8.1 15.392c-4.454 8.466-15.672 28.598-24.928 44.737-79.875 139.282-174.758 317.83-215.706 405.906-8.655 18.618-8.88 18.78-19.037 13.733zm281.25-7.51c-4.31-2.118-10-13.747-10-20.436 0-6.785 4.477-19.25 14.416-40.127 16.25-34.136 31.433-60.132 51.4-88.01 13.02-18.177 16.45-24.838 12.793-24.838-.765 0-6.662 1.974-13.106 4.387-16.134 6.043-27.6 8.28-43.005 8.39-20.187.142-36.176-5.01-53.17-17.137-16.913-12.07-22.958-22.962-24.02-43.28-1.047-20.008 3.148-36.623 16.012-63.43 12.08-25.17 27.156-46.958 46.484-67.175 24.38-25.502 46.682-36.606 64.102-31.915 10.386 2.796 34.567 23.545 39.89 34.227 6.145 12.33 3.5 29.26-8.324 53.29-16.764 34.072-41.45 57.698-70.853 67.815-12.775 4.396-22.436 2.052-36.022-8.74-10.1-8.022-11.276-7.31-14.614 8.85-5.174 25.048-.04 40.978 14.61 45.328 35.994 10.69 97.384-26.265 140.66-84.674 4.458-6.015 8.55-10.937 9.094-10.937.543 0 2.44.55 4.217 1.226 2.544.968 3.688.766 5.394-.953 1.19-1.2 17.306-23.97 35.814-50.603 27.233-39.187 34.182-48.42 36.437-48.42 1.534 0 5.793 2.257 9.466 5.017 4.2 3.155 7.377 4.705 8.563 4.177 5.613-2.503 19.102-5.31 25.815-5.373 14.733-.137 31.196 7.387 45.707 20.89 9.202 8.564 12.21 15.768 12.225 29.287.015 13.625-3.54 25.66-13.772 46.627-14.385 29.474-28.64 49.264-51.413 71.37-29.332 28.473-57.88 44.255-80.052 44.255-12.53 0-26.378-6.874-32.946-16.352-5.932-8.56-6.93-7.74-23.33 19.18C494.63 444.39 459.3 497.41 438.018 524.07c-13.442 16.842-18.186 20.145-24.488 17.05zM591.89 354.025c24.482-11.115 68.732-65.78 91.625-113.192 14.534-30.1 17.02-46.686 7.586-50.594-8.46-3.504-20.696 3.97-42.656 26.05-18.096 18.197-28.072 30.403-43.743 53.524-19.226 28.366-31.48 52.543-35.036 69.12-1.623 7.564.075 14.02 4.213 16.017 4.33 2.09 12.27 1.683 18.012-.924zm-172.74-66.777c29.08-19.31 70.427-77.726 66.392-93.803-1.162-4.628-7.226-4.37-15.208.648-7.88 4.954-30.04 27.326-40.72 41.114-24.393 31.487-33.894 50.34-28.275 56.1 2.532 2.597 10.534.772 17.813-4.06zM768.76 426.47c-8.795-2.076-14.414-10.607-14.415-21.886-.002-18.867 16.417-35.68 33.263-34.06 7.552.725 11.96 3.82 15.608 10.96 5.197 10.17 2.48 23.404-6.962 33.906-8.432 9.378-18.133 13.287-27.494 11.08zm56.335-92.426c-5.925-4.292-10.723-10.26-13.402-16.675-2.432-5.82-2.463-16.225-.062-20.867C815.776 288.49 975.163 28.16 977.236 26.02c2.18-2.25 2.397-2.243 7.998.234 11.098 4.91 22.892 19.855 25.054 31.75.466 2.567.27 6.818-.438 9.445-2.272 8.43-44.936 75.785-122.103 192.76-24.717 37.468-46.23 70.233-47.806 72.81-3.602 5.894-7.73 6.18-14.845 1.024z" fill="#e85f24"/>
        </clipPath>
    </defs>

<path class="path" clip-path="url(#wat)" id="y" d="M50.844 227.123s-1.642-43.703 5.547-65.635c7.19-21.933 27.304-39.415 37.903-61.938 10.6-22.523 31.84-33.5 47.147-41.6 15.307-8.1 28.51-12.407 39.75-10.17 11.24 2.24 17.84 6.738 22.188 16.64 4.35 9.904 6.206 8.205-3.698 36.98-9.904 28.773-73.956 120.177-77.653 122.95-3.698 2.773-73.03 114.63-76.73 115.556-3.697.924.443 39.374 10.17 51.768 9.727 12.395 21.21 17.34 37.902 17.565 16.69.224 34.148-11.04 53.617-24.42 19.47-13.378 22.72-22.15 58.24-58.32 35.52-36.168 84.18-127.61 114.63-175.18 30.45-47.57 86.492-141.035 51.77-77.654-34.723 63.38-115.4 200.634-159.467 286.115-44.067 85.482-56.1 116.766-93.83 189.05" fill="none" stroke="#e85f24" stroke-width="0" stroke-linecap="round"/>
<path class="path" clip-path="url(#wat)" id="e" d="M419.54 298.08s-10.163 10.348 6.47 6.472c16.634-3.875 40.616-28.888 53.618-48.995 13.003-20.107 29.398-51.912 22.187-67.485-7.21-15.573-14.988-12.654-28.196-11.786-30.425 1.998-43.356 26.978-69.334 56.39-9.172 10.385-36.64 62.3-38.365 82.97-1.724 20.67 1.564 22.354 8.32 32.355 6.76 10.002 13.24 19.148 31.432 23.112 18.193 3.965 39.1-9.272 66.792-23.804 27.69-14.532 39.007-22.917 69.333-67.253" fill="none" stroke="#e85f24" stroke-width="0" stroke-linecap="round"/>
<path class="path" clip-path="url(#wat)" id="p" d="M632.763 185.624s-51.853 91.082-90.208 149.693C504.2 393.927 431.535 504.687 419.663 519c-11.873 14.315 22.225-49.764 58.178-107.203 35.953-57.44 90.99-154.705 138.58-186.952 47.592-32.248 55.528-45.497 68.638-43.797 13.11 1.7 28.587-5.932 32.684 18.303 4.096 24.236-18.137 62.257-34.645 88.902-16.51 26.645-58.178 61.446-64.715 67.982-6.537 6.537-34.715 12.882-46.41 10.46-11.698-2.423-14.382-32.03-14.382-32.03" fill="none" stroke="#e85f24" stroke-width="0" stroke-linecap="round"/>
<path class="path" clip-path="url(#wat)" id="ex1" d="M988.23 53.328C810.74 337.132 822.757 323.266 822.757 323.266" fill="none" stroke="#e85f24" stroke-width="0" stroke-linecap="round"/>
<path class="path" clip-path="url(#wat)" id="ex2" d="M784.424 395.26l-11.093 14.79" fill="none" stroke="#e85f24" stroke-width="0" stroke-linecap="round"/></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:"0,0,1040,600"
	})

	yep.append(d.select("defs"));
	d.selectAll('.path').forEach(p => yep.append(p))

	dasher(yep.select("#y"),50,() => {
	dasher(yep.select("#e"),45,() => {
	dasher(yep.select("#p"),45,() => {
	dasher(yep.select("#ex1"),60,() => {
	dasher(yep.select("#ex2"),55,() => {

	// when you see nesting like this you know it's time to refactor

	});
	});
	});
	});
	});

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

	var path = obj;
	var len = path.getTotalLength();
	return path.attr({
	strokeWidth:w,
	strokeDasharray:len,
	strokeDashoffset:len
	})
	.animate({strokeDashoffset:0},len/3,mina.linear,callback)
	}

	})
	</script>
	</html>
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1040 598.75" height="598.75" width="1040">
	<defs>
	<clipPath id="wat">
	<path d="M132.28 548.63c-8.407-4.178-21.903-18.01-23.822-24.414-1.562-5.213-1.503-5.405 7.503-24.318 29.126-61.165 46.32-98.335 46.32-100.137 0-3.142-4.253-2.488-11.064 1.702-30.842 18.978-61.834 21.542-84.42 6.986-11.986-7.724-25.06-23.978-30.26-37.614-3.728-9.78-3.15-30.336 1.265-44.977 9.27-30.746 34.01-72.16 98.19-164.384 57.31-82.354 65.915-99.368 53.496-105.79-6.515-3.37-16.148-.568-29.503 8.582-7.698 5.273-29.005 25.994-38.18 37.13-22.226 26.973-44.725 66.084-59.36 103.19-2.984 7.56-6.253 14.593-7.264 15.624-1.63 1.66-2.262 1.376-5.547-2.5-6.38-7.532-9.234-19.355-9.2-38.126.026-14.514.4-17.318 3.514-26.25 5.36-15.38 18.768-41.536 28.625-55.843 15.526-22.534 41.434-46.223 61.582-56.306 16.53-8.274 35.34-12.043 48.333-9.687 14.227 2.58 22.165 8.23 29.93 21.3 7.058 11.88 9.862 21.622 9.862 34.267 0 25.97-11.88 47.047-94.46 167.593-48.853 71.316-63.04 97.942-63.04 118.307 0 13.783 5.47 20.37 16.753 20.173 27.924-.485 84.715-51.296 135.395-121.14 21.156-29.154 48.602-72.753 125.058-198.663 13.36-22 25.308-41.058 26.553-42.352 3.356-3.49 8.335-1.684 15.074 5.467 6.59 6.993 12.824 18.047 14.956 26.522l1.48 5.887-8.1 15.392c-4.454 8.466-15.672 28.598-24.928 44.737-79.875 139.282-174.758 317.83-215.706 405.906-8.655 18.618-8.88 18.78-19.037 13.733zm281.25-7.51c-4.31-2.118-10-13.747-10-20.436 0-6.785 4.477-19.25 14.416-40.127 16.25-34.136 31.433-60.132 51.4-88.01 13.02-18.177 16.45-24.838 12.793-24.838-.765 0-6.662 1.974-13.106 4.387-16.134 6.043-27.6 8.28-43.005 8.39-20.187.142-36.176-5.01-53.17-17.137-16.913-12.07-22.958-22.962-24.02-43.28-1.047-20.008 3.148-36.623 16.012-63.43 12.08-25.17 27.156-46.958 46.484-67.175 24.38-25.502 46.682-36.606 64.102-31.915 10.386 2.796 34.567 23.545 39.89 34.227 6.145 12.33 3.5 29.26-8.324 53.29-16.764 34.072-41.45 57.698-70.853 67.815-12.775 4.396-22.436 2.052-36.022-8.74-10.1-8.022-11.276-7.31-14.614 8.85-5.174 25.048-.04 40.978 14.61 45.328 35.994 10.69 97.384-26.265 140.66-84.674 4.458-6.015 8.55-10.937 9.094-10.937.543 0 2.44.55 4.217 1.226 2.544.968 3.688.766 5.394-.953 1.19-1.2 17.306-23.97 35.814-50.603 27.233-39.187 34.182-48.42 36.437-48.42 1.534 0 5.793 2.257 9.466 5.017 4.2 3.155 7.377 4.705 8.563 4.177 5.613-2.503 19.102-5.31 25.815-5.373 14.733-.137 31.196 7.387 45.707 20.89 9.202 8.564 12.21 15.768 12.225 29.287.015 13.625-3.54 25.66-13.772 46.627-14.385 29.474-28.64 49.264-51.413 71.37-29.332 28.473-57.88 44.255-80.052 44.255-12.53 0-26.378-6.874-32.946-16.352-5.932-8.56-6.93-7.74-23.33 19.18C494.63 444.39 459.3 497.41 438.018 524.07c-13.442 16.842-18.186 20.145-24.488 17.05zM591.89 354.025c24.482-11.115 68.732-65.78 91.625-113.192 14.534-30.1 17.02-46.686 7.586-50.594-8.46-3.504-20.696 3.97-42.656 26.05-18.096 18.197-28.072 30.403-43.743 53.524-19.226 28.366-31.48 52.543-35.036 69.12-1.623 7.564.075 14.02 4.213 16.017 4.33 2.09 12.27 1.683 18.012-.924zm-172.74-66.777c29.08-19.31 70.427-77.726 66.392-93.803-1.162-4.628-7.226-4.37-15.208.648-7.88 4.954-30.04 27.326-40.72 41.114-24.393 31.487-33.894 50.34-28.275 56.1 2.532 2.597 10.534.772 17.813-4.06zM768.76 426.47c-8.795-2.076-14.414-10.607-14.415-21.886-.002-18.867 16.417-35.68 33.263-34.06 7.552.725 11.96 3.82 15.608 10.96 5.197 10.17 2.48 23.404-6.962 33.906-8.432 9.378-18.133 13.287-27.494 11.08zm56.335-92.426c-5.925-4.292-10.723-10.26-13.402-16.675-2.432-5.82-2.463-16.225-.062-20.867C815.776 288.49 975.163 28.16 977.236 26.02c2.18-2.25 2.397-2.243 7.998.234 11.098 4.91 22.892 19.855 25.054 31.75.466 2.567.27 6.818-.438 9.445-2.272 8.43-44.936 75.785-122.103 192.76-24.717 37.468-46.23 70.233-47.806 72.81-3.602 5.894-7.73 6.18-14.845 1.024z" fill="#e85f24"/>
	</clipPath>
	</defs>

	<path class="path" clip-path="url(#wat)" id="y" d="M50.844 227.123s-1.642-43.703 5.547-65.635c7.19-21.933 27.304-39.415 37.903-61.938 10.6-22.523 31.84-33.5 47.147-41.6 15.307-8.1 28.51-12.407 39.75-10.17 11.24 2.24 17.84 6.738 22.188 16.64 4.35 9.904 6.206 8.205-3.698 36.98-9.904 28.773-73.956 120.177-77.653 122.95-3.698 2.773-73.03 114.63-76.73 115.556-3.697.924.443 39.374 10.17 51.768 9.727 12.395 21.21 17.34 37.902 17.565 16.69.224 34.148-11.04 53.617-24.42 19.47-13.378 22.72-22.15 58.24-58.32 35.52-36.168 84.18-127.61 114.63-175.18 30.45-47.57 86.492-141.035 51.77-77.654-34.723 63.38-115.4 200.634-159.467 286.115-44.067 85.482-56.1 116.766-93.83 189.05" fill="none" stroke="#e85f24" stroke-width="0" stroke-linecap="round"/>
	<path class="path" clip-path="url(#wat)" id="e" d="M419.54 298.08s-10.163 10.348 6.47 6.472c16.634-3.875 40.616-28.888 53.618-48.995 13.003-20.107 29.398-51.912 22.187-67.485-7.21-15.573-14.988-12.654-28.196-11.786-30.425 1.998-43.356 26.978-69.334 56.39-9.172 10.385-36.64 62.3-38.365 82.97-1.724 20.67 1.564 22.354 8.32 32.355 6.76 10.002 13.24 19.148 31.432 23.112 18.193 3.965 39.1-9.272 66.792-23.804 27.69-14.532 39.007-22.917 69.333-67.253" fill="none" stroke="#e85f24" stroke-width="0" stroke-linecap="round"/>
	<path class="path" clip-path="url(#wat)" id="p" d="M632.763 185.624s-51.853 91.082-90.208 149.693C504.2 393.927 431.535 504.687 419.663 519c-11.873 14.315 22.225-49.764 58.178-107.203 35.953-57.44 90.99-154.705 138.58-186.952 47.592-32.248 55.528-45.497 68.638-43.797 13.11 1.7 28.587-5.932 32.684 18.303 4.096 24.236-18.137 62.257-34.645 88.902-16.51 26.645-58.178 61.446-64.715 67.982-6.537 6.537-34.715 12.882-46.41 10.46-11.698-2.423-14.382-32.03-14.382-32.03" fill="none" stroke="#e85f24" stroke-width="0" stroke-linecap="round"/>
	<path class="path" clip-path="url(#wat)" id="ex1" d="M988.23 53.328C810.74 337.132 822.757 323.266 822.757 323.266" fill="none" stroke="#e85f24" stroke-width="0" stroke-linecap="round"/>
	<path class="path" clip-path="url(#wat)" id="ex2" d="M784.424 395.26l-11.093 14.79" fill="none" stroke="#e85f24" stroke-width="0" stroke-linecap="round"/></svg>