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);nilby 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
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 offg_coloron the color wheel.:split1: the first adjacent tertiary color of the complement offg_coloron the color wheel.:split2: the second adjacent tertiary color of the complement offg_coloron the color wheel.
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
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 ![]()
Popular in Announcing
Other popular topics
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #advent-of-code
- #elixirconf-us
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #performance











