SVG Player Controls

Play, Pause, Restart, Check, Modified, Download

by Spencer Smith

HTML

<!--<svg height="30" width="30">
  <rect height="30" width="30" style="fill:#000;"/>
</svg> -->

<p>Play</p>
<svg height="30" width="30">
	<!--<path d="M2 2 H28 V28 H2 Z" stroke="red" fill="none" /> -->
  <polygon points="5,0 25,15 5,30"/>
</svg>

<p>Pause</p>
<svg height="30" width="30">
  <rect height="30" width="8" x="3"/>
  <rect height="30" width="8" x="17"/>
</svg>

<p>Restart</p>
<svg height="30" width="30">
	<defs>
		<mask id="m">
			<rect height="30" width="30" fill="white" />
			<circle cx="15" cy="15" r="7" fill="black" />
			<polygon points="0,15 15,15 0,26" fill="black"/>
		</mask>
	</defs>
  <circle cx="15" cy="15" r="13" mask="url(#m)" />
  <rect height="10" width="5" y="3" fill=""/>
  <rect height="5" width="13" y="12" fill=""/>
</svg>

<p>Check</p>
<svg height="30" width="30">
	<path d="M3 17 L12 24 L26 6" stroke="black" fill="none" stroke-width="6" />
</svg>

<p>Modified</p>
<svg height="30" width="30">
	<circle cx="5" cy="15" r="3"/>
	<circle cx="25" cy="15" r="3" />
	<circle cx="15" cy="15" r="3" />
</svg>

<p>Download</p>

<svg height="30" width="30">
	<rect height="4" width="26" x="2" y="24" />
	<rect height="8" width="4" x="2" y="18" />
	<rect height="8" width="4" x="24" y="18" />
	<path d="M15 2 V18" stroke="black" stroke-width="4" />
	<path d="M22 12 L15 19 L8 12" stroke="black" stroke-width="4" fill="none" />
</svg>

<p>Star</p>

<svg height="30" width="30">
	<polygon points="15,2 24.5,28 2,11 28,11 5.5,28" fill="black"/>
</svg>

CSS

body{
	font-family: Helvetica;
	background: white;
	}
svg{
  //background-color: whitesmoke;
  //opacity: .5;
	opacity: 1;
  transition: opacity .1s;
	//cursor: pointer;
	padding-bottom: 20px;
	border-bottom: 6px solid lightgray;
}
svg:hover {
  //opacity: .7;
}

JavaScript

window.scrollTo(0,document.body.scrollHeight);