SVG icons

Developer
Lisa Macken
Size
3,809 Kb
Views
26,312
  1. SVG icons Previews
  2. SVG icons HTML Codes
  3. SVG icons CSS Codes
  4. SVG icons JS Codes

How do I make an svg icons?

What is a svg icons? How do you make a svg icons? This script and codes were developed by Lisa Macken on 01 October 2022, Saturday.

SVG icons Previews
IQ Test

SVG icons - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SVG icons</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html>
<head>	<title>Logo Animation</title>	<link rel="stylesheet" href="css/style.css">
</head>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 612 792" style="enable-background:new 0 0 400 400;" xml:space="preserve">
<style type="text/css">
.st0{clip-path:url(#SVGID_2_);fill:none;}	.st5{clip-path:url(#SVGID_12_);fill:#2BB463;}	.st6{clip-path:url(#SVGID_14_);fill:#2BB463;}	.st7{clip-path:url(#SVGID_16_);fill:#2BB463;}	.st8{clip-path:url(#SVGID_18_);fill:#2BB463;}	.st9{clip-path:url(#SVGID_20_);fill:#2BB463;}	.st10{clip-path:url(#SVGID_22_);fill:#2BB463;}	.st11{clip-path:url(#SVGID_24_);fill:#2BB463;}	.st12{clip-path:url(#SVGID_26_);fill:#2BB463;}	.st13{clip-path:url(#SVGID_28_);fill:#2BB463;}	.st14{clip-path:url(#SVGID_30_);fill:#2BB463;}
</style>
<g>	<g>	<path class="st0 outline" fill="transparent" stroke="black" stroke-width="6" id="outline-path" d="M27,722.1c0,1.9,1.9,3.8,3.8,3.8h550.8c1.9,0,3.8-1.9,3.8-3.8V246.4H27V722.1z M591.9,232.3	c1.9,0,3.8,0.9,4.7,1.9c0.9,0.9,1.9,2.8,1.9,4.7v482.3c0,9.4-7.5,16.9-16.9,16.9H30.7c-9.4,0-16.9-7.5-16.9-16.9V238.9 c0-1.9,0.9-3.8,1.9-4.7c0.9-0.9,2.8-1.9,4.7-1.9H591.9z M463.3,73.7c-3.8,3.8-5.6,9.4-5.6,16v63.8c0,6.6,2.8,12.2,5.6,16c3.8,3.8,8.4,6.6,14.1,6.6s10.3-1.9,14.1-6.6 c3.8-3.8,5.6-10.3,5.6-16V89.7c0-6.6-2.8-12.2-5.6-16c-3.8-3.8-8.4-6.6-14.1-6.6S467.1,69,463.3,73.7 M444.6,153.5V89.7 c0-19.7,14.1-35.7,32.8-35.7s32.8,16.9,32.8,35.7v63.8c0,19.7-14.1,35.7-32.8,35.7S444.6,172.2,444.6,153.5 M121.8,73.7c-3.8,3.8-5.6,9.4-5.6,16v63.8c0,6.6,2.8,12.2,5.6,16c3.8,3.8,8.4,6.6,14.1,6.6 c5.6,0,10.3-2.8,14.1-6.6c3.8-3.8,5.6-9.4,5.6-16V89.7c0-6.6-2.8-12.2-5.6-16c-2.8-3.8-8.4-6.6-14.1-6.6 C130.2,67.1,125.5,69,121.8,73.7 M102.1,153.5V89.7c0-19.7,14.1-35.7,32.8-35.7s32.8,16.9,32.8,35.7v63.8 c0,19.7-14.1,35.7-32.8,35.7S102.1,172.2,102.1,153.5 M162.1,115c-3.8,0-6.6-2.8-6.6-6.6c0-3.8,2.8-6.6,6.6-6.6h289c3.8,0,6.6,2.8,6.6,6.6c0,3.8-2.8,6.6-6.6,6.6	H162.1z M20.4,246.4c-1.9,0-3.8-0.9-4.7-1.9c-0.9-0.9-1.9-2.8-1.9-4.7v-121c0-9.4,7.5-16.9,16.9-16.9h77.9	c3.8,0,6.6,2.8,6.6,6.6c0,3.8-2.8,6.6-6.6,6.6H30.7c-1.9,0-3.8,1.9-3.8,3.8v114.5h558.3V118.7c0-1.9-1.9-3.8-3.8-3.8h-77.9	c-3.8,0-6.6-2.8-6.6-6.6c0-3.8,2.8-6.6,6.6-6.6h77.9c9.4,0,16.9,7.5,16.9,16.9v121c0,1.9-0.9,3.8-1.9,4.7s-2.8,1.9-4.7,1.9H20.4z"	/>	</g>	<!-- End of Outline section -->	<g>	<defs>	<rect id="SVGID_11_" x="13.9" y="54" width="584.6" height="685"/>	</defs>	<clipPath id="SVGID_12_">	<use xlink:href="#SVGID_11_" style="overflow:visible;"/>	</clipPath>	<path class="st5" d="M210,334.6v61c0,1.9,1.9,4.7,4.7,4.7h61c1.9,0,3.8-1.9,4.7-4.7v-61c0-1.9-1.9-3.8-4.7-3.8h-61	C211.8,329.9,210,331.8,210,334.6 M213.7,413.4c-9.4,0-17.8-7.5-17.8-17.8v-61c0-9.4,7.5-17.8,17.8-17.8h61	c9.4,0,17.8,7.5,17.8,17.8v61c0,9.4-7.5,17.8-17.8,17.8H213.7z"/>	</g>	<g>	<defs>	<rect id="SVGID_13_" x="13.9" y="54" width="584.6" height="685"/>	</defs>	<clipPath id="SVGID_14_">	<use xlink:href="#SVGID_13_" style="overflow:visible;"/>	</clipPath>	<path class="st6" d="M333.8,334.6v61c0,1.9,1.9,4.7,4.7,4.7h61c1.9,0,4.7-1.9,4.7-4.7v-61c0-1.9-1.9-3.8-4.7-3.8h-61	C335.7,329.9,333.8,331.8,333.8,334.6 M337.6,413.4c-9.4,0-17.8-7.5-17.8-17.8v-61c0-9.4,7.5-17.8,17.8-17.8h61	c9.4,0,17.8,7.5,17.8,17.8v61c0,9.4-7.5,17.8-17.8,17.8H337.6z"/>	</g>	<g>	<defs>	<rect id="SVGID_15_" x="13.9" y="54" width="584.6" height="685"/>	</defs>	<clipPath id="SVGID_16_">	<use xlink:href="#SVGID_15_" style="overflow:visible;"/>	</clipPath>	<path class="st7" d="M457.7,334.6v61c0,1.9,1.9,4.7,4.7,4.7h61c1.9,0,4.7-1.9,4.7-4.7v-61c0-1.9-1.9-3.8-4.7-3.8h-61	C459.6,329.9,457.7,331.8,457.7,334.6 M461.4,413.4c-9.4,0-17.8-7.5-17.8-17.8v-61c0-9.4,7.5-17.8,17.8-17.8h61	c9.4,0,17.8,7.5,17.8,17.8v61c0,9.4-7.5,17.8-17.8,17.8H461.4z"/>	</g>	<g>	<defs>	<rect id="SVGID_17_" x="13.9" y="54" width="584.6" height="685"/>	</defs>	<clipPath id="SVGID_18_">	<use xlink:href="#SVGID_17_" style="overflow:visible;"/>	</clipPath>	<path class="st8" d="M210,453.7v61c0,1.9,1.9,4.7,4.7,4.7h61c1.9,0,3.8-1.9,4.7-4.7v-61c0-1.9-1.9-3.8-4.7-3.8h-61	C211.8,449,210,450.9,210,453.7 M213.7,532.6c-9.4,0-17.8-7.5-17.8-17.8v-61c0-9.4,7.5-17.8,17.8-17.8h61	c9.4,0,17.8,7.5,17.8,17.8v61c0,9.4-7.5,17.8-17.8,17.8H213.7z"/>	</g>	<g>	<defs>	<rect id="SVGID_19_" x="13.9" y="54" width="584.6" height="685"/>	</defs>	<clipPath id="SVGID_20_">	<use xlink:href="#SVGID_19_" style="overflow:visible;"/>	</clipPath>	<path class="st9" d="M457.7,453.7v61c0,1.9,1.9,4.7,4.7,4.7h61c1.9,0,4.7-1.9,4.7-4.7v-61c0-1.9-1.9-4.7-4.7-4.7h-61	C459.6,449,457.7,450.9,457.7,453.7 M461.4,532.6c-9.4,0-17.8-7.5-17.8-17.8v-61c0-9.4,7.5-17.8,17.8-17.8h61	c9.4,0,17.8,7.5,17.8,17.8v61c0,9.4-7.5,17.8-17.8,17.8H461.4z"/>	</g>	<g>	<defs>	<rect id="SVGID_21_" x="13.9" y="54" width="584.6" height="685"/>	</defs>	<clipPath id="SVGID_22_">	<use xlink:href="#SVGID_21_" style="overflow:visible;"/>	</clipPath>	<path class="st10" d="M333.8,453.7v61c0,1.9,1.9,4.7,4.7,4.7h61c1.9,0,4.7-1.9,4.7-4.7v-61c0-1.9-1.9-3.8-4.7-3.8h-61	C335.7,449,333.8,450.9,333.8,453.7 M337.6,532.6c-9.4,0-17.8-7.5-17.8-17.8v-61c0-9.4,7.5-17.8,17.8-17.8h61	c9.4,0,17.8,7.5,17.8,17.8v61c0,9.4-7.5,17.8-17.8,17.8H337.6z"/>	</g>	<g>	<defs>	<rect id="SVGID_23_" x="13.9" y="54" width="584.6" height="685"/>	</defs>	<clipPath id="SVGID_24_">	<use xlink:href="#SVGID_23_" style="overflow:visible;"/>	</clipPath>	<path class="st11" d="M210,572.9v61c0,1.9,1.9,3.8,4.7,4.7h61c1.9,0,3.8-1.9,4.7-4.7v-61c0-1.9-1.9-4.7-4.7-4.7h-61	C211.8,568.2,210,570.1,210,572.9 M213.7,651.7c-9.4,0-17.8-7.5-17.8-17.8v-61c0-9.4,7.5-17.8,17.8-17.8h61	c9.4,0,17.8,7.5,17.8,17.8v61c0,9.4-7.5,17.8-17.8,17.8H213.7z"/>	</g>	<g>	<defs>	<rect id="SVGID_25_" x="13.9" y="54" width="584.6" height="685"/>	</defs>	<clipPath id="SVGID_26_">	<use xlink:href="#SVGID_25_" style="overflow:visible;"/>	</clipPath>	<path class="st12" d="M333.8,572.9v61c0,1.9,1.9,3.8,4.7,3.8h61c1.9,0,4.7-1.9,4.7-3.8v-61c0-1.9-1.9-4.7-4.7-4.7h-61	C335.7,568.2,333.8,570.1,333.8,572.9 M337.6,651.7c-9.4,0-17.8-7.5-17.8-17.8v-61c0-9.4,7.5-17.8,17.8-17.8h61	c9.4,0,17.8,7.5,17.8,17.8v61c0,9.4-7.5,17.8-17.8,17.8H337.6z"/>	</g>	<g>	<defs>	<rect id="SVGID_27_" x="13.9" y="54" width="584.6" height="685"/>	</defs>	<clipPath id="SVGID_28_">	<use xlink:href="#SVGID_27_" style="overflow:visible;"/>	</clipPath>	<path class="st13" d="M85.2,453.7v61c0,1.9,1.9,4.7,4.7,4.7h61c1.9,0,4.7-1.9,4.7-4.7v-61c0-1.9-1.9-4.7-4.7-4.7h-61	C88,449,85.2,450.9,85.2,453.7 M89.9,532.6c-9.4,0-17.8-7.5-17.8-17.8v-61c0-9.4,7.5-17.8,17.8-17.8h61c9.4,0,17.8,7.5,17.8,17.8	v61c0,9.4-7.5,17.8-17.8,17.8H89.9z"/>	</g>	<g>	<defs>	<rect id="SVGID_29_" x="13.9" y="54" width="584.6" height="685"/>	</defs>	<clipPath id="SVGID_30_">	<use xlink:href="#SVGID_29_" style="overflow:visible;"/>	</clipPath>	<path class="st14" d="M85.2,572.9v61c0,1.9,1.9,3.8,4.7,3.8h61c1.9,0,4.7-1.9,4.7-3.8v-61c0-1.9-1.9-4.7-4.7-4.7h-61	C88,568.2,85.2,570.1,85.2,572.9 M89.9,651.7c-9.4,0-17.8-7.5-17.8-17.8v-61c0-9.4,7.5-17.8,17.8-17.8h61	c9.4,0,17.8,7.5,17.8,17.8v61c0,9.4-7.5,17.8-17.8,17.8H89.9z"/>	</g>
</g>
</svg> <script src="js/index.js"></script>
</body>
</html>

SVG icons - Script Codes CSS Codes

/* ---------------	Keyframes
---------------*/
#outline-path { position: fixed; top: 50%; left: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px;
}

SVG icons - Script Codes JS Codes

// Get a reference to the <path>
var path = document.querySelector('#outline-path');
// Get length of path... ~577px in this case
var pathLength = path.getTotalLength();
// Make very long dashes (the length of the path itself)
path.style.strokeDasharray = pathLength + ' ' + pathLength;
// Offset the dashes so the it appears hidden entirely
path.style.strokeDashoffset = pathLength;
// Jake Archibald says so
// https://jakearchibald.com/2013/animated-line-drawing-svg/
path.getBoundingClientRect();
// When the page scrolls...
window.addEventListener("scroll", function(e) { // What % down is it? // https://stackoverflow.com/questions/2387136/cross-browser-method-to-determine-vertical-scroll-percentage-in-javascript/2387222#2387222 // Had to try three or four differnet methods here. Kind of a cross-browser nightmare. var scrollPercentage = (document.documentElement.scrollTop + document.body.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight); // Length to offset the dashes var drawLength = pathLength * scrollPercentage; // Draw in reverse path.style.strokeDashoffset = pathLength - drawLength; // When complete, remove the dash array, otherwise shape isn't quite sharp // Accounts for fuzzy math if (scrollPercentage >= 0.90) { path.style.strokeDasharray = "none"; } else { path.style.strokeDasharray = pathLength + ' ' + pathLength; }
});
SVG icons - Script Codes
SVG icons - Script Codes
Home Page Home
Developer Lisa Macken
Username lmack90
Uploaded October 01, 2022
Rating 3
Size 3,809 Kb
Views 26,312
Do you need developer help for SVG icons?

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!

Lisa Macken (lmack90) Script Codes
Name
CodeCamp - Front-End Challenge
Columns everywhere
Scrollable svg Animations
Simple Quiz
Animation examples
A Pen by Lisa Macken
SmoothScroll Navigation 2
JQuery Accordian Slider
A JQuery Mobile Quiz Game
Rollover Effect 1
Create amazing video scripts 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!