-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathindex.html
executable file
·287 lines (252 loc) · 23.1 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
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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
<!doctype html>
<html lang="en">
<head>
<title>Adapticon</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="theme-color" content="#FFFFFF">
<meta name="robots" content="all">
<meta name="description"
content="The app icon is one of the most important assets of an app and therefore it is key to make it look perfect on any device. Adaptive Icons make that possible and also allow you to add a nice little extra touch to your app.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://adapticon.mariusclaret.com/">
<meta property="og:title" content="Adapticon">
<meta property="og:image" content="https://adapticon.mariusclaret.com/icon-solid-512.png">
<meta property="og:description"
content="The app icon is one of the most important assets of an app and therefore it is key to make it look perfect on any device. Adaptive Icons make that possible and also allow you to add a nice little extra touch to your app.">
<meta name="twitter:card" content="summary">
<meta name="twitter:creator" content="@mariusclaret">
<meta name="twitter:title" content="Adapticon">
<meta name="twitter:image" content="https://adapticon.mariusclaret.com/icon-solid-512.png">
<meta name="twitter:description"
content="The app icon is one of the most important assets of an app and therefore it is key to make it look perfect on any device. Adaptive Icons make that possible and also allow you to add a nice little extra touch to your app.">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="Adapticon">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="manifest" href="/manifest.json">
<link rel="icon" type="image/png" sizes="512x512" href="/icon-clear-512.png">
<link rel="apple-touch-icon" sizes="512x512" href="/icon-solid-512.png">
<link rel="canonical" href="https://adapticon.mariusclaret.com/">
<link rel="stylesheet" href="/style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,500,700,900&display=swap">
<script src="/script.js" defer></script>
</head>
<body>
<svg id="branding" viewBox="0 0 1200 240">
<path
d="M820 8.4C810.6 11 803.8 17 800.3 26c-1.7 4.2-1.8 11-2 89-.5 92.5-.4 94 5 103 6.3 10.5 22 15.6 40.2 13.2 17-2.2 25.5-10 28.4-25.7.4-3.3 1-17.5 1-32 0-22.6-.3-26.6-1.7-28-1.2-1.2-4-1.5-13.7-1.5-6.7 0-13 .5-13.7 1-1.4.8-1.7 5.4-2 28-.6 24.5-.8 27-2.5 29-2.4 2.5-6 2.6-8.6 0-2-2-2-3.3-2-82.3 0-89.3-.5-84.7 6.4-84.7 5.8 0 6.5 2.7 6.5 25 0 15.8.2 19 1.5 20.4 1.2 1.3 4 1.6 13.8 1.6 17 0 16 2 15.4-27.2-.4-20.7-.7-24-2.5-28.6-3.2-8-6.6-11.7-14-15.4-6.4-3-7.3-3.3-19.3-3.5-8 0-14.3.3-17 1zm87.5 0C894 12.6 888 20.6 886 37c-1.4 11.3-1.4 153.5 0 165 1.8 14.8 7.3 22.6 19 27.2 4.5 1.7 7.8 2 17.5 2 6.6.2 13.8-.3 16-1 6-1.8 13-6.6 16-11.2 6-9 6-7.3 6.3-94 .2-50.8 0-82.6-.7-88-2-16-8.3-24.7-21.3-28.5-6-1.8-25.4-2-31 0zm20 28.7c2 2 2 5 2 82 0 74.6 0 80-1.8 82.4-2.2 3.5-7 3.7-9 .5-1.5-2-1.7-11.6-1.7-83 0-72 .2-81 1.6-82.3 2.2-2.3 6.7-2 9 .5zm158.8-28c-17 5.8-21.3 15.3-21.3 47 0 29 3 36.6 24 60.4 10.2 11.6 15.4 20 18 28.8 2 6 2 9 1.8 31.4-.3 23.2-.4 25-2.2 26.2-2.7 2-6 1.8-8-.4-1.3-1.5-1.5-5.7-1.8-29-.3-25.7-.4-27.4-2.2-28.8-1.5-1-5-1.4-13.6-1.4-17.3 0-16-2.4-16 29.3 0 14.4.5 29 1 32.6 2.6 15.5 11 23.7 27.2 26 8.3 1.5 20.6.8 26.7-1.4 7.7-2.7 12.5-7 16-14.2l3.4-6.8.3-32.4c.4-37-.3-42-7-54.7-4-8-7.7-13-17.4-23.3-8-8.5-14-17-16.4-23.6-1.7-4.4-2-8-2-20.3-.3-17 .3-19 5.4-19 6 0 6.5 2 6.5 21 0 12.8.2 17 1.3 18.6 1.3 1.5 3 2 13 2 9.5.4 12.2 0 14-1l2.6-1.7V54.7c0-21.3-1-28.2-5.5-34.7-3.4-5.2-9.6-9.6-16-11.5-7.2-2.2-25.6-2-32.3.4zM83 10.7c-2.3 2-5 11.5-9.6 32.8-8 38-13.3 102.3-13.4 161.2 0 18 .2 21.4 1.6 22.7 2.3 2.3 25.5 2.3 27.8 0C90.7 226 91 223 91 209v-17l6.3.2 6.2.3.5 17.3c.4 14 .8 17.5 2 18.2 2.3 1.5 26.3 1.3 27.8-.2 2.3-2.3 1.2-66.3-2-105.8-3-39.3-6.7-65-13.3-92-3.4-13.5-4.8-18-6.5-19.2-3.2-2.6-25.7-2.6-29 0zM100 81c1.6 21 3 52.4 3 68.6V164H91l.5-14.3c2.3-58.2 3.5-78 5.2-88.2l.7-4 .7 4.7c.6 2.5 1.4 11 2 19zm51-70l-2 2v106.3c0 101.8 0 106.5 1.8 108 1.6 1.5 4.7 1.7 23 1.7 11.6 0 23.3-.5 26-1 7-1.5 15-6.7 18.4-11.6 6-9 6-8 5.6-100.2l-.3-84-3.5-6.8c-3-5.8-4.4-7.4-9-10.2-3-1.8-7-3.7-9-4.3-2-.8-13.7-1.5-26-1.8-22.2-.5-22.8-.5-25 1.6zm39.5 28.5L193 42v77.5c0 76.2 0 77.5-2 79.5-1.4 1.4-3.3 2-6.5 2H180v-81.3c0-44.8.3-81.7.7-82 1.6-1.7 7.5-.6 9.8 1.8zm69.2-28.2c-4 4-11.7 39.3-15.7 71.7-4.2 35.3-7 82.7-7 121 0 18.5.2 22 1.6 23.4 1.2 1.3 4 1.6 13.8 1.6 16.4 0 15.6 1 15.6-20.4V192l6.3.2 6.2.3.5 17.3c.4 14 .8 17.5 2 18.2 2.3 1.5 26.3 1.3 27.8-.2s1.6-40.3.2-70.3c-2.8-57.8-7.4-95.3-16-129.3-3-11.8-4.4-16-6-17.4-2-1.5-4.3-1.8-14.7-1.8-11.5 0-12.5.2-14.6 2.3zM276.4 76c2 21 3.6 57 3.6 75v13h-12l.4-13.8L270 112c1.2-28.4 3.4-55 4.5-53.8.2 0 1 8.2 2 17.8zM328 11c-2 2-2 3.3-2 108.3 0 101.8 0 106.5 1.8 108 1.5 1.4 4 1.7 13.6 1.7 6.4 0 12.6-.5 13.7-1 2-1 2-2.6 2-48v-46.7l10.4-.5c16.2-.7 24.7-5.5 30-16.7l3.2-6.4v-77L398 27c-7-14.6-16.6-18-51.2-18-15.5 0-17 .2-18.8 2zm39.6 28.5L370 42l-.2 30c-.3 34.2 0 33-8.5 33H357V71.7c0-18.4.3-33.7.7-34 1.6-1.7 7.5-.6 10 1.8zm44.6-29c-2 1.5-2.2 2.4-2.2 13 0 8 .4 11.6 1.3 12.3.7.6 5 1.2 9.2 1.4l8 .3.3 94.4c0 67.5.5 94.6 1.3 95.6 1 1 4.6 1.3 14 1.3 11 0 13-.3 14.4-2 1.6-1.6 1.7-9.7 1.7-96V37h8c10.6 0 11-.6 11-13.8C479 8 481.7 9 444.8 9c-25.8 0-30.6.2-32.5 1.6zm80 0L490 12v107c0 96 .2 107 1.6 108.5 1.2 1.3 4 1.6 13.8 1.6 10.6 0 12.5 0 14-1.7s1.6-10.6 1.6-108c0-105 0-106.2-2-108.2-1.8-1.7-3.3-2-13.3-2-8.6 0-11.8.5-13.5 1.7zm45 .2l-2.5 1.6.6 36.6c.8 45.5 2.3 70 6.8 107.4 3.7 29 12.3 68.7 15.7 71.2 1.2 1 6 1.3 15 1.3 11.3 0 13.3-.3 14.7-2 2-2.3 9-29 12-47 6.4-36.6 10.7-95 10.7-145.3C610 7.2 611 9 594.4 9 578 9 579 7 579 38.7c0 56.5-4.6 147.5-7 140.7-1-2.6-2.8-23.2-4-44.4-.6-9.6-1.3-41-1.7-70-.6-49-.7-52.4-2.5-54.2-2.6-2.6-23-2.7-26.7 0zm89 0L624 12v107c0 95.8.2 107 1.6 108.4 1.3 1.4 5.7 1.6 32.4 1.6 36.8 0 34 1.2 34-14.2 0-14 .4-13.8-20.5-13.8H655l.2-43.8.3-43.7 16-.3c9.6 0 16.4-.7 17.2-1.3 1-1 1.3-4.5 1.3-12.7 0-15 .7-14.4-19.7-14.4H655V37h17c20.7 0 20 .5 20-14.2C692 8 694.4 9 658.2 9c-25.3 0-30 .2-32 1.6zm128.2-1C751 12 751 14.2 751 119.3c0 82 .3 104.8 1.3 106.8 1.2 2.6 1.5 2.6 14.4 3 13 .2 13.2 0 14.8-2 1.4-2.3 1.5-14 1.3-108.8-.3-103.8-.3-106.2-2.2-107.6-1.5-1-5-1.4-13.5-1.4-6.2 0-12 .4-12.5.8zm223.8 1L976 12v107c0 95.8.2 107 1.6 108.4 1.2 1.3 4 1.6 13.8 1.6 10.6 0 12.5-.2 14-1.8 1.4-1.7 1.6-9.6 1.8-88.3l.3-86.6 3.7 7c2 4 4.8 11 6 15.6 2 8.3 2.2 10 2.5 79.5.4 63.3.6 71.2 2 72.7s3.4 1.8 14.3 1.8c8.5 0 13-.4 13.8-1.2 1-1 1.2-26.4 1.2-108.4V12l-2.2-1.4c-1.7-1.2-5-1.6-13.5-1.6-15 0-15.3.2-15.3 14.2v10.3l-4.8-7.5c-6.8-10.6-10.7-14.8-15-16-6-1.6-19.4-1.3-22 .6z" />
</svg>
<div id="examples">
<div id="examples_items"></div>
<div id="examples_left"></div>
<div id="examples_right"></div>
</div>
<a id="originator">
<img id="originator_image">
<div id="originator_title"></div>
<div id="originator_fade"></div>
<svg id="originator_twitter" viewBox="0 0 24 24">
<path
d="M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z" />
</svg>
</a>
<div id="preview">
<div id="preview_content">
<img id="preview_background" src="/background.png">
<img id="preview_foreground" src="/foreground.png">
<div id="preview_custom"></div>
<div id="preview_masking">
<svg id="preview_google" viewBox="0 0 576 576">
<path
d="M0,0 L576,0 L576,576 L0,576 L0,0 Z M288,384 C341.019336,384 384,341.019336 384,288 C384,234.980664 341.019336,192 288,192 C234.980664,192 192,234.980664 192,288 C192,341.019336 234.980664,384 288,384 Z" />
</svg>
<svg id="preview_apple" viewBox="0 0 576 576">
<path
d="M0,0 L576,0 L576,576 L0,576 L0,0 Z M226,192 C207.222319,192 192,207.222319 192,226 L192,226 L192,350 C192,368.777681 207.222319,384 226,384 L350,384 C368.777681,384 384,368.777681 384,350 L384,226 C384,207.222319 368.777681,192 350,192 L226,192 Z" />
</svg>
<svg id="preview_microsoft" viewBox="0 0 576 576">
<path d="M0,0 L576,0 L576,576 L0,576 L0,0 Z M192,192 L192,384 L384,384 L384,192 L192,192 Z" />
</svg>
<svg id="preview_samsung" viewBox="0 0 576 576">
<path
d="M0,0 L576,0 L576,576 L0,576 L0,0 Z M288,192 C213.333333,192 192,213.333333 192,288 C192,362.666667 213.386667,384 288,384 C362.613333,384 384,362.666667 384,288 C384,213.333333 362.613333,192 288,192 Z" />
</svg>
</div>
</div>
<svg id="preview_ruler" viewBox="0 0 384 384">
<path
d="M48 0v47h47V0h1v47h47V0h1v47h47.5V0h1v47H240V0h1v47h47V0h1v47h47V0h1v47h47v1h-47v47h47v1h-47v47h47v1h-47v47.5h47v1h-47V240h47v1h-47v47h47v1h-47v47h47v1h-47v47h-1v-47h-47v47h-1v-47h-47v47h-1v-47h-47.5v47h-1v-47H144v47h-1v-47H96v47h-1v-47H48v47h-1v-47H0v-1h47v-47H0v-1h47v-47H0v-1h47v-47.5H0v-1h47V144H0v-1h47V96H0v-1h47V48H0v-1h47V0h1zm192 289h-47.5v47H240v-47zm-145 0H48v47h47v-47zm96.5 0H144v47h47.5v-47zm96.5 0h-47v47h47v-47zm48 0h-47v47h47v-47zm-193 0H96v47h47v-47zm97-48h-47.5v47H240v-47zm-145 0H48v47h47v-47zm48 0H96v47h47v-47zm48.5 0H144v47h47.5v-47zm96.5 0h-47v47h47v-47zm48 0h-47v47h47v-47zm0-48.5h-47V240h47v-47.5zm-48 0h-47V240h47v-47.5zm-48 0h-47.5V240H240v-47.5zm-48.5 0H144V240h47.5v-47.5zm-48.5 0H96V240h47v-47.5zm-48 0H48V240h47v-47.5zM288 144h-47v47.5h47V144zm48 0h-47v47.5h47V144zm-96 0h-47.5v47.5H240V144zm-48.5 0H144v47.5h47.5V144zm-48.5 0H96v47.5h47V144zm-48 0H48v47.5h47V144zm96.5-48H144v47h47.5V96zm48.5 0h-47.5v47H240V96zm48 0h-47v47h47V96zm48 0h-47v47h47V96zm-193 0H96v47h47V96zm-48 0H48v47h47V96zm0-48H48v47h47V48zm241 0h-47v47h47V48zm-48 0h-47v47h47V48zm-48 0h-47.5v47H240V48zm-48.5 0H144v47h47.5V48zM143 48H96v47h47V48z" />
</svg>
<div id="preview_moving"></div>
<input id="preview_top" class="preview_corner" type="number" min="0" max="100" value="24">
<input id="preview_right" class="preview_corner" type="number" min="0" max="100" value="24">
<input id="preview_bottom" class="preview_corner" type="number" min="0" max="100" value="24">
<input id="preview_left" class="preview_corner" type="number" min="0" max="100" value="24">
</div>
<div id="options">
<p class="options_heading">Layers</p>
<input id="options_background_input" placeholder="Background">
<svg id="options_background_browse" class="options_button" viewBox="0 0 40 40">
<path
d="M16 10a6 6 0 015.45 3.48 5 5 0 018.39 4.8A6 6 0 0128.21 30H22v-7.17l.83.83a2 2 0 002.94-2.7l-.11-.13-4.24-4.24a2 2 0 00-2.7-.12l-.13.12-4.25 4.24a2 2 0 002.7 2.94l.13-.11.83-.83V30h-6a6 6 0 01-1.58-11.79A6 6 0 0116 10z" />
</svg>
<svg id="options_background_spinner" viewBox="0 0 40 40">
<path
d="M19.8 8h.2A12 12 0 118 20v-.3.1c0-.35.14-.68.38-.92s.56-.38.9-.38h1.44c.34 0 .67.14.9.38.25.24.38.57.38.92V20a8 8 0 108.25-8L19.8 12a1.3 1.3 0 01-.92-.38 1.26 1.26 0 01-.38-.9V9.28c0-.34.14-.67.38-.9.24-.25.57-.38.92-.38z" />
</svg>
<input id="options_foreground_input" placeholder="Foreground">
<svg id="options_foreground_browse" class="options_button" viewBox="0 0 40 40">
<path
d="M16 10a6 6 0 015.45 3.48 5 5 0 018.39 4.8A6 6 0 0128.21 30H22v-7.17l.83.83a2 2 0 002.94-2.7l-.11-.13-4.24-4.24a2 2 0 00-2.7-.12l-.13.12-4.25 4.24a2 2 0 002.7 2.94l.13-.11.83-.83V30h-6a6 6 0 01-1.58-11.79A6 6 0 0116 10z" />
</svg>
<svg id="options_foreground_spinner" viewBox="0 0 40 40">
<path
d="M19.8 8h.2A12 12 0 118 20v-.3.1c0-.35.14-.68.38-.92s.56-.38.9-.38h1.44c.34 0 .67.14.9.38.25.24.38.57.38.92V20a8 8 0 108.25-8L19.8 12a1.3 1.3 0 01-.92-.38 1.26 1.26 0 01-.38-.9V9.28c0-.34.14-.67.38-.9.24-.25.57-.38.92-.38z" />
</svg>
<p class="options_heading">Masks</p>
<svg id="options_custom" class="options_button" viewBox="0 0 40 40">
<path
d="M26.5 21a5.5 5.5 0 110 11 5.5 5.5 0 010-11zm-13 0a5.5 5.5 0 110 11 5.5 5.5 0 010-11zm13 4a1.5 1.5 0 100 3 1.5 1.5 0 000-3zm-13 0a1.5 1.5 0 100 3 1.5 1.5 0 000-3zm0-17a5.5 5.5 0 110 11 5.5 5.5 0 010-11zm13 0a5.5 5.5 0 110 11 5.5 5.5 0 010-11zm-13 4a1.5 1.5 0 100 3 1.5 1.5 0 000-3zm13 0a1.5 1.5 0 100 3 1.5 1.5 0 000-3z" />
</svg>
<svg id="options_google" class="options_button" viewBox="0 0 40 40">
<path d="M20 8a12 12 0 110 24 12 12 0 010-24zm0 4a8 8 0 100 16 8 8 0 000-16z" />
</svg>
<svg id="options_apple" class="options_button" viewBox="0 0 40 40">
<path
d="M25 8a7 7 0 017 7v10a7 7 0 01-7 7H15a7 7 0 01-7-7V15a7 7 0 017-7h10zm0 4H15a3 3 0 00-3 3v10a3 3 0 003 3h10a3 3 0 003-3V15a3 3 0 00-3-3z" />
</svg>
<svg id="options_microsoft" class="options_button" viewBox="0 0 40 40">
<path d="M32 8v24H8V8h24zm-4 4H12v16h16V12z" />
</svg>
<svg id="options_samsung" class="options_button" viewBox="0 0 40 40">
<path
d="M20 8h.65C29.62 8.12 32 10.71 32 20v.65C31.88 29.62 29.29 32 20 32h-.65C10.38 31.88 8 29.29 8 20v-.65C8.12 10.37 10.7 8 20 8zm.59 4H18.85c-6.05.1-6.81 1.04-6.85 7.42v1.45l.02.82c.14 5.47 1.19 6.25 7.11 6.3L20 28h1.17c5.94-.1 6.77-1.02 6.83-7.13v-2.03c-.1-6.04-1.05-6.8-7.41-6.84z" />
</svg>
<p class="options_heading">Animations</p>
<svg id="options_top" class="options_button" viewBox="0 0 40 40">
<path
d="M10.59 19.42a2 2 0 01-.12-2.7l.12-.13 7.92-7.93.07-.07a2 2 0 012.84 0l.1.1 7.9 7.9a2 2 0 11-2.83 2.83L22 14.83V30a2 2 0 11-4 0V14.83l-4.58 4.59a2 2 0 01-2.7.11l-.13-.11z" />
</svg>
<svg id="options_right" class="options_button" viewBox="0 0 40 40">
<path
d="M20.59 10.59a2 2 0 012.7-.12l.12.12 7.93 7.92.08.07a2 2 0 010 2.84l-.12.1-7.89 7.9a2 2 0 11-2.83-2.83L25.17 22H10a2 2 0 110-4h15.17l-4.58-4.59a2 2 0 01-.12-2.7l.12-.12z" />
</svg>
<svg id="options_bottom" class="options_button" viewBox="0 0 40 40">
<path
d="M29.42 20.58a2 2 0 01.11 2.7l-.11.13-7.93 7.93-.07.08a2 2 0 01-2.84 0l-.1-.12-7.9-7.89a2 2 0 112.84-2.83L18 25.17V10a2 2 0 114 0v15.17l4.59-4.59a2 2 0 012.7-.11l.13.11z" />
</svg>
<svg id="options_left" class="options_button" viewBox="0 0 40 40">
<path
d="M19.42 10.59a2 2 0 00-2.7-.12l-.13.12-7.93 7.92-.07.07a2 2 0 000 2.84l.1.1 7.9 7.9a2 2 0 002.83-2.83L14.83 22H30a2 2 0 100-4H14.83l4.59-4.59a2 2 0 00.11-2.7l-.11-.12z" />
</svg>
<svg id="options_lean" class="options_button" viewBox="0 0 40 40">
<path
d="M32 23.71a11 11 0 00-20.02-6 2 2 0 00-3.97.14L8 18v6a2 2 0 001.85 2H16a2 2 0 00.15-4H14.29a7 7 0 0113.7 1.76L28 24a2 2 0 004 .15V23.7z" />
</svg>
<svg id="options_rean" class="options_button" viewBox="0 0 40 40">
<path
d="M8 23.71a11 11 0 0120.02-6 2 2 0 013.97.14L32 18v6a2 2 0 01-1.85 2H24a2 2 0 01-.15-4H25.71a7 7 0 00-13.7 1.76L12 24a2 2 0 01-4 .15V23.7z" />
</svg>
<svg id="options_push" class="options_button" viewBox="0 0 40 40">
<path
d="M18 20a2 2 0 012 2v6a2 2 0 11-4 0v-1.17l-4.59 4.58A2 2 0 018.6 28.6L13.17 24H12a2 2 0 110-4h6zM31.42 8.59a2 2 0 010 2.82L26.82 16H28a2 2 0 110 4h-6a2 2 0 01-2-2v-6a2 2 0 114 0v1.17l4.59-4.58a2 2 0 012.83 0z" />
</svg>
<svg id="options_pull" class="options_button" viewBox="0 0 40 40">
<path
d="M19.42 20.59a2 2 0 010 2.82L14.82 28H16a2 2 0 110 4h-6a2 2 0 01-2-2v-6a2 2 0 114 0v1.17l4.59-4.58a2 2 0 012.83 0zM30 8a2 2 0 012 2v6a2 2 0 11-4 0v-1.17l-4.59 4.58a2 2 0 01-2.82-2.82L25.17 12H24a2 2 0 110-4h6z" />
</svg>
<p class="options_heading">Advanced</p>
<svg id="options_ghost" class="options_button" viewBox="0 0 40 40">
<path
d="M20 8a10 10 0 0110 9.72V28a2 2 0 11-4 0v2a2 2 0 11-4 0v-2a2 2 0 11-4 0v2a2 2 0 11-4 0v-2a2 2 0 11-4 0V18A10 10 0 0120 8zm-3 7a2 2 0 100 4 2 2 0 000-4zm6 0a2 2 0 100 4 2 2 0 000-4z" />
</svg>
<svg id="options_ruler" class="options_button" viewBox="0 0 40 40">
<path
d="M25 8a2 2 0 012 2v3h3a2 2 0 110 4h-3v6h3a2 2 0 110 4h-3v3a2 2 0 11-4 0v-3h-6v3a2 2 0 11-4 0v-3h-3a2 2 0 110-4h3v-6h-3a2 2 0 110-4h3v-3a2 2 0 114 0v3h6v-3c0-1.1.9-2 2-2zm-2 15v-6h-6v6h6z" />
</svg>
<svg id="options_shrink" class="options_button" viewBox="0 0 40 40">
<path
d="M14.5 19a6.5 6.5 0 110 13 6.5 6.5 0 010-13zM31.42 8.59a2 2 0 010 2.82L26.82 16H28a2 2 0 110 4h-6a2 2 0 01-2-2v-6a2 2 0 114 0v1.17l4.59-4.58a2 2 0 012.83 0z" />
</svg>
<svg id="options_share" class="options_button" viewBox="0 0 40 40">
<path
d="M17.88 10.8a8 8 0 0111.31 11.32l-1.41 1.42-.11.1a2 2 0 01-2.82-2.82l.1-.11 1.41-1.42a4 4 0 00-5.5-5.8l-.15.15-1.42 1.41-.1.1a2 2 0 01-2.83-2.82l.1-.1 1.42-1.42zm-5.66 5.66a2 2 0 012.93 2.72l-.1.11-1.41 1.42a4 4 0 005.5 5.8l.15-.15 1.42-1.41a2 2 0 012.93 2.72l-.1.1-1.42 1.42a8 8 0 01-11.31-11.31l1.41-1.42zm8.49 0a2 2 0 112.83 2.83l-4.25 4.25a2 2 0 11-2.83-2.83l4.25-4.25z" />
</svg>
</div>
<p id="description"><span id="description_about">About Adaptive Icons</span><br><br>The app icon is one of the most
important assets of an app and
therefore it is key to make it
look perfect on any device. Adaptive Icons make that possible and also allow you to add a nice little extra
touch to your app.<br><br>To get started designing Adaptive Icons you can use this <a id="description_sketch"
href="https://www.sketchappsources.com/free-source/3045-adaptive-icon-template-sketch-freebie-resource.html">Sketch</a>
and <a id="description_figma" href="https://www.uplabs.com/posts/adaptive-icon-sticker-sheet-2">Figma</a>
template.
</p>
<div id="resources">
<a class="resources_article"
href="https://developer.android.com/guide/practices/ui_guidelines/icon_design_adaptive.html">
<p class="resources_headline">Official documentation</p>
<p class="resources_description">Android 8.0 (API level 26) introduces adaptive launcher icons, which can
display a variety of shapes across different device models. For example, an adaptive launcher icon can
display a circular shape on one OEM device, and display a squircle on another device. Each device OEM
provides a mask, which the system then uses to render all adaptive icons with the same shape. Adaptive
launcher icons are also used in shortcuts, the Settings app, sharing dialogs, and the overview screen.
</p>
<p class="resources_reference">https://developer.android.com</p>
<div class="resources_overflow"></div>
</a>
<a class="resources_article"
href="https://medium.com/google-design/understanding-android-adaptive-icons-cee8a9de93e2">
<p class="resources_headline">Understanding Adaptive Icons</p>
<p class="resources_description">While Android’s icon guidelines have evolved over time, they have always
promoted using unique shapes. I was a huge fan of this! I held that it really helped users to locate the
app they wanted to launch. If you want to get nostalgic you can listen to Roman Nurik and I talk about
this to 6 whole minutes in an old video we made.</p>
<p class="resources_reference">https://medium.com</p>
<div class="resources_overflow"></div>
</a>
<a class="resources_article" href="https://medium.com/google-design/designing-adaptive-icons-515af294c783">
<p class="resources_headline">Designing Adaptive Icons</p>
<p class="resources_description">Adaptive icons are 108dp*108dp in size but are masked to a maximum of
72dp*72dp. Different devices can supply different masks which must be convex in shape and may reach a
minimum of 33dp from the center in places.</p>
<p class="resources_reference">https://medium.com</p>
<div class="resources_overflow"></div>
</a>
<a class="resources_article"
href="https://medium.com/google-developers/implementing-adaptive-icons-1e4d1795470e">
<p class="resources_headline">Implementing Adaptive Icons</p>
<p class="resources_description">It’s also worth pointing out that Android Studio 3.0 includes a new wizard
to help you to create adaptive icons which we won’t cover here; we’ll stick to the fundamental format
and techniques.</p>
<p class="resources_reference">https://medium.com</p>
<div class="resources_overflow"></div>
</a>
</div>
<a id="author" href="https://mariusclaret.com">Created by Marius Claret</a>
<a id="twitter" href="https://twitter.com/mariusclaret">
<svg id="twitter_icon" viewBox="0 0 24 24">
<path
d="M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z" />
</svg>
</a>
<div id="drop">
<div id="drop_seperation"></div>
<div id="drop_background">Background</div>
<div id="drop_foreground">Foreground</div>
</div>
<script>
(function (f, a, t, h, o, m) {
a[h] = a[h] || function () {
(a[h].q = a[h].q || []).push(arguments)
};
o = f.createElement('script'),
m = f.getElementsByTagName('script')[0];
o.async = 1; o.src = t; o.id = 'fathom-script';
m.parentNode.insertBefore(o, m)
})(document, window, 'https://cdn.usefathom.com/tracker.js', 'fathom');
fathom('set', 'siteId', 'NBREQWWM');
fathom('trackPageview');
</script>
</body>
</html>