SVG Hamburger Menu

Three stripes should be such an easy thing to draw. Here’s a bunch of different ways to do it on the web. That said, SVG is definitely the nicest way to handle it. A hamburger menu is so simple that we can draw it by hand in SVG.

Three rectangles, evenly distributed:

<svg viewBox="0 0 100 80" width="40" height="40">
  <rect width="100" height="20"></rect>
  <rect y="30" width="100" height="20"></rect>
  <rect y="60" width="100" height="20"></rect>
</svg>

Feel free to fiddle with those numbers to get the sizing and style you like.

Something awesome you might not know? SVG has rounded corners, just like CSS has border-radius! It comes in the form of the rx attribute. Check it out:

That might work better for your design if your design is softer and makes use of rounded stuff.