Public key avatar generator for the crypto lib SEA from GUN – the decentralized graph database of the future
MIT License
Gun-Avatar takes a public key string
88 symbols long and creates a base64
encoded picture to be set as a source for an <img>
tag.
SEA public key consists of 87 symbols including a dot in the middle, so we can consider it as (7*4+1)*2
. So the steps to generate a unique picture for the key are like that:
.
.Install the script from npm
with a tool of your choice.
npm i gun-avatar
Then you can import {gunAvatar} from 'gun-avatar'
and use the function to render the avatar. Or simply import 'gun-avatar'
for custom element use.
After you add the script to the page you get a custom element <gun-avatar />
for ease of use. The attributes are reactive to changes. Set dark
attribute if you need a dark version of the avatar. Set round
attribute to get a rounded image. Also size
in pixels is available.
<script type="module">
import { mountElement } from "https://cdn.skypack.dev/gun-avatar";
mountElement();
</script>
<gun-avatar
pub="0000000kw75Ute2tFhdjDQgzR-GsGhlfSlZxgEZKuquI.2F-j9ItJY44U8vcRAsj-5lxnECG5TDyuPD8gEiuInp8"
size="300"
round
dark
reflect
draw="circles"
/>
You can set up a custom element name with mountElement('avatar')
data-pub
attributeAdd the script to the page and then add gun-avatar
class to an img tag along with add data-pub
attribute with the pub key. gun-avatar
automatically finds them on page and fills with corresponding base64 picture data. You can set data-size
in px and style the avatar with css as you want. Also there's data-dark
option to generate a dark version of the same avatar. You can add .gun-avatar {border-radius: 100%}
to tour css to make it round.
<script type="module">
import { mountClass } from "https://cdn.skypack.dev/gun-avatar";
mountClass();
</script>
<img
class="gun-avatar"
data-size="200"
data-draw="squares"
data-reflect="false"
data-pub="YZOBPSkw75Ute2tFhdjDQgzR-GsGhlfSlZxgEZKuquI.2F-j9ItJY44U8vcRAsj-5lxnECG5TDyuPD8gEiuInp8"
/>
You can set up a custom class name with mountClass('avatar')
Install the gun-avatar
package and import the gunAvatar
function. Then you can use it to generate the base64 string to place into the src attribute with your favourite library or vanilla js. Function gets an object with options: pub
, size
in px, draw
mode, dark
of not, reflect
or not.
import { gunAvatar } from "https://cdn.skypack.dev/gun-avatar";
const pub =
"YZOBPSkw75Ute2tFhdjDQgzR-GsGhlfSlZxgEZKuquI.2F-j9ItJY44U8vcRAsj-5lxnECG5TDyuPD8gEiuInp8";
document.addEventListener("DOMContentLoaded", () => {
document.getElementById("avatar").src = gunAvatar({ pub, size: 200 });
});
Circles - the default mode.
Squares - gradient squares over blurred ones (useful for rooms)
<gun-avatar
pub="0000000kw75Ute2tFhdjDQgzR-GsGhlfSlZxgEZKuquI.2F-j9ItJY44U8vcRAsj-5lxnECG5TDyuPD8gEiuInp8"
size="300"
reflect="false"
draw="squares"
></gun-avatar>
circles
squares
triangles
?