SVG Smil Interactive

<!doctype html>
<title>Example</title>
<svg width="300" height="300" viewBox="0 0 100 100">
  <style>
    .btn { cursor: pointer; }
    .btn:hover { opacity: 0.8; }
  </style>

<rect x="35" y="10" width="30" height="15" rx="7.5" fill="#eee" class="btn" id="track" />
  <circle cx="42.5" cy="17.5" r="5" fill="#999" id="knob" pointer-events="none">
    <animate 
      attributeName="cx" 
      from="42.5" 
      to="57.5" 
      dur="0.2s" 
      begin="track.click" 
      fill="freeze" />
    <animate 
      attributeName="fill" 
      from="#999" 
      to="limegreen" 
      dur="0.2s" 
      begin="track.click" 
      fill="freeze" />
  </circle>
  <text x="50" y="32" font-size="4" text-anchor="middle" font-family="sans-serif">Toggle On (Click)</text>

<circle cx="50" cy="65" r="12" fill="gold" class="btn" id="hoverCircle">
    <animate 
      attributeName="r" 
      values="12; 15; 12" 
      keyTimes="0; 0.5; 1"
      calcMode="spline"
      keySplines="0.4 0 0.2 1; 0.4 0 0.2 1"
      dur="1.5s" 
      begin="hoverCircle.mouseover" 
      end="hoverCircle.mouseout" 
      repeatCount="indefinite" />
  </circle>
  <text x="50" y="85" font-size="4" text-anchor="middle" font-family="sans-serif">Organic Pulse (Hover)</text>
</svg>