-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
40 lines (40 loc) · 1.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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Avatarer</title>
<style>
html {
background: #fff;
background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%239C92AC' fill-opacity='0.4'%3E%3Cpath d='M50 50c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10c0 5.523-4.477 10-10 10s-10-4.477-10-10 4.477-10 10-10zM10 10c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10c0 5.523-4.477 10-10 10S0 25.523 0 20s4.477-10 10-10zm10 8c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm40 40c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
font-family: sans-serif;
height: 100%;
position: relative;
}
body {
background: #fff;
border: 2px solid #9C92AC;
left: 50%;
padding: 10px;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 800px;
}
svg {
background: #fff;
height: 256px;
margin: 5px;
overflow: hidden;
width: 256px;
}
</style>
</head>
<body>
<h1 style="display: inline; margin-top: 0">Avatarer</h1> By <a href="https://consto.uk">Matthew Consterdine</a>
<p>An experiment with avatar generation, SVGs, and a simple virtual DOM. Feel free to use it anywhere.</p>
<p>Enter random text: <input type="text" value="[email protected]" id="input" /></p>
<div id="output"></div>
<script src="random.js"></script>
<script src="script.js"></script>
</body>
</html>