<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.