SVG hamburger menu button

An SVG "M" that compresses into a vertical line before transforming into an "X". Animated the SVG line element's x/y properties to achieve this effect. Using velocity for animations, had a few issues getting non-spring easing to work, but I still think it turned out alright. What is a svg hamburger menu button How do you make a svg hamburger menu button? This script and codes were developed by Eli Fitch on 01 January 2022, Saturday.

How do I make an svg hamburger menu button?
  1. SVG hamburger menu button Previews
  2. SVG hamburger menu button HTML Codes
  3. SVG hamburger menu button CSS Codes
  4. SVG hamburger menu button JS Codes
SVG hamburger menu button Previews

SVG hamburger menu button HTML Codes

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>SVG hamburger menu button</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <div class="btn">
  <svg width="100px" height="100px" viewBox="0 0 100 100" fill="none" stroke="#000" id="velocitySvg">
    <line id="1" x1="0" y1="100" x2="0" y2="0" stroke="#979797" stroke-width="2" stroke-linecap="round"/>
    <line id="2" x1="0" y1="0" x2="50" y2="65" stroke="#979797" stroke-width="2" stroke-linecap="round"/>
    <line id="3" x1="50" y1="65" x2="100" y2="0" stroke="#979797" stroke-width="2" stroke-linecap="round"/>
    <line id="4" x1="100" y1="0" x2="100" y2="100" stroke="#979797" stroke-width="2" stroke-linecap="round"/>
  </svg>
</div>

<div class="item item--1">Menu Item</div>
<div class="item item--2">Menu Item</div>
<div class="item item--3">Menu Item</div>
<div class="item item--4">Menu Item</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://julian.com/research/velocity/build/jquery.velocity.min.js'></script>

    <script src="js/index.js"></script>

</body>
</html>

SVG hamburger menu button CSS Codes

body {
  overflow: hidden;
}
svg {
  overflow: visible;
  height: 100%;
  width: 100%;
}

.btn {
  padding: 20px;
  border: 1px solid #979797;
  width: 60px;
  height: 60px;
  border-radius: 6px;
  margin-bottom: 40px;
}
.item{
  width: 200px;
  padding: 20px;
  font-family: sans-serif;
  font-weight: 100;
  text-align: center;
  position: relative;
  left: -400px;
}
.item:nth-child(even){
  background-color: lightgray;
}
.item:nth-child(odd){
  background-color: gray;
}

SVG hamburger menu button JS Codes

var open = false;
$('.btn').on('click',function(){
  if(!open) {
    $("#1").velocity({x1: 50,x2: 50},{duration:200, easing: "easeOutBounce"}).delay(0).velocity({x1: 100, y1: 0, x2: 0, y2: 100},{duration:200, easing: "easeOutBounce"});
    $("#2").velocity({x1: 50,x2: 50},{duration:200, easing: "easeOutBounce"}).delay(0).velocity({x1: 0, y1: 0, x2: 50, y2: 50, opacity: 0},{duration:200, easing: "easeOutBounce"});
    $("#3").velocity({x1: 50,x2: 50},{duration:200, easing: "easeOutBounce"}).delay(0).velocity({x1: 50, y1: 50, x2: 100, y2: 0, opacity: 0},{duration:200, easing: "easeOutBounce"});
    $("#4").velocity({x1: 50,x2: 50},{duration:200, easing: "easeOutBounce"}).delay(0).velocity({x1: 0, y1: 0, x2: 100, y2: 100},{duration:200, easing: "easeOutBounce"});
    
    
    $('.item--1').delay(200).velocity({left: 0},{duration: 400, easing: "easeInSine"})
    $('.item--2').delay(250).velocity({left: 0},{duration: 400, easing: "easeInSine"})
    $('.item--3').delay(300).velocity({left: 0},{duration: 400, easing: "easeInSine"})
    $('.item--4').delay(350).velocity({left: 0},{duration: 400, easing: "easeInSine"})
    
    open = true;
    
  } else {
    $("#1").velocity("reverse").velocity({x1: 0, y1: 100, x2: 0, y2: 0},{duration:1000, easing: "spring"});
    $("#2").velocity("reverse").velocity({x1: 0, y1: 0, x2: 50, y2: 65},{duration:1000, easing: "spring"});
    $("#3").velocity("reverse").velocity({x1: 50, y1: 65, x2: 100, y2: 0},{duration:1000, easing: "spring"});
    $("#4").velocity("reverse").velocity({x1: 100, y1: 0, x2: 100, y2: 100},{duration:1000, easing: "spring"});
    
    $('.item--1').delay(350).velocity("reverse")
    $('.item--2').delay(300).velocity("reverse")
    $('.item--3').delay(250).velocity("reverse")
    $('.item--4').delay(200).velocity("reverse")
    
    open = false;
  }
})





/*var open = false;
$('#velocitySvg').on('click',function(){
  if(!open) {
    $("#1").velocity({x1: 50,x2: 50},{duration:1000, easing: "spring"});
    $("#2").velocity({x1: 50,x2: 50},{duration:1000, easing: "spring"});
    $("#3").velocity({x1: 50,x2: 50},{duration:1000, easing: "spring"});
    $("#4").velocity({x1: 50,x2: 50},{duration:1000, easing: "spring"});
    
    $("#1").velocity({x1: 0, y1: 0, x2: 100, y2: 100},{duration:1000, easing: "spring"});
    $("#2").velocity({x1: 0, y1: 0, x2: 50, y2: 50, opacity: 0},{duration:1000, easing: "spring"});
    $("#3").velocity({x1: 50, y1: 50, x2: 100, y2: 0, opacity: 0},{duration:1000, easing: "spring"});
    $("#4").velocity({x1: 100, y1: 0, x2: 0, y2: 100},{duration:1000, easing: "spring"});
    open = true;
  } else {
    $("#1").velocity("reverse").velocity({x1: 0, y1: 100, x2: 0, y2: 0},{duration:1000, easing: "spring"});
    $("#2").velocity("reverse").velocity({x1: 0, y1: 0, x2: 50, y2: 65},{duration:1000, easing: "spring"});
    $("#3").velocity("reverse").velocity({x1: 50, y1: 65, x2: 100, y2: 0},{duration:1000, easing: "spring"});
    $("#4").velocity("reverse").velocity({x1: 100, y1: 0, x2: 100, y2: 100},{duration:1000, easing: "spring"});
    open = false;
  }
})*/
Do you want hide your ip address?Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup.