SVG Hand Drawn Navicon

Developer
Nicholas M. Smith
Size
3,313 Kb
Views
30,360
  1. SVG Hand Drawn Navicon Previews
  2. SVG Hand Drawn Navicon HTML Codes
  3. SVG Hand Drawn Navicon CSS Codes
  4. SVG Hand Drawn Navicon JS Codes

How do I make an svg hand drawn navicon?

Click Me!. What is a svg hand drawn navicon? How do you make a svg hand drawn navicon? This script and codes were developed by Nicholas M. Smith on 27 August 2022, Saturday.

SVG Hand Drawn Navicon Previews
IQ Test

SVG Hand Drawn Navicon - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SVG Hand Drawn Navicon</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href='http://fonts.googleapis.com/css?family=Allerta' rel='stylesheet' type='text/css'>
<h1>SVG Hand Drawn Navicon</h1>
<p>Click Me!</p>
<div class="menu-wrap"> <svg class="menu"width="124" height="112" xmlns="http://www.w3.org/2000/svg"> <!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ --> <g> <title>Menu</title> <path class="line-global top" d="m22.5,20.5c1,0 2,0 3,0c1,0 2,0 4,0c2,0 7,0 12,0c8,0 11,0 14,0c2,0 5,0 11,0c3,0 15.03746,-0.61092 20,0c4.09222,0.50377 9,1 13,1c2,0 3,0 3,-1l1,0" id="svg_17" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#fff" fill="none"/> <path class="line-global middle" d="m23.5,48.5c1,1 2.05165,0.35927 6,1c3.12144,0.50654 4.69344,1.45881 6,2c1.84776,0.76537 4,0 8,0c3,0 8,-1 9,-1c4,0 6,0 10,0c1,0 4,0 7,0c3,0 6,0 8,0c2,0 4,0 6,0c2,0 3,0 5,0c3,0 6,0 9,0c1,0 2,0 3,0c1,0 2,0 3,0l1,0l1,0" id="svg_18" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#fff" fill="none"/> <path class="line-global bottom" d="m20.5,81.5c1,0 5,-1 11,-1c6,0 12,0 17,0c5,0 8,1 10,1c7,0 12.02433,-0.49269 17,0c5.0742,0.50245 9,1 12,1c2,0 4,0 5,0c1,0 3.22836,-1.14805 6,0c1.30656,0.5412 3,1 4,1l1,0" id="svg_19" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#fff" fill="none"/> </g>
</svg> <svg class="close" width="124" height="112" xmlns="http://www.w3.org/2000/svg"> <!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ --> <g> <title>Close</title> <path class="line-global cross-one" d="m30.5,14.5c0,1 0.87181,2.08953 3,5c3.77946,5.16872 12,12 19,20c7,8 13.44546,12.44798 21,19c3.20512,2.77979 14,14 21,20l4,5l2,1l1,1" id="svg_39" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#fff" fill="none"/> <path class="line-global cross-two" d="m93.5,15.5c-3,2 -10.52221,9.38073 -13,12c-3.43607,3.63227 -8.27805,6.73428 -14,13c-5.26675,5.76727 -7.73091,10.30425 -19,20c-8.19947,7.0547 -13,11 -16,14l-3,2l-1,1" id="svg_40" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#fff" fill="none"/> </g>
</svg>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

SVG Hand Drawn Navicon - Script Codes CSS Codes

body { background: #efa044; padding-top: 100px;
}
.menu-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 30px 0 0 0;
}
h1, p { color: white; font-family: 'Allerta', sans-serif; margin: 0; padding: 0; text-align: center;
}
p { margin: 10px 0 0 0;
}
path { stroke-width: 15;
}
.line-global { stroke-dasharray: 1050; stroke-dashoffset: 1050; -webkit-animation: draw 0.95s ease forwards; animation: draw 0.95s ease forwards;
}
.middle { -webkit-animation-delay: 0; animation-delay: 0; -webkit-animation-duration: 0.45s; animation-duration: 0.45s; stroke-dashoffset: -1050;
}
.bottom { -webkit-animation-delay: 0.7s; animation-delay: 0.7s;
}
.cross-one { -webkit-animation: draw 0.95s ease forwards; animation: draw 0.95s ease forwards;
}
.cross-two { -webkit-animation: draw 0.85s linear forwards 0.3s; animation: draw 0.85s linear forwards 0.3s;
}
/* keyframe animations */
@-webkit-keyframes draw { to { stroke-dashoffset: 0; }
}
@keyframes draw { to { stroke-dashoffset: 0; }
}

SVG Hand Drawn Navicon - Script Codes JS Codes

var menu = $('.menu');
var close = $('.close');
close.hide();
$('.menu').on('click',function() { $(this).hide(); close.show();
});
$('.close').on('click', function() { $(this).hide(); menu.show();
});
SVG Hand Drawn Navicon - Script Codes
SVG Hand Drawn Navicon - Script Codes
Home Page Home
Developer Nicholas M. Smith
Username icutpeople
Uploaded August 27, 2022
Rating 3.5
Size 3,313 Kb
Views 30,360
Do you need developer help for SVG Hand Drawn Navicon?

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!

Nicholas M. Smith (icutpeople) Script Codes
Name
Floating Labels Form
Button
Aside Nav Animated
Responsive 3D Flip Navigation
CSS Modal
CSS Off Canvas Menu
Flexbox Test
Flip Navicon
Hover Effects
HTML5 Video Text Overlay Flexbox
Create amazing Facebook ads with AI!

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!