Making a SVG HTML Burger Button

Kyle HenwoodProvider Updates74 Comments

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!

 

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.

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.

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.

Expose issues during development, testing, and go-live with Raygun Crash Reporting

74 Comments on “Making a SVG HTML Burger Button”

  1. Pingback: SVG Animated Burger Button For Menu Open and Close Transition

  2. Pingback: Collective #124 » CSS 3 & HTML 5 Links und Infos

  3. Pingback: Collective #124 | Zipsite.netZipsite.net

  4. Pingback: Collective #124 - InfoLogs

  5. Luke Roberts

    This is awesome! Shame the browser support is iffy, but would be nice with a fallback!

    Well done sir!

  6. Rijk


    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. Kyle Henwood

      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 🙂

  7. Pingback: Tweet Parade (no.29 Jul 2014) - Best Articles of Last Week | gonzoblog

  8. Pingback: 50 Visually Appealing CSS Tutorials & Techniques

  9. Pingback: 50 Visually Appealing CSS Tutorials & Techniques – Web Designing Kerala India

  10. Pingback: Visually CSS3 Tutorials to Enhance Web Designs

  11. Rijk

    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! 🙂

  12. Pingback: 20 Best Jquery Plugins Of July 2014

  13. Pingback: Fresh Tutorials and Articles for Web Developers: July 2014 | Splashnology.com

  14. Pingback: 7 Non-raster Approaches for Making the “Hamburger” Menu Icon | Orbit2 Website Design Leeds | Website Design Leeds

  15. Pingback: 7 Non-raster Approaches for Making the “Hamburger” Menu Icon - The Infinite Studio

  16. Pingback: 7 Non-raster Approaches for Making the “Hamburger” Menu Icon

  17. Pingback: 7 Non-raster Approaches for Making the “Hamburger” Menu Icon | Your Web App

  18. Pingback: 提高网页设计的视觉CSS3教程-字体效果、按钮样式、导航条 | Specs' Blog

  19. Pingback: 7 Non-raster Approaches for Making the “Hamburger” Menu IconFree Internet Tutorials | Free Internet Tutorials

  20. Pingback: 7 Non-raster Approaches for Making the “Hamburger” Menu Icon | Tech Tips

  21. Pingback: 7 Non-raster Approaches for Making the “Hamburger” Menu Icon | JJ SERVER

  22. Pingback: 50 Visually Appealing CSS Tutorials & Techniques | Brisa

  23. Pingback: The Best SVG Tutorials and TechniquesFree Internet Tutorials | Free Internet Tutorials

  24. Pingback: 38 Visually Awesome CSS Tutorials & Techniques | SmashingApps.com

  25. Pingback: 38 Visually Awesome CSS Tutorials & Techniques

  26. Pingback: 38 Visually Awesome CSS Tutorials & Techniques - File-Shack

  27. Pingback: Best Examples of CSS3 Button Tutorials

  28. Pingback: Ceiba3D Studio | Best Examples of CSS3 Button Tutorials

  29. Pingback: 11 Creative SVG Animation Tutorials | SmashingApps.com

  30. Pingback: 11 Creative SVG Animation Tutorials - File-Shack

  31. Pingback: 11 Creative SVG Animation Tutorials - wwwDesigned

  32. Pingback: El formato SVG - Artysmedia

  33. Pingback: El formato SVG 2015 - Enlaces · Artysmedia

  34. Pingback: El formato SVG - Enlaces · Artysmedia

  35. Pingback: The ultimate guide to SVG » CSS 3 & HTML 5 Links und Infos

  36. Pingback: The ultimate guide to SVG | ShaCha.co.uk

  37. Pingback: The ultimate guide to SVG - King In Exile

  38. Pingback: The ultimate guide to SVG - SearchCo

  39. Pingback: The ultimate guide to SVG | Certalinx

  40. Pingback: The ultimate guide to SVG | Webdesigner Depot

  41. Pingback: The Web Geek | The ultimate guide to SVG

  42. Pingback: Ceiba3D Studio | The ultimate guide to SVG

  43. Pingback: The ultimate guide to SVG | Web Technology & Development

  44. Pingback: The ultimate guide to SVG | Premier Web Development

  45. Pingback: Want To Learn About SVG? Start With This Article | Maja's blog

  46. Pingback: Ric_a | Pearltrees

  47. Pingback: Best Examples of CSS3 Button Tutorials

  48. Pingback: 38 Yaratıcı CSS Örnekleri | FYLibrary.com

  49. Kevin

    Great idea. Its just I think most browsers aren’t ready for this yet. I doesn’t work properly in Firefox, doesn’t really work in Safari, and no IE Support. Only works in Chrome flawlessly. But this seems to very well be the future of a lot of types of animation on the web. So compatibility is on the way 🙂

  50. Pingback: 10 Creative SVG Animation Tutorials

  51. reeslo

    Hi, very nice animation !
    With firefox in local the .path-burger mask is not applied this is a CORS issue ?

  52. Pingback: 28 CSS Effects & Tutorials All Designers Must Know About | Tech +

  53. Pingback: 28 CSS Effects & Tutorials All Designers Must Know About | Articles in IT and more

  54. Pingback: 28 CSS Effects & Tutorials All Designers Must Know About - Code with Coffee

  55. Pingback: 40 Impressive SVG Effects and Tutorials

  56. Pingback: 40 Impressive SVG Effects and Tutorials - Turnkey Shop

  57. Pingback: 28 CSS Effects & Tutorials All Designers Must Know About - Top Ten Click

  58. Pingback: #TBT – A look at our best blog posts #1 - The Raygun Blog

Leave a Reply

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