Making a SVG HTML Burger Button

| 3 min. (475 words)

Note: works in safari, chrome, firefox (mask opacity is iffy)

See the Pen Alayb by Kyle Henwood (@kyleHenwood) 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?


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.


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 inital 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)
  • and the outer ring which uses the widly used super massive ‘stroke-dasharray’ and ‘stroke-dashoffset’ to animate it. (black stroke)

Without the mask here is what is happening:

See the Pen grsex by Kyle Henwood (@kyleHenwood) on CodePen.

Many hours of frame by frame animations hand coded in css to get all the timing right and… tada!

On another note….

You might have just stumbled on this page and are wondering what Raygun Crash Reporting and Pulse do. Well, let us explain.

Raygun fits right in with your teams agile workflow, automatically detecting issues in your software which can then be created as tasks in your teams 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.

Raygun Pulse 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.