<html>

 <body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<svg width="104" height="104" id='pause'>
	<circle id="circle" cx="51" cy="51" r="50" stroke-dasharray="314" stroke-dashoffset="0" style="stroke-width:2px;stroke:white;" />
	<line id='line1' x1="38" y1="30" x2="38" y2="70" style="stroke-width:4px;stroke:white;stroke-linecap: round;" />
	<path id='line2' d="M 66 30 L 66 50 L 66 70" rx="10" ry="10" style="stroke-width:4px;stroke:white;fill:white;stroke-linejoin: round;stroke-linecap: round;">
		<animate
			attributeName="d"
			dur="300ms"
			from="M 66 30 L 66 50 L 66 70"
			to="M 38 30 L 70 50 L 38 70"
			begin="indefinite"
			fill="freeze"
			id="from_pause_to_play"
		/>
	</path>
	<animate
		xlink:href="#line2"
		attributeName="d"
		dur="300ms"
		from="M 38 30 L 70 50 L 38 70"
		to="M 66 30 L 66 50 L 66 70"
		fill="freeze"
		id="from_play_to_pause"
		begin="indefinite"
	/>

</body>
</html>
html, body {
	height: 100%;
	width: 100%;
	background: black;
}
/* Just positioning here */
svg {
	padding-top: 10vh;
	margin: 0px auto;
	display: block;
}
/* This animates the circle when it switches to play */
#circle {
	transition: stroke-dashoffset 300ms ease-in;
	stroke-dashoffset: 0;
	fill: none;
}
#circle.play {
	stroke-dashoffset: 314;
}
$(document).ready(function() {
	var state = "paused";
	$('#pause').on('click', function() {
		if(state == 'paused') {
			state = "playing";
			$("#circle").attr("class", "play");
			$("#from_pause_to_play")[0].beginElement();
		} else {
			state = "paused";
			$("#circle").attr("class", "");
			$("#from_play_to_pause")[0].beginElement();
		}
	});
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js