JSFiddle - React, Tailwind, and code Playground

by Brett

HTML

<!-- article: https://raygun.io/blog/2014/07/making-svg-html-burger-button/ -->
<!-- codepen: http://codepen.io/rijk/pen/Ltxov -->
<div id="hamburger" class="hamburglar is-open">
    <div id="top"></div>
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="64px" height="64px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
        <path id="circle" fill="none" stroke-width="4" stroke-miterlimit="10" d="M16,32h32c0,0,11.723-0.306,10.75-11 c-0.25-2.75-1.644-4.971-2.869-7.151C50.728,7.08,42.767,2.569,33.733,2.054C33.159,2.033,32.599,2,32,2C15.432,2,2,15.432,2,32 c0,16.566,13.432,30,30,30c16.566,0,30-13.434,30-30C62,15.5,48.5,2,32,2S1.875,15.5,1.875,32" />
    </svg>
    <div id="bottom"></div>
</div>

CSS

*, *:before, *:after {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    background: #000;
    padding: 40px;
}

.hamburglar {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    margin: 40px auto;
    position: relative;
    display: block;
    width: 64px;
    height: 64px;
    background: #444;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: hand;
}

.hamburglar.is-open {
    border-radius: 4px;    
}

.hamburglar.is-closed {
     border-radius: 50%;   
}

#top, 
#bottom {
    position: absolute;
    display: block;
    height: 4px;
    width: 36px;
    background: #fff;
}

#top {
    top: 19px;
    left: 15px;
}

#bottom {
    top: 41px;
    left: 15px;
}

path, line {
    stroke: #fff;
}

#top, 
#bottom {
    -webkit-transform-origin: 34px 2px;
    -ms-transform-origin: 34px 2px;
    transform-origin: 34px 2px;
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: all 500ms cubic-bezier(0.8, -1.1, 0.5, 1.9);
    transition: all 500ms cubic-bezier(0.8, -1.1, 0.5, 1.9);
}

#circle {
    stroke-dasharray: 1 100 32 300;
    stroke-dashoffset: 101;
    -webkit-transition: all 750ms ease;
    transition: all 750ms ease;
}

.hamburglar.is-closed #circle {
    stroke-dasharray: 1 100 190 300;
    stroke-dashoffset: 1;
}

.hamburglar.is-closed #top {
    -webkit-transform: translateX(-4.5px) rotate(-45deg);
    -ms-transform: translateX(-4.5px) rotate(-45deg);
    transform: translateX(-4.5px) rotate(-45deg);
}

.hamburglar.is-closed #bottom {
    -webkit-transform: translateX(-4.5px) rotate(45deg);
    -ms-transform: translateX(-4.5px) rotate(45deg);
    transform: translateX(-4.5px) rotate(45deg);
}

JavaScript

$('document').ready(function () {
    var trigger = $('#hamburger'),
        isClosed = true;

    trigger.click(function () {
        burgerTime();
    });

    function burgerTime() {
        if (isClosed == true) {
            trigger.removeClass('is-open');
            trigger.addClass('is-closed');
            isClosed = false;
        } else {
            trigger.removeClass('is-closed');
            trigger.addClass('is-open');
            isClosed = true;
        }
    }

});