waseigo

waseigo

IdenticonSvg - Generates identicons in SVG format, so they can be inlined in HTML

I wrote IdenticonSvg because I like using identicons as visual identifiers of HTML listings, e.g. in grids or in table rows, and didn’t want to deal with generating identicons in PNG and loading them from files or as base64-encoded data.

IdenticonSvg exposes a single generate/4 function that generates the SVG code of the identicon for the specified text argument, optionally with different identicon size, background color, and/or opacity.

Without specifying any optional arguments this function generates a 5x5 identicon with a transparent background and colored grid squares with full opacity.

Optionally, specify any combination of the following arguments:

  • size: the number of grid squares of the identicon’s side; integer, 4 to 10; 5 by default.
  • bg_color: the color of the background grid squares; string, hex code (e.g., #eee); nil by default.
  • opacity: the opacity of the entire identicon (all grid squares); float, 0.0 to 1.0; 1.0 by default.

Setting bg_color to nil (default value) generates only the foreground (colored) squares, with the default (1.0) or requested opacity.

The color of the grid squares is always equal to the three first bytes of the hash of text, regardless of which hashing function is used automatically.

A different hashing function is used automatically for each identicon size, so that the utilization of bits is maximized for the given size: MD5 for sizes 4 and 5, RIPEMD-160 for 6, and SHA3 for 7 to 10 with 224, 256, 384 and 512 bits, respectively.

The package is available on Hex.

The documentation is available on HexDocs.

The source code is on GitHub.

Any related posts (none yet) will be found on my blog.

Most Liked

waseigo

waseigo

New since v0.8.0: Setting bg_color to one of the following 3 atom values sets the color of the background squares to the corresponding RGB-complementary color of the automatically-defined foreground color, with the default (1.0) or requested opacity:

  • :basic: the complementary color, i.e. the opposite color of fg_color on the color wheel.
  • :split1: the first adjacent tertiary color of the complement of fg_color on the color wheel.
  • :split2: the second adjacent tertiary color of the complement of fg_color on the color wheel.
waseigo

waseigo

v0.9.4 brings squircle cropping to the identicons, using the Squircle module.

iex> IdenticonSvg.generate("IdenticonSvg", 5, :basic, 0.8, 2, squircle_curvature: 0.8) |> IO.puts 
<svg xmlns="http://www.w3.org/2000/svg" shape-rendering="crispEdges" viewBox="0 0 9 9" height="100%" width="100%" version="1.2"><defs><pattern id="agdwh2" patternUnits="userSpaceOnUse" width="9" height="9"><g transform="translate(2,2)"><path style="fill:#22f7b3;fill-opacity:0.8;" d="M0 0h1v1h-1zM4 0h1v1h-1zM0 1h1v1h-1zM4 1h1v1h-1zM0 2h1v1h-1zM2 2h1v1h-1zM4 2h1v1h-1zM1 3h3v1h-3zM1 4h1v1h-1zM3 4h1v1h-1z"/><defs><mask maskContentUnits="userSpaceOnUse" id="z8mq5b8i4n"><path style="fill-opacity:0.8;fill:#fff;" d="M-2 -2h9v9h-9z"/><path style="fill-opacity:1;" d="M0 0h1v1h-1zM4 0h1v1h-1zM0 1h1v1h-1zM4 1h1v1h-1zM0 2h1v1h-1zM2 2h1v1h-1zM4 2h1v1h-1zM1 3h3v1h-3zM1 4h1v1h-1zM3 4h1v1h-1z"/></mask></defs><path mask="url(#z8mq5b8i4n)" style="fill-opacity:1; fill:#DD084C;" d="M-2 -2h9v9h-9z"/></g></pattern></defs><path d="M0 4.5C0 0.9 0.9 0 4.5 0S 9 0.9 9 4.5 8.1 9 4.5 9 0 8.1 0 4.5" transform="" fill="url(#agdwh2)"/></svg>
:ok

ku1ik

ku1ik

This is great! I want to replace gravatars with SVG based generated icons and this is exactly what I planned to implement, until I found your library. Thanks for building it :ok_hand:

Where Next?

Popular in Announcing Top

mspanc
I am pleased to announce an initial release of the Membrane Framework - an Elixir-based framework with special focus on processing multim...
New
jakub-zawislak
Hi everyone, I’m coming from the Symfony (PHP) framework. I like Phoenix, but it has a one thing that was build much better in the Symfo...
New
ostinelli
Let’s write a database! Well not really, but I think it’s a little sad that there doesn’t seem to be a simple in-memory distributed KV da...
New
dominicletz
Hi, I thought I had posted my library before but seems I hadn’t. The project is still in early stages but it’s growing and so I think it...
New
maltoe
Hello! Came here to announce ChromicPDF, a pet project PDF generator I’ve been working on for the past few months. Why another PDF gener...
New
achempion
Hi, I would like to tell about my initiative to further maintain and develop Waffle project which is the fork of Arc library. The progre...
New
archan937
It is a well-know topic within the Elixir community: “To mock or not to mock? :)” Every alchemist probably has his / her own opinion con...
New
woylie
I released Doggo, a collection of unstyled Phoenix components. https://github.com/woylie/doggo Features Unstyled Phoenix components....
New
tmbb
I’ve decided to create this topic to discuss optimization possibilities for something like Phoenix LiveView. I’ve created this topic unde...
144 10462 141
New
handnot2
Samly can be used to enable SAML 2.0 Single Sign On in a Plug/Phoenix application. This library uses Erlang esaml to provide plug enabl...
New

Other popular topics Top

aadeshere1
I have a another noob question about loop. Since elixir is immutable, while loop is not directly possible. total = 10 while total != 0 ...
New
senggen
Erlang/OTP 25 [erts-13.2.2] [source] [64-bit] [smp:8:8] [ds:8:8:10] [async-threads:1] 15:22:35.803 [error] gen_event {lager_file_backend...
New
mcarvalho
What is the difference between System.get_env and Application.get_env? For example, what are best practices to use one versus another.
New
minhajuddin
I have seen a lot of code which picks the first element from a list using Enum.at(0) instead of List.first. Is there a reason why people ...
New
stefanluptak
Hello everybody, usually, I use a 29" ultra-wide monitor for VSCode which can easily accomodate explorer (files panel) + file with code ...
New
freewebwithme
Using vs code and installed ElixirLS: support and debugger. And I got an error popped up on start up says Failed to run ‘elixir’ comma...
New
Emily
I have VueJS GUIs with the project generated using Webpack. I have Elixir modules that will need to be used by the VueJS GUIs. I forese...
New
aalberti333
As the title describes, I’m trying to run Enum.map() over a list of key/value pairs, where the value is a map. My data looks like this: ...
New
klo
Got a question about when to concat vs. prepending items to list then reversing to achieve appending. So i know lists boil down to [1 | ...
New
komlanvi
Hi everyone, I was playing with phoenix liveView but I run into an issue. I have a form and want to validate each input text when the te...
New

Latest on Elixir Forum

Elixir Forum

We're in Beta

About us Mission Statement