-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
82 lines (70 loc) · 2.48 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
76
77
78
79
80
81
82
<!doctype html>
<html lang="en">
<head>
<title>SVG Bullet Test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="item-container">
<div class="item">
Normal bullet
<ul>
<li>
Extra Mod Slot
</li>
</ul>
</div>
<div class="item">
SVG bullet inline in HTML:
<ul class="custom-list">
<li>
<!--
SVG optimized - https://svgoptimizer.com
and svg3025 id re-added for CSS styling
-->
<svg id="svg3025" xmlns="http://www.w3.org/2000/svg" viewBox="0 -256 1792 1792"><path d="M1024 640q0 106-75 181t-181 75q-106 0-181-75t-75-181q0-106 75-181t181-75q106 0 181 75t75 181zm512 109V527q0-12-8-23t-20-13l-185-28q-19-54-39-91 35-50 107-138 10-12 10-25t-9-23q-27-37-99-108t-94-71q-12 0-26 9l-138 108q-44-23-91-38-16-136-29-186-7-28-36-28H657q-14 0-24.5 8.5T621-98L593 86q-49 16-90 37L362 16q-10-9-25-9-14 0-25 11-126 114-165 168-7 10-7 23 0 12 8 23 15 21 51 66.5t54 70.5q-27 50-41 99L29 495q-13 2-21 12.5T0 531v222q0 12 8 23t19 13l186 28q14 46 39 92-40 57-107 138-10 12-10 24 0 10 9 23 26 36 98.5 107.5T337 1273q13 0 26-10l138-107q44 23 91 38 16 136 29 186 7 28 36 28h222q14 0 24.5-8.5T915 1378l28-184q49-16 90-37l142 107q9 9 24 9 13 0 25-10 129-119 165-170 7-8 7-22 0-12-8-23-15-21-51-66.5t-54-70.5q26-50 41-98l183-28q13-2 21-12.5t8-23.5z" style="fill:currentColor" transform="matrix(1 0 0 -1 121.492 1285.424)"/></svg>
Extra Mod Slot
</li>
</ul>
</div>
</div>
<div class="item-container">
<div class="item">
SVG bullet inline in CSS:
<ul class="custom-list">
<li class="bullet-svg-inline">
Extra Mod Slot
</li>
</ul>
</div>
<div class="item">
SVG bullet inline in CSS (inverted):
<ul class="custom-list">
<li class="bullet-svg-inline-inverted">
Extra Mod Slot
</li>
</ul>
</div>
</div>
<div class="item-container">
<div class="item">
SVG bullet linked in CSS:
<ul class="custom-list">
<li class="bullet-svg-linked">
Extra Mod Slot
</li>
</ul>
</div>
<div class="item">
SVG bullet linked in CSS (inverted):
<ul class="custom-list">
<li class="bullet-svg-linked-inverted">
Extra Mod Slot
</li>
</ul>
</div>
</div>
</body>
</html>