MichalZalecki/draw-svg-stroke.html

## draw-svg-stroke.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>Draw SVG stroke</title>
        <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css"/>
        <style>
            .content {
               max-width: 800px;
               margin: 0 auto;
               padding: 0 10px;
               text-align: center;
            }

            svg {
                width: 200px;
                height: 200px;
                fill: #00A9F7;
                stroke: #0052A5;
                stroke-width: 4;
            }
        </style>
    </head>
    <body>

        <div class="content">
            <h1>Draw SVG stroke</h1>

            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
                <path data-drawable-path d="M64.025 31.859a32.013 32.013 0 1 1-64.025 0 32.013 32.013 0 1 1 64.025 0z" transform="matrix(.937 0 0 .937 2 2.144)" />
            </svg>
        </div>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/velocity/0.7.0/jquery.velocity.min.js"></script>
        <script>
            $('[data-drawable-path]').each(function (index, elem) {
                $path = $(this);
                $path
                    .css('cursor', 'pointer')
                    .attr({
                        'stroke-dasharray' : $path.get(0).getTotalLength(),
                        'stroke-dashoffset' : $path.get(0).getTotalLength()
                    })
                    .on({'mouseenter': function () {
                        $path.velocity({
                            'stroke-dashoffset': 0
                        });
                    }, 'mouseleave': function () {
                        $path.velocity({
                            'stroke-dashoffset': $path.get(0).getTotalLength()
                        });
                    }});
            });
        </script>
    </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>Draw SVG stroke</title>
	<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css"/>
	<style>
	.content {
	max-width: 800px;
	margin: 0 auto;
	padding: 0 10px;
	text-align: center;
	}

	svg {
	width: 200px;
	height: 200px;
	fill: #00A9F7;
	stroke: #0052A5;
	stroke-width: 4;
	}
	</style>
	</head>
	<body>

	<div class="content">
	<h1>Draw SVG stroke</h1>

	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
	<path data-drawable-path d="M64.025 31.859a32.013 32.013 0 1 1-64.025 0 32.013 32.013 0 1 1 64.025 0z" transform="matrix(.937 0 0 .937 2 2.144)" />
	</svg>
	</div>

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/velocity/0.7.0/jquery.velocity.min.js"></script>
	<script>
	$('[data-drawable-path]').each(function (index, elem) {
	$path = $(this);
	$path
	.css('cursor', 'pointer')
	.attr({
	'stroke-dasharray' : $path.get(0).getTotalLength(),
	'stroke-dashoffset' : $path.get(0).getTotalLength()
	})
	.on({'mouseenter': function () {
	$path.velocity({
	'stroke-dashoffset': 0
	});
	}, 'mouseleave': function () {
	$path.velocity({
	'stroke-dashoffset': $path.get(0).getTotalLength()
	});
	}});
	});
	</script>
	</body>
	</html>