IdenticonSvg (IdenticonSvg v1.0.0)

Copy Markdown View Source

Generate GitHub-style identicons as complete SVG documents.

The central entry point is generate/6. It hashes the input text, derives a grid and foreground color from the hash, mirrors the grid for symmetry, merges neighboring foreground squares into polygons, traces their edges, and composes the final SVG string.

Quick-start

iex> svg = IdenticonSvg.generate("banana")
iex> String.starts_with?(svg, "<svg")
true
iex> String.ends_with?(svg, "</svg>")
true

See generate/6 for all available options (size, background color, opacity, padding, and squircle cropping).

Summary

Functions

generate(text, size \\ 5, bg_color \\ nil, opacity \\ 1.0, padding \\ 0, opts \\ [squircle_curvature: nil])

(since 0.1.0)

Generate the SVG code of the identicon for the specified text.

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

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.

Doctests

iex> svg = IdenticonSvg.generate("banana")
iex> String.starts_with?(svg, "<svg")
true
iex> String.ends_with?(svg, "</svg>")
true
iex> String.contains?(svg, ~s(version="1.1"))
true

The output is deterministic — the same text always produces the same identicon:

iex> IdenticonSvg.generate("banana") == IdenticonSvg.generate("banana")
true

Different texts produce different identicons:

iex> IdenticonSvg.generate("banana") != IdenticonSvg.generate("apple")
true

Arguments

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 as a hex code string (e.g., #eee) or an atom specifying the color complementarity (see below); nil by default.
  • opacity: the opacity of the entire identicon (all grid squares); float, 0.0 to 1.0; 1.0 by default.

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

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

Setting padding to a positive integer adds padding around the identicon. If bg_color is non-nil, the padding area inherits the background color at the requested opacity. The resulting SVG file size is greatly reduced compared to generating a larger grid.

The :squircle_curvature keyword option crops the identicon to a squircle. Pass a float between 0.0 (sharp corners) and 1.0 (circle). Requires the squircle dependency.

Background complementarity

Setting bg_color to one of the following atom values sets the color of the background squares to the corresponding RGB-complementary color of the automatically-defined foreground color:

  • :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.

5x5 identicon with transparent background:

generate("banana")

5x5 identicon for &quot;banana&quot;, at full opacity, with transparent background

5x5 identicon with complementary background color:

generate("banana", 5, :basic)

5x5 identicon for &quot;banana&quot;, at full opacity, with complementary background

5x5 identicon with first split-complementary background color:

generate("banana", 5, :split1)

5x5 identicon for &quot;banana&quot;, at full opacity, with first split-complementary background

5x5 identicon with second split-complementary background color:

generate("banana", 5, :split2)

5x5 identicon for &quot;banana&quot;, at full opacity, with second split-complementary background

6x6 identicon with transparent background:

generate("pineapple", 6)

6x6 identicon for &quot;pineapple&quot;, at full opacity, with transparent background

7x7 identicon with padding 1, complementary background color, and 70% opacity:

generate("overbring.com", 7, :basic, 0.7, 1)

7x7 identicon for &quot;overbring.com&quot; with padding 1, complementary background color, and 70% opacity

7x7 identicon with blue (#33f) background:

generate("refrigerator", 7, "#33f")

7x7 identicon for &quot;refrigerator&quot;, at full opacity, with blue background

9x9 identicon with transparent background and 50% opacity:

generate("2023-03-14", 9, nil, 0.5)

9x9 identicon for &quot;2023-03-14&quot;, at 50% opacity, with transparent background

10x10 identicon with yellow (#ff0) background and 80% opacity:

generate("banana", 10, "#ff0", 0.8)

10x10 identicon for &quot;banana&quot;, at 80% opacity, with yellow background

10x10 identicon with split-1 background complementary color, with 3 squares of padding, at full opacity, cropped to a squircle with curvature factor 0.9:

generate("squircles!!", 10, :split2, 1.0, 3, squircle_curvature: 0.9)

5x5 identicon with basic background complementary color, with 2 squares of padding, at 40% opacity, cropped to a squircle with curvature factor 0.82:

generate("elixir", 5, :basic, 0.4, 2, squircle_curvature: 0.82)