SVG Icons Template
How do I make an svg icons template?
What is a svg icons template? How do you make a svg icons template? This script and codes were developed by Colm Hewson on 28 November 2022, Monday.
SVG Icons Template - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SVG Icons Template</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- Here be the container, and within that the SVG -->
<div class="container"> <div class="svg-container"> <svg version="2" xmlns="http://www.w3.org/2000/svg"> <g id="triangle-bg"> <polygon class="incident-icon-bg" points="75,10 140,120 10,120" /> </g> <g id="the-thing"> </g> <g id="triangle-outer"> <polygon class="incident-icon" points="75,10 140,120 10,120" /> <polygon class="incident-pointy-bit" points="55,120 95,120 75,150" /> </g> </svg> </div>
</div>
<!-- CSS edge borders -->
<div class="top-x-border">
</div>
<div class="bottom-x-border">
</div>
<div class="left-y-border">
</div>
<div class="right-y-border">
</div>
</body>
</html>
SVG Icons Template - Script Codes CSS Codes
/* All of the structural CSS stuff here */
body { width: 100%; height: 100%; margin: 0; top: 0px; bottom: 0px; left: 0px; right: 0px; background: #f1f1f1; z-index: 0;
}
.container { width: 200px; height: 200px; background: grey; display: block; position: absolute; top: 50%; left: 50%; margin-top: -100px; margin-left: -100px; box-shadow: 3px 5px 10px 0px rgba(0, 0, 0, 0.2); z-index: 1;
}
.svg-container { width: 150px; height: 150px; display: block; position: absolute; top: 50%; left: 50%; margin-top: -75px; margin-left: -75px;
}
.top-x-border { width: 100%; height: 1px; height: 1px; background: rgba(0, 255, 255, 0.5); display: block; position: absolute; top: 50%; margin-top: -75px; left: 0px; z-index: 3;
}
.bottom-x-border { width: 100%; height: 1px; background: rgba(0, 255, 255, 0.5); display: block; position: absolute; top: 50%; margin-top: 75px; left: 0px; z-index: 3;
}
.left-y-border { width: 1px; height: 100%; background: rgba(0, 255, 255, 0.5); display: block; position: absolute; top: 0px; left: 50%; margin-left: -75px; z-index: 3;
}
.right-y-border { width: 1px; height: 100%; background: rgba(0, 255, 255, 0.5); display: block; position: absolute; top: 0px; left: 50%; margin-left: 75px; z-index: 3;
}
/* Here are the colours */
/* Here's the SVG CSS */
.incident-icon { fill: none; stroke: #e34c3a; stroke-width: 10px; stroke-linejoin: round;
}
.incident-icon-bg { fill: #f1f1f1; stroke: none;
}
.incident-pointy-bit { fill: #e34c3a;
}
Developer | Colm Hewson |
Username | legofsalmon |
Uploaded | November 28, 2022 |
Rating | 3 |
Size | 2,618 Kb |
Views | 10,120 |
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 |
Brens thing | 4,542 Kb |
Listy - Version 1 | 7,049 Kb |
SVG Animate Test | 3,310 Kb |
Breadcrumbs for motor journey top bar thing. | 8,548 Kb |
Get a Route - Draft | 5,279 Kb |
Get a Route - Draft v02 | 6,979 Kb |
A Pen by Colm Hewson | 12,521 Kb |
SVG Icons Template - Event | 5,373 Kb |
Information Icon | 3,613 Kb |
Map Marker Test | 2,330 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 |
Tumblr API | Juanv911 | 2,436 Kb |
Lecture 1 | Law | 0 Kb |
Greyscale image with filter in CSS3 | NickyCDK | 1,562 Kb |
Simple jQuery Slider | Jurbank | 2,874 Kb |
A Pen by aleen42 | Aleen42 | 11,473 Kb |
Vue Transition | Chenming142 | 4,561 Kb |
Word Wrap Algorithm for Multiline Canvas Text | Peterhry | 2,349 Kb |
Drop Cap | Gsaiki | 1,571 Kb |
CubeTronic | Jurbank | 3,716 Kb |
Algorithm practice | Abensur | 5,620 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!