Making a SVG HTML Burger Button

By Kyle Henwood | Posted Jul 4, 2014 | 3 min. (464 words)

Note: Works in Safari, Chrome, Firefox.

See the pen by Kyle Henwood on CodePen.

Hamburger buttons are used to symbolify hidden menus all across the world, but when I came across this pretty awesome transition of a hamburger button by CreativeDash, I challenged myself with recreating it HTML.

First thoughts

Having never worked with animating SVG before I had a couple of ideas of how I wanted to approach the animated path.

Original Idea: One path

My first thought was to create a simple path and animate a line along it, seemed simple enough right?

One path with a line

Of course not!

SVG paths CAN have an animated stroke that runs along the path, however this is created using two properties. stroke-dasharray which makes a dashed line even spaces, and stroke-dashoffset which moves the dashes. Most tutorials show this in use to animate a path in one direction, using a super long stroke length which in turn creates a super wide stroke gap when using a dashed line.

Small dash array and large dash array are different

My problem:

I needed the stroke to change widths AND end, and having a small initial starting width was impossible.

Introducing: SVG Masks

Not very well supported cross browser (had to use two different methods to get working in Chrome / Firefox) I hatched the idea to create two paths.

  • One small initial path which draws to the outside circle, which I would use as a mask and animate an html element behind to give the impression that the line is moving. (red stroke)

  • The outer ring which uses the widly used super massive stroke-dasharray and stroke-dashoffset to animate it. (black stroke)

Small dash array and large dash array are different

Without the mask here is what is happening:

Many hours of frame by frame animations hand coded in CSS to get all the timing right and I got it to work correctly.

On another note….

You might have just stumbled on this page and are wondering what Raygun Crash Reporting and Real User Monitoring do. Well, let me explain.

Raygun fits right in with your agile workflow, automatically detecting issues in your software which can then be created as tasks in your agile development tool of choice. Whether that’s Jira, Pivotal Tracker or other, problems with your application can be assigned to individual team members, allocated to sprints and progress tracked with full contextual information and diagnostic details.

Raygun Crash Reporting keeps a watchful eye on your web and mobile applications and tells you when problems arise. Add Raygun to your code in minutes and you’ll be able to detect every error in your software, the second they happen, and expose issues during development, testing, and go-live.

Real User Monitoring is a Real User Monitoring tool for you web and mobile application. Ensure your team has the right information, with real time insight into performance and software usage.