SVG Animation Example Icons

<!doctype html>
<title>Example</title>
<svg width="80" height="80" viewBox="0 0 100 100" role="img" aria-labelledby="iconTitle iconDesc" id="menuIcon">
  <title id="iconTitle">Menu Toggle</title>
  <desc id="iconDesc">A hamburger menu icon that morphs into an X when clicked to indicate an open state.</desc>
  
  <style>
    .icon-container { cursor: pointer; }
    .line {
      fill: none;
      stroke: #333;
      stroke-width: 8;
      stroke-linecap: round;
      transition: transform 0.3s ease, opacity 0.3s ease;
      transform-origin: center;
    }
    /* Simple hover animation: move slightly */
    .icon-container:hover .line-1 { transform: translateY(-2px); }
    .icon-container:hover .line-3 { transform: translateY(2px); }
  </style>

<rect id="iconOn" width="100" height="100" fill="transparent" class="icon-container">
    <set attributeName="display" to="none" begin="iconOn.click" />
    <set attributeName="display" to="block" begin="iconOff.click" />
  </rect>
  <rect id="iconOff" width="100" height="100" fill="transparent" class="icon-container" display="none">
    <set attributeName="display" to="none" begin="iconOff.click" />
    <set attributeName="display" to="block" begin="iconOn.click" />
  </rect>