-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
75 lines (70 loc) · 1.91 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!doctype html>
<html lang="en">
<head>
<title>SVG Icon Shadow</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="svgshadow.js"></script>
<style>
*
{
margin: 0;
padding: 0;
}
</style>
<script>
"use strict";
function GenerateShadows()
{
$('svg').each(function()
{
var path = $(this).find('> path.geometry').attr('d');
var shadowPath = PathToSVGShadowPath(path, 24, 24);
$(this).find('> path.shadow').attr('d', shadowPath);
});
}
$(document).ready(function ()
{
$.ajax(
{
url : "icons.txt",
dataType: "text",
success : function (data)
{
data.split('\n').forEach(function(line)
{
var i = line.indexOf(',');
var name = line.slice(0, i);
var path = line.slice(i + 1);
$('body').append
(
$('<p></p>').text(name),
'<svg width="24" height="24">' +
'<defs>' +
'<filter id="blur" x="0" y="0">' +
'<feGaussianBlur in="SourceGraphic" stdDeviation="0.4" />' +
'</filter>' +
'<linearGradient id="Gradient" x1="0" y1="0" x2="1" y2="1">' +
'<stop offset="0%" stop-color="rgba(0,0,0,0.4)"/>' +
'<stop offset="100%" stop-color="rgba(0,0,0,0)"/>' +
'</linearGradient>' +
'</defs>' +
'<path class="shadow" fill="none" stroke="#ff0000" stroke-opacity="0.3" stroke-width="1" d="M0,0"></path>' +
//'<path class="shadow" fill="url(#Gradient)" style="filter: url(#blur);" d="M0,0"></path>' +
'<path class="geometry" fill="#000000" d=' + path + ' />' +
'</svg>'
);
});
GenerateShadows();
}
});
});
</script>
</head>
<body>
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<!--<path class="shadow" fill="#000000" fill-opacity="0.5" d="M0,0"></path>-->
<path class="shadow" fill="none" stroke="#ff0000" stroke-opacity="0.3" stroke-width="1" d="M0,0"></path>
<path class="geometry" fill="#000000" d="" />
</svg>
</body>
</html>