Inline SVG hamburger animation
How do I make an inline svg hamburger animation?
Just playing around with some SVG + CSS animation. What is a inline svg hamburger animation? How do you make a inline svg hamburger animation? This script and codes were developed by Chris Wright on 12 July 2022, Tuesday.
Inline SVG hamburger animation - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Inline SVG hamburger animation</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<svg class="inline-svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="320px" height="220.5px" viewBox="0 0 32 22.5" enable-background="new 0 0 32 22.5" xml:space="preserve"> <title>Mobile Menu</title> <g class="svg-menu-toggle"> <path class="bar" d="M20.945,8.75c0,0.69-0.5,1.25-1.117,1.25H3.141c-0.617,0-1.118-0.56-1.118-1.25l0,0 c0-0.69,0.5-1.25,1.118-1.25h16.688C20.445,7.5,20.945,8.06,20.945,8.75L20.945,8.75z"> </path> <path class="bar" d="M20.923,15c0,0.689-0.501,1.25-1.118,1.25H3.118C2.5,16.25,2,15.689,2,15l0,0c0-0.689,0.5-1.25,1.118-1.25 h16.687C20.422,13.75,20.923,14.311,20.923,15L20.923,15z"> </path> <path class="bar" d="M20.969,21.25c0,0.689-0.5,1.25-1.117,1.25H3.164c-0.617,0-1.118-0.561-1.118-1.25l0,0 c0-0.689,0.5-1.25,1.118-1.25h16.688C20.469,20,20.969,20.561,20.969,21.25L20.969,21.25z"> </path> <!-- needs to be here as a 'hit area' --> <rect width="320" height="220" fill="none"> </rect> </g> </svg> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Inline SVG hamburger animation - Script Codes CSS Codes
.svg-menu-toggle { fill: #fff; pointer-events: all; cursor: pointer;
}
.svg-menu-toggle .bar { -webkit-transform: rotate(0) translateY(0) translateX(0); transform: rotate(0) translateY(0) translateX(0); opacity: 1; -webkit-transform-origin: 20px 10px; transform-origin: 20px 10px; -webkit-transition: -webkit-transform 0.4s ease-in-out, opacity 0.2s ease-in-out; transition: transform 0.4s ease-in-out, opacity 0.2s ease-in-out;
}
.svg-menu-toggle .bar:nth-of-type(1) { -webkit-transform-origin: 20px 10px; transform-origin: 20px 10px;
}
.svg-menu-toggle .bar:nth-of-type(3) { -webkit-transform-origin: 20px 20px; transform-origin: 20px 20px;
}
.svg-menu-toggle:hover .bar:nth-of-type(1) { -webkit-transform: rotate(-45deg) translateY(0) translateX(0); transform: rotate(-45deg) translateY(0) translateX(0);
}
.svg-menu-toggle:hover .bar:nth-of-type(2) { opacity: 0;
}
.svg-menu-toggle:hover .bar:nth-of-type(3) { -webkit-transform: rotate(45deg) translateY(0em) translateX(0em); transform: rotate(45deg) translateY(0em) translateX(0em);
}
.inline-svg { display: block; margin: 0 auto;
}
body { background-color: #4c4c4c;
}
Inline SVG hamburger animation - Script Codes JS Codes
//testing inline SVG CSS animation
Developer | Chris Wright |
Username | chriswrightdesign |
Uploaded | July 12, 2022 |
Rating | 4.5 |
Size | 2,826 Kb |
Views | 50,600 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Reverse cascade | 3,976 Kb |
Timeline animation | 4,398 Kb |
Flexbox responsive navigation | 4,272 Kb |
SVG Noise | 2,930 Kb |
Grid - More complex grids with span | 3,695 Kb |
CSS Responsive animated Accordion | 4,834 Kb |
SVG Noise over gradient Experiment | 6,168 Kb |
Typography SVG experiment | 3,472 Kb |
Experiments with nth-of-type animation | 3,015 Kb |
Background Noisy Radial Gradient | 3,207 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
A Pen by lizz | Lizz | 10,068 Kb |
Polygon Dodecahedron in CSS | Vennsoh | 7,606 Kb |
Automatic scroll | Skeurentjes | 4,042 Kb |
CSSOff 2013 Submission | Codewunder | 14,766 Kb |
A Pen by Mohomed Anees | Mohomedanees | 12,597 Kb |
Two tables and header with jspdf-autotable | Someatoms | 2,245 Kb |
Nested flexbox layout for library catalog | Boycetrus | 3,271 Kb |
Vue.js Lazy Loading | Kjbrum | 3,620 Kb |
Gears | Synvox | 3,278 Kb |
A Pen by Moeid Saleem | Moeidsaleem | 1,862 Kb |
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. Hide Your IP Now!