puck3.html

<html><head>
  <style>
    body { margin:0; background-color:black; }
    svg {
      display:block; position:absolute;
      top:0%; left:0%; width:100%; height:100%;
    }
  </style>
</head><body>
  <svg width="76" height="76" viewBox="0 0 76.00 76.00">
  	<path fill="#444" fill-opacity="1" stroke-width="0.2" stroke-linejoin="round" d="M 34.8333,60.1667L 34.8333,57.3958L 41.1667,58.5833L 41.1667,60.1667L 34.8333,60.1667 Z M 31.6666,55.0209L 31.6666,52.25L 44.3333,53.8334L 44.3333,56.6042L 31.6666,55.0209 Z M 44.3333,51.8542L 31.6666,50.2709L 31.6666,47.5L 44.3333,49.0834L 44.3333,51.8542 Z M 38,17.4167C 44.9956,17.4167 50.6667,23.4422 50.6667,30.875C 50.6667,35.8565 44.3333,40.7324 44.3333,42.5329L 44.3333,47.5L 31.6667,45.9167L 31.6667,42.5329C 31.6667,41.1667 25.3333,35.8565 25.3333,30.875C 25.3333,23.4422 31.0044,17.4167 38,17.4167 Z "/>
  </svg>
  <script src="js/puck.js"></script>
  <script type="text/javascript">
    var path = document.getElementsByTagName('path')[0];
    var on = false;
    path.addEventListener("click", function() {
      on = !on;
      if (on) {
        path.style.fill="yellow";
        Puck.write('Puck.IR([9.6,4.9,0.5,0.7,0.5,0.7,0.6,0.7,0.5,0.7,0.5,0.7,0.6,0.7,0.5,0.7,0.5,0.7,0.6,1.9,0.5,1.9,0.5,1.9,0.6,1.9,0.5,1.9,0.5,1.9,0.6,1.9,0.5,1.9,0.5,1.9,0.6,1.9,0.5,1.9,0.6,0.7,0.5,0.6,0.6,0.7,0.5,0.7,0.5,0.7,0.6,0.6,0.6,0.7,0.5,0.7,0.6,1.9,0.5,1.9,0.5,1.9,0.6,1.9,0.5,1.9,0.5,43.1,9.6,2.5,0.5]);\n');
      } else {
        path.style.fill="#444";
        Puck.write('Puck.IR([9.6,5,0.5,0.7,0.5,0.7,0.5,0.7,0.5,0.7,0.5,0.7,0.5,0.7,0.5,0.7,0.5,0.7,0.5,1.9,0.5,1.9,0.5,1.9,0.6,1.9,0.5,1.9,0.5,1.9,0.5,1.9,0.5,1.9,0.5,0.7,0.5,1.9,0.5,1.9,0.5,0.7,0.5,0.7,0.5,0.7,0.5,0.7,0.5,0.7,0.5,1.9,0.5,0.7,0.5,0.7,0.5,1.9,0.5,1.9,0.5,1.9,0.5,1.9,0.5,1.9,0.5]);\n');
      }
    });
  </script>
</body></html>