mattborn · January 25, 2017 14:14
diff --git a/index.html b/index.html
 <!doctype html>
 <html>
  <head>
    <title>SVG Experiment</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <svg viewBox="0 0 100 95.1">
      <g>
        <polygon points="50,0 65.5,31.3 100,36.3 75,60.7 80.9,95.1 50,78.9 19.1,95.1 25,60.7 0,36.3 34.5,31.3   "/>
      </g>
      <circle cx="50" cy="47.6" r="12.6"/>
    </svg>
    <script src="scripts.js"></script>
  </body>
 </html>
diff --git a/scripts.js b/scripts.js
diff --git a/styles.css b/styles.css
 svg {
  animation: spinner 2s linear infinite;
  fill: gray;
  width: 100px;
 }
 svg:hover { fill: purple; }
 svg circle { fill: white; }

 @keyframes spinner {
  to {transform: rotate(360deg);}
 }
	<!doctype html>
	<html>
	<head>
	<title>SVG Experiment</title>
	<link rel="stylesheet" href="styles.css">
	</head>
	<body>
	<svg viewBox="0 0 100 95.1">
	<g>
	<polygon points="50,0 65.5,31.3 100,36.3 75,60.7 80.9,95.1 50,78.9 19.1,95.1 25,60.7 0,36.3 34.5,31.3 "/>
	</g>
	<circle cx="50" cy="47.6" r="12.6"/>
	</svg>
	<script src="scripts.js"></script>
	</body>
	</html>
	svg {
	animation: spinner 2s linear infinite;
	fill: gray;
	width: 100px;
	}
	svg:hover { fill: purple; }
	svg circle { fill: white; }

	@keyframes spinner {
	to {transform: rotate(360deg);}
	}