18Open / Close Along a Path

II · Drawing with SVG

A menu icon whose dashes travel their paths between states.

Click

Source

3 files

<head>
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <button>
    <svg width="100%" viewBox="-2 -2 28 28">
      <g
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        fill="none"
      >
        <path
          class="top"
          d="M6 9C6 9 7.5 9 18 9C28.5 9 23.5 23.5 16.5 16.5C9.5 9.5 8 8 8 8"
          stroke-dasharray="12 32"
        />
        <path
          class="bottom"
          d="M6 15C6 15 6.5 15 18 15C29.5 15 24.5 0 16.5 8C8.5 16 8 16.5 8 16.5"
          stroke-dasharray="12 34"
        />
      </g>
    </svg>
  </button>
  <script src="/index.js" type="module"></script>
</body>