-
Notifications
You must be signed in to change notification settings - Fork 357
/
ethereum-address-sample.html
45 lines (38 loc) · 1.25 KB
/
ethereum-address-sample.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
<!doctype html>
<head>
<meta charset="utf-8">
<style>
.identicon {
display: inline-block;
width: 32px;
height: 32px;
margin: 16px;
background-size: cover;
background-repeat: no-repeat;
border-radius: 50%;
box-shadow: inset rgba(255, 255, 255, 0.6) 0 2px 2px, inset rgba(0, 0, 0, 0.3) 0 -2px 6px;
transition: border-radius 2.5s;
transition-delay: 3s;
}
.identicon:hover {
border-radius: 6.25%;
transition-delay: 1s;
}
</style>
</head>
<body>
<div id="squareIcon" class="identicon"></div>
<div id="roundIcon" class="identicon"></div>
<!-- Main blockies -->
<script src="blockies.js"></script>
<!-- optional if you want rounded icons -->
<script type="text/javascript" src="hqx.js"></script>
<script>
var address = '0xfb6916095ca1df60bb79ce92ce3ea74c37c5d359';
var squareIcon = document.getElementById('squareIcon');
squareIcon.style.backgroundImage = 'url(' + blockies.create({ seed:address ,size: 8,scale: 16}).toDataURL()+')'
// If you want rounded and diagonals
var roundIcon = document.getElementById('roundIcon');
roundIcon.style.backgroundImage = 'url(' + hqx(blockies.create({ seed:address ,size: 8,scale: 1}),4).toDataURL()+')'
</script>
</body>