waseigo
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.
Where Next?
Trending in Announcing
Other Trending Topics
Latest on Elixir Forum
Sponsor Spotlight
Deploy Phoenix to your own VPS with PaaS ease: push-to-deploy, zero downtime, auto SSL, managed Postgres. 14-day free trial at potions.io
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #library
- #deployment
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #elixirconf
- #channels
- #exunit
- #discussion
- #code-sync
- #podcasts
- #javascript
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #ai
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #blog-post
- #elixirconf-us
- #elixir-ls
- #phoenix_html
- #iex
- #graphql
- #genstage
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #elixirconf-eu
- #api
- #forms
- #security
- #metaprogramming
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Error tracking, logs, uptime, and Just Enough APM. Built for developers.
Practical resources that improve the lives of professional developers.
Master modern tools, write cleaner code, and tackle real-world challenges.
**Building the future of software with AI, trust, and human connection.**
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"
Showing Posts 1 to 10- Show Best Posts
- Show All (oldest first)
- Show All (newest first)
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
waseigo
Thanks! Let me know if you think that anything deserves an improvement! For example, I never got around to implementing automatic color-complementarity.
ku1ik
Works great, well done!
Indeed the only thing I’d add is automatic background color.
I’m using gravatar, see this page Explore - asciinema.org which displays author avatars at the bottom of each card using gravatar’s “retro” style. After replacing them with IdenticonSVG I realized the colored background in the gravatars gave it a more “complete” feel compared to the new identicon look.
For now I’ll probably use default transparent background, or a fixed color. I can look into implementing some automatic background mode in your library, and open a PR if I get anywhere with it and you’d be interested in such contribution.
waseigo
Thanks! Seems like an easy addition, way easier than I thought – see also tint – so I might just do this sometime during this week.
Otherwise, PRs are of course welcome!
waseigo
Almost done.
waseigo
@ku1ik Do you need the identicon to optionally have a padding with a thickness of one “cell”?
waseigo
New since v0.8.0: Setting
bg_colorto 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 requestedopacity::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.ku1ik
Hmm, that (optional padding) could actually be useful option to have.
ku1ik
Wow, that was fast. Awesome! I’ll give it a spin tomorrow. Thank you!
waseigo
@ku1ik I’m working on merging rectangles and creating paths. I also realized that I don’t need to replicate the styling for each rect/path, but can wrap the foreground and background sets (when I have them working) into a
<g>tag. I’ll let you know when I finally get it working, as I’m also interested in saving bandwidth, when I’m using this on listings with many different identicons.One thing I’ve considered is that the duplication of text in the current version is probably not that bad, when your webserver applies gzip or brotli compression. Yet, I feel compelled to do it right
I think that when I will get this working, the library deserves hitting v1.0.