SVG symbols demo

Developer
Massimo Cassandro
Size
3,246 Kb
Views
22,264
  1. SVG symbols demo Previews
  2. SVG symbols demo HTML Codes
  3. SVG symbols demo CSS Codes

How do I make an svg symbols demo?

What is a svg symbols demo? How do you make a svg symbols demo? This script and codes were developed by Massimo Cassandro on 09 November 2022, Wednesday.

SVG symbols demo Previews
IQ Test

SVG symbols demo - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SVG symbols demo</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <svg display="none">	<symbol id="icon-bell" viewBox="0 0 1024 1024">	<title>bell</title>	<path class="path1" d="M97.6 758.4c20.8 11.2 60.8 27.2 132.8 38.4 12.8 1.6 25.6 4.8 40 6.4 11.2 123.2 116.8 220.8 243.2 220.8s230.4-97.6 243.2-220.8c12.8-1.6 25.6-3.2 38.4-6.4 60.8-11.2 107.2-24 137.6-43.2 24-14.4 40-36.8 46.4-62.4 6.4-27.2 0-56-16-78.4-4.8-6.4-8-11.2-12.8-16-3.2-3.2-4.8-6.4-8-9.6-1.6-1.6-1.6-3.2-3.2-4.8l-8-11.2c-54.4-70.4-91.2-118.4-91.2-276.8 0-166.4-147.2-302.4-328-302.4-88 0-171.2 32-233.6 89.6-60.8 57.6-94.4 132.8-92.8 211.2 0 156.8-36.8 204.8-91.2 276.8l-6.4 9.6c-6.4 8-12.8 16-17.6 22.4-1.6 3.2-4.8 6.4-6.4 9.6-17.6 22.4-24 52.8-17.6 81.6s25.6 51.2 51.2 65.6zM512 896c-51.2 0-96-33.6-110.4-80 35.2 1.6 72 3.2 108.8 3.2 38.4 0 75.2-1.6 112-3.2-14.4 46.4-59.2 80-110.4 80zM196.8 649.6c59.2-80 116.8-155.2 116.8-355.2 0-43.2 17.6-84.8 52.8-116.8 38.4-35.2 89.6-54.4 145.6-54.4 110.4 0 200 78.4 200 174.4 0 201.6 57.6 276.8 118.4 355.2l3.2 4.8c-14.4 4.8-35.2 9.6-60.8 14.4-72 12.8-164.8 19.2-260.8 19.2s-187.2-6.4-260.8-19.2c-25.6-4.8-44.8-9.6-59.2-12.8l4.8-9.6z"></path>	</symbol>	<symbol id="icon-circle-check" viewBox="0 0 1024 1024">	<title>circle-check</title>	<path class="path1" d="M512 0c-281.6 0-512 230.4-512 512s230.4 512 512 512 512-230.4 512-512-230.4-512-512-512zM512 896c-211.2 0-384-172.8-384-384s172.8-384 384-384 384 172.8 384 384-172.8 384-384 384z"></path>	<path class="path2" d="M656 329.6l-244.8 244.8-65.6-128c-16-32-54.4-43.2-86.4-27.2s-43.2 54.4-27.2 86.4l105.6 206.4c9.6 17.6 27.2 30.4 46.4 33.6 3.2 0 6.4 0 9.6 0 17.6 0 33.6-6.4 44.8-19.2l307.2-307.2c25.6-25.6 25.6-65.6 0-91.2-24-22.4-64-22.4-89.6 1.6z"></path>	</symbol>	<symbol id="icon-circle-erase" viewBox="0 0 1024 1024">	<title>circle-erase</title>	<path class="path1" d="M512 1024c0 0 0 0 0 0 137.6 0 265.6-52.8 363.2-150.4s150.4-225.6 148.8-361.6c0-281.6-230.4-512-512-512-136 0-265.6 52.8-361.6 150.4s-150.4 225.6-150.4 361.6c0 283.2 230.4 512 512 512zM240 240c72-72 169.6-112 272-112 211.2 0 384 172.8 384 384 0 102.4-40 198.4-112 272-72 72-169.6 112-272 112v0c-211.2 0-384-172.8-384-384 0-102.4 40-198.4 112-272z"></path>	<path class="path2" d="M420.8 512l-124.8 124.8c-25.6 25.6-25.6 65.6 0 91.2 12.8 12.8 28.8 19.2 44.8 19.2s33.6-6.4 44.8-19.2l124.8-124.8 124.8 124.8c12.8 12.8 28.8 19.2 44.8 19.2s33.6-6.4 44.8-19.2c25.6-25.6 25.6-65.6 0-91.2l-124.8-124.8 124.8-124.8c25.6-25.6 25.6-65.6 0-91.2s-65.6-25.6-91.2 0l-124.8 124.8-124.8-124.8c-25.6-25.6-65.6-25.6-91.2 0s-25.6 65.6 0 91.2l128 124.8z"></path>	</symbol>	<symbol id="icon-lighting" viewBox="0 0 1024 1024">	<title>lighting</title>	<path class="path1" d="M611.2 848c-11.2 33.6 6.4 70.4 40 81.6l260.8 91.2c6.4 1.6 14.4 3.2 20.8 3.2 12.8 0 24-3.2 35.2-9.6 16-11.2 27.2-28.8 28.8-48l28.8-299.2c3.2-35.2-22.4-65.6-57.6-70.4-35.2-3.2-65.6 22.4-70.4 57.6l-8 86.4c-156.8-297.6-334.4-633.6-347.2-659.2-11.2-27.2-40-41.6-68.8-36.8-49.6 8-52.8 54.4-56 84.8-1.6 17.6-3.2 41.6-4.8 70.4-3.2 57.6-8 132.8-11.2 209.6-1.6 28.8-3.2 62.4-4.8 96-80-137.6-190.4-326.4-275.2-472-17.6-30.4-57.6-41.6-88-24s-41.6 57.6-24 88c0 0 96 164.8 190.4 328 48 81.6 96 164.8 131.2 225.6 17.6 30.4 33.6 56 44.8 75.2 20.8 35.2 41.6 70.4 89.6 57.6 27.2-8 46.4-32 48-60.8 1.6-20.8 11.2-217.6 19.2-382.4 56 105.6 139.2 265.6 267.2 507.2l-105.6-36.8c-35.2-14.4-72 3.2-83.2 36.8z"></path>	</symbol>	<symbol id="icon-spanner" viewBox="0 0 1024 1024">	<title>spanner</title>	<path class="path1" d="M11.2 313.6c-25.6 60.8-14.4 172.8 97.6 286.4 56 56 132.8 88 216 88 32 0 64-4.8 94.4-12.8l281.6 288c38.4 40 92.8 62.4 145.6 62.4 48 0 92.8-17.6 124.8-51.2l1.6-1.6c70.4-72 65.6-193.6-11.2-272l-284.8-291.2c27.2-110.4-1.6-220.8-78.4-297.6-96-96-180.8-110.4-224-110.4-57.6 0-102.4 24-120 64-14.4 32-8 68.8 17.6 97.6 0 0 1.6 1.6 1.6 1.6l60.8 60.8c32 32 32 83.2 0 113.6-14.4 14.4-35.2 24-56 24-22.4 0-41.6-8-57.6-24l-60.8-60.8c0 0-1.6-1.6-1.6-1.6-17.6-16-40-25.6-62.4-25.6-35.2-1.6-68.8 22.4-84.8 62.4zM281.6 489.6c56 0 107.2-22.4 147.2-60.8 76.8-76.8 80-198.4 12.8-281.6 19.2 11.2 43.2 27.2 67.2 52.8 49.6 49.6 64 128 35.2 201.6-8 24-3.2 49.6 14.4 67.2l312 318.4c27.2 27.2 32 72 11.2 92.8l-1.6 1.6c-11.2 11.2-24 12.8-33.6 12.8-19.2 0-38.4-9.6-54.4-24l-310.4-316.8c-12.8-12.8-28.8-19.2-46.4-19.2-8 0-17.6 1.6-25.6 4.8-27.2 11.2-57.6 17.6-86.4 17.6-49.6 0-92.8-17.6-126.4-49.6-24-24-41.6-48-52.8-67.2 41.6 32 88 49.6 137.6 49.6z"></path>	</symbol>	<symbol id="icon-umbrella" viewBox="0 0 1024 1024">	<title>umbrella</title>	<path class="path1" d="M512 0c-281.6 0-512 230.4-512 512 0 35.2 28.8 64 64 64h384v244.8c0 112 91.2 203.2 203.2 203.2s203.2-91.2 203.2-203.2c0-35.2-28.8-64-64-64s-64 28.8-64 64c0 41.6-33.6 75.2-75.2 75.2s-75.2-33.6-75.2-75.2v-244.8h384c0 0 0 0 0 0 35.2 0 64-28.8 64-64 0-1.6 0-4.8 0-6.4-3.2-280-232-505.6-512-505.6zM132.8 448c30.4-180.8 188.8-320 379.2-320s348.8 139.2 379.2 320h-758.4z"></path>	</symbol>
</svg>
<h1>SVG symbols</h1>
<div class="icon">	<svg>	<use xlink:href="#icon-bell"></use>	</svg>
</div>
<div class="icon">	<svg>	<use xlink:href="#icon-circle-check"></use>	</svg>
</div>
<div class="icon">	<svg>	<use xlink:href="#icon-circle-erase"></use>	</svg>
</div>
<div class="icon">	<svg>	<use xlink:href="#icon-lighting"></use>	</svg>
</div>
<div class="icon">	<svg>	<use xlink:href="#icon-spanner"></use>	</svg>
</div>
<div class="icon">	<svg>	<use xlink:href="#icon-umbrella"></use>	</svg>
</div>
</body>
</html>

SVG symbols demo - Script Codes CSS Codes

.icon {	background-color:#d1ff7d;	display: inline-block;	margin:.5em;
}
.icon svg {	width:100px;	height: 100px;
}
SVG symbols demo - Script Codes
SVG symbols demo - Script Codes
Home Page Home
Developer Massimo Cassandro
Username massimo-cassandro
Uploaded November 09, 2022
Rating 3
Size 3,246 Kb
Views 22,264
Do you need developer help for SVG symbols demo?

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!

Massimo Cassandro (massimo-cassandro) Script Codes
Name
Google maps circle method
PDF Flyer generator
JQuery UI Autocomplete for Bootstrap
Colspan auto
CSS sprites example
JQuery UI Datepicker
Nested table email layout
SVG dinamyc chart
Checkbox with SVG icon
Grumpicon demo
Create amazing blog posts 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!