marionebl/jogwheel

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="10 0 80 80" enable-background="new 0 0 100 100" xml:space="preserve">
<defs>
  <style type="text/css"><![CDATA[
    @keyframes spin {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }
    .vinyl {
      fill: #111;
    }
    .label {
      stroke: rgba(0,0,0,.1);
      stroke-width: 2px;
      fill: #5ec792;
    }
    .reflection {
      fill: #fff;
      animation: spin 60s infinite linear;
      transform-origin: center;
      stroke: rgba(255,255,255,.3);
      stroke-width: 1px;
    }
  ]]></style>
</defs>
<path class="label" d="M50,28c-6.627,0-12,5.373-12,12s5.373,12,12,12c6.627,0,12-5.373,12-12S56.627,28,50,28z M50,42.2
  c-1.215,0-2.2-0.985-2.2-2.2s0.985-2.2,2.2-2.2s2.2,0.985,2.2,2.2S51.215,42.2,50,42.2z"/>
<path class="vinyl" d="M50,0C27.909,0,10,17.909,10,40c0,22.092,17.909,40,40,40c22.092,0,40-17.908,40-40C90,17.909,72.092,0,50,0z M50,52
  c-6.627,0-12-5.373-12-12s5.373-12,12-12s12,5.373,12,12S56.627,52,50,52z"/>
<path class="reflection" d="M22.227,30.107l-3.137-0.628c0.046-0.231,1.207-5.734,7.697-12.225c6.491-6.49,11.994-7.651,12.225-7.698
  l0.314,1.569l0.323,1.567c-0.048,0.01-4.854,1.08-10.599,6.824C23.237,25.33,22.237,30.06,22.227,30.107z M32.501,31.349
  l-3.135-0.643c0.067-0.338,0.766-3.409,4.398-7.04c3.632-3.632,6.702-4.33,7.04-4.397l0.313,1.569l0.33,1.565
  c-0.024,0.006-2.47,0.574-5.421,3.526C33.075,28.879,32.506,31.325,32.501,31.349z M59,57.828c0.009-0.002,2.453-0.57,5.406-3.521
  c2.969-2.969,3.518-5.382,3.521-5.405l3.138,0.628c-0.067,0.337-0.766,3.408-4.397,7.041c-3.631,3.631-6.702,4.329-7.04,4.396
  L59,57.828z M73.079,63.547c-6.49,6.489-11.993,7.65-12.225,7.696l-0.628-3.138c0.039-0.009,4.846-1.078,10.59-6.821
  c5.812-5.813,6.814-10.544,6.822-10.591l3.139,0.629C80.73,51.552,79.57,57.055,73.079,63.547z"/>
</svg>