forked from edent/SuperTinyIcons
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathradius.html
122 lines (112 loc) · 4.51 KB
/
radius.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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Super Tiny Icons - SVG Radius Tool</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/picnicss/6.3.2/picnic.min.css">
<style>
body {
width: 100%;
max-width: 800px;
margin: 50px auto;
padding: 20px;
font-family: sans-serif;
background: #f0f8ff;
}
@media all and (max-width: 600px) {
body {
margin: 0 auto;
}
}
h1, h2 {
padding-top: 0;
}
input {
margin: 0 0 .6em 0;
}
svg {
display: block;
position: absolute;
}
.overlay {
position: absolute;
opacity: 0.25;
}
.underlay {
position: relative;
height:150px;
}
</style>
</head>
<body>
<h1>Super Tiny Icons</h1>
<a href="https://github.com/edent/SuperTinyIcons">Download the SuperTinyIcons SVGs on GitHub</a>
<p>This is the standard guideline. Use this to help with sizing your icons and they will look good no matter what border radius is chosen.</p>
<img src="https://edent.github.io/SuperTinyIcons/images/guidelines/guideline.svg" width="128" alt="A template for logos" />
<ul>
<li><strong>Green</strong> is the safe zone, where the main body of the icon should be.</li>
<li><strong>Yellow</strong> is like a road shoulder, it is there if more space is needed. It should be used for protruding elements, like corners or ornaments.</li>
<li><strong>Red</strong> is off limits. It should not be touched by the icons. Red is also how a circular icon would look.</li>
</ul>
<section class="flex two four-800">
<h2>Radius %</h2>
<label>
<input class="rangeout" value="15">
</label>
<label class="full half-800">
<input type="range" value="15" min="0" max="50" name="radius" placeholder="">
</label>
</section>
<div class="icons flex three four-500 five-700 six-900"></div>
<script>
var items = [
'../guidelines/guideline',
'amazon', 'github', 'html5', 'mastodon', 'reddit', 'soundcloud',
'tox', 'wechat', 'youtube', 'dropbox', 'gitlab', 'instagram',
'paypal', 'rss', 'spotify', 'tumblr', 'whatsapp', 'email',
'google_plus','linkedin', 'pdf', 'skype', 'stackoverflow','twitter',
'wikipedia', 'facebook', 'google', 'lock', 'phone', 'slideshare',
'steam', 'vimeo', 'wire', 'flickr', 'hackernews', 'mail',
'pinterest', 'snapchat', 'telegram', 'vk', 'wordpress', 'meetup',
'line', 'lastpass', 'windows', 'digidentity','ubuntu', 'bitbucket',
'apple', 'npm', 'docker', 'symantec', 'yubico', 'keybase',
'ebay', 'evernote', 'kickstarter','yahoo', 'bitcoin', 'bluetooth',
'ibm', 'yammer', 'android', 'authy', 'blogger', 'cloudflare',
'codepen', 'digitalocean','discord', 'medium', 'airbnb', 'wifi',
'delicious', 'disqus', 'ghost', 'opensource', 'patreon', 'trello',
'intel', 'badoo', 'laravel', 'twilio', 'google_play', 'gmail',
'plex', 'slack', 'xing', 'pinboard', 'internet_archive', 'samsunginternet',
'baidu', 'twitch', 'ok', 'pocket', 'stumbleupon', 'viber',
'workato', 'sketch', 'vlc', 'google_maps','access', 'ethereum',
'opencast', 'stackexchange', 'qq', 'vegetarian', 'gogcom'
];
var container = document.querySelector('.icons');
var range = document.querySelector('input[type="range"]');
var number = document.querySelector('input.rangeout');
range.addEventListener('input', function(e){
number.value = parseInt(e.target.value);
render(e.target.value);
});
number.addEventListener('input', function(e){
range.value = parseInt(e.target.value);
render(e.target.value);
});
var urls = items.map(item => 'images/svg/' + item + '.svg');
var icons;
Promise.all(urls.map(url => fetch(url).then(res => res.text()))).then(all => {
icons = all.map(icon => {
return icon;
});
render(range.value);
});
var render = function(radius = 15){
console.log('Rendering!', icons);
icons = icons.map(icon => {
return icon.replace(/rx\=\"\d{0,2}\%/, 'rx="' + radius + '%"');
});
container.innerHTML = '<div class="underlay">' + icons.join('<img class="overlay" src="images/guidelines/guideline.svg"/></div><div class="underlay">') + '<img class="overlay" src="images/guidelines/guideline.svg"/></div>';
}
</script>
</body>
</html>