<div class="container">
	<svg width=200 viewBox="0 0 200 200">
		<defs>
			<linearGradient id="grad1">
				<stop stop-color="hsl(340,80%,50%)" offset="10%"></stop>
				<stop stop-color="hsl(220,80%,50%)" offset="90%"></stop>
			</linearGradient>
			<linearGradient id="grad2" gradientTransform="rotate(90)">
				<stop stop-color="hsl(200,90%,60%)" offset="30%" stop-opacity="0"></stop>
				<stop stop-color="hsl(200,90%,60%)" offset="100%"></stop>
			</linearGradient>
			<mask id="cutout"> 
				<g id="playPause" fill="white">
					<path id="triangle" d="M156.715362,95.9913355 l0,0 C161.093372,98.7578056 161.096386,103.241235 156.715362,106.00961 L47.9270891,174.753049 C43.5490787,177.51952 40,175.528459 40,170.307077 L40,31.6938681 C40,26.4719554 43.5460646,24.4795212 47.9270891,27.2478959 L156.715362,95.9913355 Z"></path>
					<path id="rectangle" style="display:none;" d="M40,81.686956 C40,78.5461369 42.2373461,76 45.0034732,76 L154.996527,76 C157.759869,76 160,78.5482476 160,81.686956 L160,120.313044 C160,123.453863 157.762654,126 154.996527,126 L45.0034732,126 C42.2401312,126 40,123.451752 40,120.313044 L40,81.686956 Z"></path>
				</g>
			</mask>
		</defs>
		<g mask="url(#cutout)">
			<rect fill="url(#grad1)" x=38 y=20 width=125 height=160></rect>
			<rect fill="url(#grad2)" x=38 y=20 width=125 height=160></rect>
		</g>
	</svg>
	<p>Play/Pause Button</p>
</div>

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400');

html, body {
	height: 100%;
	font-family: 'Open Sans', sans-serif;
}
svg {
/* 	border: 1px solid black; */
}
p {
 	font-size: 1.1em;
	font-weight: 300;
}

.container {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

var tl = new TimelineMax({ repeat: -1, yoyo: true, repeatDelay: 2 })

tl.to("#triangle", 0.2, { morphSVG:"#rectangle", ease: Power2.easeInOut });
tl.to("#rectangle", 0, { display: "block", ease: Power2.easeInOut });
tl.to("#triangle", 0.25, { y: -30, ease: Power2.easeInOut }, "a")
tl.to("#rectangle", 0.25, { y: 30, ease: Power2.easeInOut }, "a")
tl.to("#playPause", 0.25, { rotation: 90, transformOrigin: "50% 50%", ease: Power2.easeInOut }, "a")

tl.timeScale(1.2)