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

seancribbs
Today I released a new dialyzer Mix task as the dialyzex package! At the time we started writing this task, the existing dialyzer integra...
New
gabrielpoca
Hello everyone! I want to share with you something that I’m really proud of: https://stillstatic.io/ Still is a static site builder for...
New
dbern
I’m excited to announce that TaxJar has developed and open-sourced DateTimeParser. We developed it because we found a need to parse user ...
New
tmbb
I’ve been working on two packages (not on hex.pm yet) to build admin interfaces for phoenix apps: bureaucrat - which contains a bunch ...
New
brainlid
LangChain is short for Language Chain. An LLM, or Large Language Model, is the “Language” part. This library makes it easier for Elixir a...
New
bluzky
You may know https://ui.shadcn.com/, a UI component library for React. I really love it’s design style and components. I’ve built some co...
384 14136 119
New
zorbash
I created Kitto a framework for dashboards inspired by Dashing. The distributed characteristics of Elixir and the low memory footprint...
New
oltarasenko
Dear Elixir community, After a year of development, bug fixes, and improvements, we are proudly ready to share the release of Crawly 0.1...
New
blatyo
The best overview for how things are tied together is this presentation. Modules and functions are pretty well documented at this point, ...
New
cjen07
parameterized pipe in elixir: |n&gt; edit: negative index in |n&gt; and mixed usage with |&gt; are supported example: use ParamPipe ...
New

Other popular topics Top

sen
Hi All, I set a environment variables in dev.exs , like below code. when i start server, how can i set the ${enable} value? thanks. d...
New
New
AstonJ
Posting this to see if we can make things easier for people to get into Neovim. If you use Neovim and have a favourite distro please let ...
New
Patoshizzle
After calling mix ecto.create I get this error: 17:00:32.162 [error] GenServer #PID&lt;0.412.0&gt; terminating ** (Postgrex.Error) FATAL...
New
AngeloChecked
What learn first? Rust or Elixir Hi Elixir community! I’m here because i want learn a new language. I’m a junior developer and mainly i ...
New
SoCreat
i’m a new one to elixir which editor can i use vs code? or atom? Thanks! :smiley:
New
RisingFromAshes
I’ve read in another post that it may be possible with a router helper - but I couldn’t find an appropriate one, and tbh, I’m still just ...
New
nsuchy
Hi. I’ve noticed that Windows Powershell has it’s own IEX command and you cannot access Elixir’s IEX due to the conflict. This isn’t a cr...
New
JorisKok
I have a server on AWS, and was running a load test using artillery. When looking at the Phoenix dashboard I see the Ports going to 100% ...
New
vegabook
I’m brand new to Phoenix and I have stripped one of the demo applications to the bone. I just want to get an svg up on the screen. Here i...
New

We're in Beta

About us Mission Statement