Making a SVG HTML Burger Button

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?

step-1

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.

path-description

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)
step-2

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!

Share this post

60 thoughts on “Making a SVG HTML Burger Button”


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

    Not sure I understand your problem, but did you know you can also use the dasharray to define the size of the gaps? You can even make arbitrary dash patterns like morse code (check out the end of this article http://jakearchibald.com/2013/animated-line-drawing-svg/). So I think this would have been possible with just one path using stroke-dasharray; start with something like “10 500″ (let’s say your hamburger width is 10px) and transition to “1 40 500″ with a stroke-dashoffset of 1 for removing the first bit of stroke. You’d have to toy around with the parameters a little bit to get the right animation effect, of course.

    1. Wow that’s pretty awesome, can’t say I found anything about variable stroke widths when I was looking for alternatives to my method. I’ll have to give that a shot and re-post my findings! thanks :)

  2. Check it out, I created one with a single path (without masks), using only variable dasharray/dashoffset values: http://codepen.io/rijk/pen/Ltxov !

    There’s also no need for keyframed animations anymore, as they can be done with regular transitions (used a bezier transition for the top/bottom ‘swoosh’ effect).

    Still as configurable but a lot less code — and should work cross browser now. Yay! :)

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">